How to Setup Node.JS on Windows and macOS

What is Node.js?

Node.js is a powerful open-source runtime environment that enables you to run JavaScript code on the server-side. Leveraging the V8 JavaScript engine developed by Google, Node.js provides an event-driven, non-blocking I/O model, making it lightweight and efficient for building scalable network applications.

I use Node.js in all of my main projects because it helps me to automate a significant amount of my workflow. While developing my Custom WordPress Hybrid Theme DevWP, I demonstrate how to properly setup and use Node.js and explain the benefits of automation.

• Node.JS Official Site
• Node.JS Install on Windows Video
• Node.JS Install on macOS Video
• Node.JS Package JSON file Code Video

Installing nvm on macOS

To manage multiple versions of Node.js easily, you can use nvm (Node Version Manager).

---

Steps to Install nvm

1. Install nvm: Visit the NVM for macOS page for the latest instructions and version. Run the following command in your terminal:

   curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

2. Restart Terminal: Close and reopen your terminal.
3. Verify Installation: Check your nvm version with:

   nvm -v

Using nvm to Manage Node.js Versions

1. Set Default Node Version:

   nvm alias default node

2. Check Node.js Version:

   node -v

3. Install Node.js:

   nvm install node

4. Switch Node.js Versions:

   nvm install 20.14.0
   nvm install --lts

   Make sure to change the version number to the latest LTS as noted on from the Node.js website.

5. View Local and Remote Versions:

   nvm ls
   nvm ls-remote

6. Update Node to Latest LTS:

   nvm install 'lts/*' --reinstall-packages-from=current

Node.js on Windows

For Windows users, download Node.js directly from the Node.js Official Site. Follow the installation instructions provided.

---

NPM: Node Package Manager

NPM (Node Package Manager) is a vital tool for managing dependencies in your projects. It streamlines your workflow by automating tasks and managing packages efficiently.

NPM Website

Installing NPM Packages

To install a package, use the following command:

npm install package-to-install --save-dev

Or the shorthand version:

npm i package-to-install -D

Key Packages for a Productive Workflow

• Autoprefixer: Automatically adds vendor prefixes to CSS rules.
  • Autoprefixer on NPM

  npm i autoprefixer -D

• Bootstrap: A sleek, intuitive, and powerful front-end framework.
  • Bootstrap on NPM
  • Bootstrap Site

  npm install bootstrap --save-dev

• Chokidar-CLI: A fast cross-platform command line utility to watch file system changes.
  • Chokidar CLI on GitHub

  npm install chokidar-cli --save-dev

• Concurrently: Run multiple commands concurrently.
  • Concurrently on NPM

  npm i concurrently -D

• Directory Archiver: Compress directories into a zip file with options to exclude specific files or directories.
  • Dir Archiver on NPM

  npm install dir-archiver --save-dev

• FontAwesome: A popular icon library and toolkit.
  • FontAwesome on NPM

  npm i @fortawesome/fontawesome-free -D

• PostCSS CLI: A command-line interface for PostCSS.
  • PostCSS CLI on NPM

  npm i postcss-cli -D

• Sass: A powerful CSS preprocessor.
  • Sass on NPM

  npm i sass -D

• Terser: A JavaScript compressor toolkit for ES6+.
  • Terser on NPM

  npm i terser -D

Installing All Packages at Once

To install all the necessary packages with one command, run:

npm install @fortawesome/fontawesome-free autoprefixer bootstrap chokidar-cli concurrently dir-archiver postcss-cli sass terser --save-dev

Full `package.json` File

Create a package.json file in the root of your theme and paste the following code. Then, run npm install to install all dependencies:

