In Ubuntu 21.04 the version of nodejs in the package manager is well behind the latest version. We need to install node.js via the Node Version Manager, nvm, via github.
Install Nvm
First, we need to download and install nvm, the Node Version Manager. Go to https://github.com/nvm-sh/nvm and use the curl or wget command shown under 'Installing and Updating' from your home directory. At the time of writing this was:
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
me@home:~$ wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
=> Downloading nvm from git to '/home/me/.nvm'
=> Cloning into '/home/me/.nvm'...
remote: Enumerating objects: 348, done.
remote: Counting objects: 100% (348/348), done.
remote: Compressing objects: 100% (297/297), done.
remote: Total 348 (delta 39), reused 160 (delta 26), pack-reused 0
Receiving objects: 100% (348/348), 200.87 KiB | 1.48 MiB/s, done.
Resolving deltas: 100% (39/39), done.
* (HEAD detached at FETCH_HEAD)
master
=> Compressing and cleaning up git repository
=> Appending nvm source string to /home/me/.bashrc
=> Appending bash_completion source string to /home/me/.bashrc
=> Close and reopen your terminal to start using nvm or run the following to use it now:
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" # This loads nvm bash_completion
Running either of the above commands downloads a script and runs it. The script clones the nvm repository to ~/.nvm, and attempts to add the source lines from the snippet below to the correct profile file (~/.bash_profile, ~/.zshrc, ~/.profile, or ~/.bashrc).
export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
Now close the console window and reopen it to reload the .bashrc file and check that nvm is present with:
nvm --version
If this responds with nvm not found, try source ~/.bashrc and try again.
Install the Latest LTS Version of node.js
Now to install the latest LTS version of node - currently, 16.9, run:
nvm install --lts
me@home:~$ nvm install --lts
Installing latest LTS version.
Downloading and installing node v14.17.6...
Downloading https://nodejs.org/dist/v14.17.6/node-v14.17.6-linux-x64.tar.xz...
########################################################################################################### 100.0%
Computing checksum with sha256sum
Checksums matched!
Now using node v14.17.6 (npm v6.14.15)
Creating default alias: default -> lts/* (-> v14.17.6)
then:
node --version
to check that the correct version is loaded.
Set Up Create-react-app
Go to the directory above the one you want to create and enter:
npx create-react-app my-app --use-npm
Replace my-app with the name of the react app you want to install; the '--use-npm' ensures that we use npm rather than the default yarn. The process will take some time and will give the following on the screen:
Creating a new React app in /home/me/projects/node/apps/my-app.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...
added 1925 packages, and audited 1926 packages in 1m
149 packages are looking for funding
run `npm fund` for details
10 moderate severity vulnerabilities
To address all issues, run:
npm audit fix
Run `npm audit` for details.
Installing template dependencies using npm...
added 56 packages, and audited 1982 packages in 7s
150 packages are looking for funding
run `npm fund` for details
10 moderate severity vulnerabilities
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
Removing template package using npm...
removed 1 package, and audited 1981 packages in 2s
150 packages are looking for funding
run `npm fund` for details
10 moderate severity vulnerabilities
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
Success! Created admin at /home/pete/Projects/node/lemarche-today/admin
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd admin
npm start
Happy hacking!
Do not run npm audit fix --force to fix vulnerabilities as it will just create more and worse vulnerabilities.
Now change directory to my-app or open my-app in your favourite IDE and run npm start to test the installation.
Add Sass support to creat-react-app
First, install node-sass:
npm i node-sass
Now you can rename src/App.css to src/App.scss and update src/App.js to import src/App.scss. This file and any other file will be automatically compiled if imported with the extension .scss or .sass.
To share variables between Sass files, you can use Sass imports. For example, src/App.scss and other component style files could include @import "./shared.scss"; with variable definitions.
This will allow you to do imports like
@import 'styles/_colors.scss'; // assuming a styles directory under src/
@import '~nprogress/nprogress'; // importing a css file from the nprogress node module
Note: You must prefix imports from node_modules with ~ as displayed above.
Adding Css Reset
This project setup uses PostCSS Normalize for adding a CSS Reset.
To start using it, add @import-normalize; anywhere in your CSS file(s). You only need to include it once and duplicate imports are automatically removed. Since you only need to include it once, a good place to add it is index.css or App.css.
index.css
@import-normalize; /* bring in normalize.css styles */
/* rest of app styles */
Tip: If you see an "Unknown at rule @import-normalize css(unknownAtRules)" warning in VSCode, change the css.lint.unknownAtRules setting to ignore.
{jcomments on}