2014 06 03 17 17 47 Sirolo

Monte Conero 1920x512

Monte Conero 1920x512

Setting Up Nvm, Node.js And Create-React-App

User Rating: 5 / 5

Star ActiveStar ActiveStar ActiveStar ActiveStar Active
 

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}