It is universally acknowledged that setting up a local dev environment is hard work. Especially for javascript frameworks that get constantly updated. The documentation for the older version suddenly stops working and you have to make sure you are installing the correct versions.

In this post, I will show you how to set up local dev environment for React with webpack 4 and babel 7. Webpack allows you to create a local server. It also enables you to do hot loading, which means the website you are building gets updated immediately after you change the code without restarting the server. We can also easily add browser support for ES6 and JSX. This is pretty much my favourite local dev set up to make a React Website.

First of all, let’s clarify the version of the packages I am using here. If you are using different versions, the chance is that you need to do a few tweaks.

Dev Dependencies

"@babel/core": "7.1.0"
"@babel/preset-env": "7.1.0"
"@babel/preset-react": "7.0.0"
"babel-loader": "8.0.4"
"webpack": "4.19.1"
"webpack-cli": "3.1.1"
"webpack-dev-server": "3.1.8"

Dependencies

"@babel/polyfill": "7.0.0"
"react": "16.5.2"
"react-dom": "16.5.2"

As prerequisite, you need to have Node.js and npm installed, of course.

You can find the whole solution in the our GitHub repo here.

Ok, let’s get started.

(1) Project set up

Here is the project structure looks like. For CSS, you can drop any css file to the css folder. We are using Bootstrap here.

Project
    - public
        - css
            - bootstrap.min.css
        - img
            - imagefile.png
        - index.html
    - source
        - client.js
    - package.json
    - webpack.config.js

(2) Package Installation

Let’s install the packages. @babel/preset-env converts ES6 to ES5 so that most browser can render your React code. Polyfill gives you greater support for browser that doesn’t support ES5.

For React, you need both react and react-dom to render React elements.

npm i --save-dev webpack@4.19.1 webpack-dev-server@3.1.8 webpack-cli@3.1.1
npm i --save-dev babel-loader@8.0.4 @babel/core@7.1.0 @babel/preset-env@7.1.0 @babel/preset-react@7.0.0
npm i --save @babel/polyfill@7.0.0
npm i --save react@16.5.2 react-dom@16.5.2

(3) Configure webpack-dev-server

First of all, you need to create webpack.config.js file. And add the code below. Mode is required. Add ‘development’. You need two entries, one for polyfill and the other for the main javascript file. Output requires absolute path for the project folder. We set the filename for the compiled Javascript as index.js. We also need to set the rules so as to include all javascript files and exclude node modules.

module.exports = {
    mode: 'development',
    entry:['@babel/polyfill','./source/client.js'],
    output: {
        path: '/ReactNode/webpack-dev-test',
        filename: 'index.js'
    },
    devServer:{
        inline:true,
        contentBase:'./public',
        port:3000
    },
    module: {
        rules: [
            {test:/\.js$/,
             exclude:/node_modules/,
             loader:'babel-loader'
            }
        ]
    }
}

(4) Configure package.json

We need to add two presets for babel. Then add script so that the dev server can start with npm start.

{
  "name": "webpack-dev-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "babel": {
    "presets": [
      "@babel/preset-react",
      "@babel/preset-env"
    ]
  },
  "scripts": {
    "start": "webpack-dev-server"
  },
  ...

(5) Create a simple HTML page

This is just a simple html example that uses Bootstrap 4, including a target div for React Element.

(6) Import React and create React element

In client.js, we can now write any Javascript code. In this example, I created a simple React button element. The key is to import react and react-dom modules. Nothing fancy, but this should render fine.

(7) Start the server and check it!

You can start the server with npm start. Go to the URL http://localhost:3000.

Now, we have a local React dev environment!