Setting up React16, Babel 7, Webpack 4 Dev Server with Jest and Enzyme — Minimal Setup

What we are going to achieve is:

Part 1 — Project Setup and Webpack configuration Dev Mode.

Part 2— Configure Babel and add React to your project

Part 3— Add Jest and Enzyme to your project

Part 1

Quick Project Setup

  1. Open terminal and create a new folder as react-boilerplate

mkdir react-boilerplate && cd react-boilerplate

2. Create a package.json file by running inside the folder react-boilerplate

npm init -y

It will look like the following:

{"name": "react-boilerplate","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"author": "","license": "ISC"}

3.Create a folder as ‘dist’ inside root directory react-boilerplate and cd into it

mkdir dist && cd dist

4. Create a file ‘index.html’ in folder dist and add the following into it.

touch index.html

5. Add the following to your index.html

<!DOCTYPE html>
<html>
<head>
<title>React-Boilerplate</title>
</head>
<body>
<div id="app"></div>
<script src="/bundle.js"></script>
</body>
</html>

The bundle.js file will be created by webpack so we need not worry about it right now. The div with id as app will be used to render our react components in.

Add module bundler Webpack configuration to our project

  1. Navigate to the root folder ‘react-boilerplate’ and run the following commands:
npm install --save-dev webpack webpack-dev-server webpack-cli

This will install webpack, webpack dev-server and webpack-cli (Command Line Interface) to run webpack from command line.

Your directory structure might look like this:

React Boilerplate — Project Structure

Notice the package-lock.json file, according to npm

package-lock.json is automatically generated for any operations where npm modifies either the node_modules tree, or package.json. It describes the exact tree that was generated, such that subsequent installs are able to generate identical trees, regardless of intermediate dependency updates.

More on this if you’re curious:

You can remove it for now if you like.

Now, that we have installed webpack, let’s begin writing webpack config.

2. Inside your root folder ‘react-boilerplate’ create a webpack.dev.js

touch webpack.dev.js

3. Add the following to your webpack.dev.js.

module.exports = {
entry: './src/index.js',
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './dist'
}
};

What did we just write?

entry: './src/index.js'

The entry attribute tells webpack the entry point for our application which is ‘./src/index.js’ in our case which we will create shortly.

output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
},

As you might have guessed, the above tells webpack where to place the output once it has done bundling up our application. In our case it is going to be placed in the dist folder under the root directory and the filename would be bundle.js

devServer: {
contentBase: './dist'
}

This tells webpack-dev-server to serve the files from the dist directory on localhost:8080. Notice that we haven’t mentioned the port and hostname anywhere and that’s why localhost:8080 is taken as the default one. You can change that devServer.host and devServer.port properties.

More here on this

4. Under the scripts section ,add the “start” script in your package.json in the root directory

"scripts": {"start": "webpack-dev-server --config ./webpack.dev.js --mode --open development"},

The above tells the webpack to start with dev-server and read the config from webpack.dev.js. Since we are running in development mode, we have to mention

--mode development

else webpack, by default, would take mode as production.

--open

open flag tells webpack to open browser automatically.

All that being said and done, what we need is to write some basic code for now for our index.js in ‘src’ folder under root directory.

5. Assuming you’re still in the root directory, do the following

mkdir src && cd src
touch index.js

Open index.js and write the following in it:

document.getElementById('app').innerHTML= '<h2>Hello</h2>'

Recall that we have created a div with id app in index.html.

That’s it! Now go to the terminal and fire the following command:

npm start

You should see the following output:

Try changing your index.js file and try different text instead of ‘hello’. You should see the changes immediately without the need to restart webpack.

Part 2 — Configure Babel and add React to your project

Part 3 — Add Jest and Enzyme to your project

--

--

--

Software Engineer at Microsoft

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Scaffolding Project as Important Part of Development

Parallel builds with Jenkins Pipeline

3 Things I Learned About Working with Data in Redux

Critical Rendering Path (CRP)

HTTP Requests with JAVASCRIPT Methods

The Wonderful World of Javascript Bundlers

Javascript Events — The Basics

GraphQL Basics with Express and MongoDB

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Anshul Chanchlani

Anshul Chanchlani

Software Engineer at Microsoft

More from Medium

Using Lerna for mono repos

A Simple Way to Handle Multilingual Context in a React App

We opened a lightweight Web IDE UI framework !