{
  "name": "devwp",
  "version": "1.4.6",
  "description": "DevWP WordPress Development Training Theme",
  "author": "PixemWeb",
  "license": "GPL-3.0",
  "devDependencies": {
    "@fortawesome/fontawesome-free": "^6.5.

2",
    "autoprefixer": "^10.4.19",
    "bootstrap": "^5.3.3",
    "chokidar-cli": "^3.0.0",
    "concurrently": "^8.2.2",
    "dir-archiver": "^2.1.0",
    "postcss-cli": "^11.0.0",
    "sass": "^1.77.0",
    "terser": "^5.31.0"
  },
  "scripts": {
    "copyfonts": "cp node_modules/@fortawesome/fontawesome-free/webfonts/*.{ttf,woff2} ./webfonts/",
    "copyBS5": "cp -r node_modules/bootstrap/scss ./src/sass/bootstrap",
    "buildcss": "sass --style expanded --source-map src/sass/style.scss dist/css/style.css && sass --style expanded --source-map src/sass/editor-styles.scss dist/css/editor-styles.css && sass --style compressed --source-map src/sass/style.scss ./style.css && sass --style compressed --source-map src/sass/editor-styles.scss dist/css/editor-styles.min.css && postcss style.css --use autoprefixer -o style.css --map && postcss dist/css/editor-styles.min.css --use autoprefixer -o dist/css/editor-styles.min.css --map",
    "buildjs": "node concatmin.js",
    "build": "npm run buildcss && npm run buildjs",
    "watchcss": "chokidar \"src/sass/**/*.scss\" -c \"npm run buildcss\"",
    "watchjs": "chokidar \"src/js/**/*.js\" -c \"npm run buildjs\"",
    "watch": "concurrently \"npm run watchcss\" \"npm run watchjs\"",
    "dev": "dir-archiver --src . --dest ../devwp-dev.zip --exclude .DS_Store .git composer.lock node_modules vendor package-lock.json .phpcs-cache .phpunit.result.cache",
    "prod": "dir-archiver --src . --dest ../devwp-prod.zip --exclude .DS_Store .git composer.lock node_modules vendor package-lock.json .stylelintrc.json .gitattributes .github .gitignore composer.json package.json phpcs.xml.dist .editorconfig .phan .phpcs-cache concatmin.js phpmd.xml phpstan.neon.dist phpunit.xml psalm.xml stubs tests phpinsights.php .phpunit.result.cache devwp-vars-1.txt devwp-vars-2.txt"
  }
}

Running Scripts from `package.json`

The package.json file allows you to define custom scripts that can be run using the npm run command followed by the script name. These scripts can automate various tasks and streamline your development workflow and save us from developing carpal tunnel syndrome.

Here are the scripts defined in the provided package.json file:

1. copyfonts: Copies font files from the @fortawesome/fontawesome-free package to the webfonts directory.

   npm run copyfonts

2. copyBS5: Copies the Bootstrap 5 Sass files from the node_modules/bootstrap/scss directory to the src/sass/bootstrap directory.

   npm run copyBS5

3. buildcss: Compiles Sass files, generates source maps, and runs PostCSS with Autoprefixer on the compiled CSS files.

   npm run buildcss

4. buildjs: Runs the concatmin.js script to concatenate and minify JavaScript files.

   npm run buildjs

5. build: Runs both the buildcss and buildjs scripts to build the project.

   npm run build

6. watchcss: Watches for changes in the Sass files located in the src/sass directory and runs the buildcss script whenever a change is detected.

   npm run watchcss

7. watchjs: Watches for changes in the JavaScript files located in the src/js directory and runs the buildjs script whenever a change is detected.

   npm run watchjs

8. watch: Runs both the watchcss and watchjs scripts concurrently to watch for changes in both Sass and JavaScript files.

   npm run watch

9. dev: Creates a ZIP archive of the project files, excluding certain files and directories, for development purposes.

   npm run dev

10. prod: Creates a ZIP archive of the project files, excluding certain files and directories, for production purposes.

    npm run prod

To run any of these scripts, open your terminal, navigate to the project directory containing the package.json file, and use the npm run command followed by the script name. For example:

npm run build

This command will execute the build script, which in turn runs the buildcss and buildjs scripts to compile Sass files, generate source maps, run PostCSS with Autoprefixer, and concatenate and minify JavaScript files.

Using these scripts can greatly simplify your development process by automating repetitive tasks and ensuring consistent builds across different environments.

Remember to run npm install before running any of these scripts to ensure that all the required dependencies are installed in your project.

By following this guide, you can set up Node.js and a suite of helpful NPM packages to streamline your development workflow. This setup ensures that you have all the necessary tools to build, watch, and deploy your WordPress themes efficiently.

Share This On: