Start a personal dev blog on your domain for free with Hashnode and grow your readership.
Get Started

How I Setup A Node Development Environment with Webpack and Eslint

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.

Additional Resources:

Start a personal dev blog on your domain for free and grow your readership.

3.4K+ developers have started their personal blogs on Hashnode in the last one month.

Write in Markdown · Publish articles on custom domain · Gain readership on day zero · Automatic GitHub backup and more

No Comments Yet