Get DevWP - WordPress Development Theme
How to Setup Node.JS on Windows and macOS

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.

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.
  • Bootstrap: A sleek, intuitive, and powerful front-end framework.
  • Chokidar-CLI: A fast cross-platform command line utility to watch file system changes.
  • Concurrently: Run multiple commands concurrently.
  • Directory Archiver: Compress directories into a zip file with options to exclude specific files or directories.
  • FontAwesome: A popular icon library and toolkit.
  • PostCSS CLI: A command-line interface for PostCSS.
  • Sass: A powerful CSS preprocessor.
  • Terser: A JavaScript compressor toolkit for ES6+.

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.



Leave a Reply

View Our Themes