The Node development environment includes an installation of Nodejs and the NPM package manager the goal is to speed up the process involved in setting up your computer in order to start developing web applications.
I came up with this concise setup for a development environment, with this even a newbie can get his own environment up and running in minutes, the setup has some few essential parts:
- Nodejs and NPM
- Webpack, which comprises of webpack itself and webpack cli.
- Eslint for automatically detecting linting errors in your code.
Ok let's get started:
1. Installing node and npm
The first thing you would want to do, will be to install node if your don’t already have it installed, use this command $ node -v and then $ npm -v to verify if you already have node and npm installed, it is always advisable to use the node version manager (nvm) for installing node versions, you can check their documentation for how to install node using nvm for your local machine.
2. Installing Webpack
Run $ npm init command to setup a package.json file for your app in the root of your project directory, this is like a manifest file JavaScript dependencies. Then you will install webpack, webpack cli and the webpack dev server by running this command $ npm install webpack webpack-cli --save-dev
3. Create an entry point
We will create an entry point from which webpack will create our bundle.js in the dist folder: in the root of your project create a folder named src in the folder you will create a index.js file.
4. Setup a webpack.config.js file
After webpack has successfully installed, still in the root directory we will create and setup the webpack.config.js file with the following basic settings:
1. const path = require('path');
2. module.exports = {
3. entry: './src/index.js',
4. output: {
5. path: path.resolve(__dirname, 'dist'),
6. filename: 'bundle.js'
7. },
8. mode: 'development',
9. plugins: []
10. };
If you would like to do even more with webpack check out this article “ How to configure Webpack 4 from scratch for a basic website ”
It is also required you create a .gitignore file in the root of your project and ignore the node_modules, this file can get very large and you don’t want to push this to your remote repository.
5. Installing Eslint
To install eslint you will run this command $ npm install eslint --save-dev after which you will Initialize eslint for your project by running this command $ npx eslint --init you will be required to make some choices, choose the options that most suits your setup.
And with this, you have just set up a Node development environment for your project, it is this simple.