DEV Community

Kishore
Kishore

Posted on

Setup a basic react application with webpack and babel

Setup react with webpack and babel
Photo by Chris Henry / @chrishenryphoto / Unsplash

We generally use create-react-app (CRA) CLI to generate a basic react application with zero configuration. That's cool because you don't have to know about how bundler or compiler can be setup or even what's going on under the hood of CRA. But what if you also want to setup your own configuration in your own way? Here comes how to setup a basic react app without CRA and explore the hidden part of that tool.

So we will be using webpack as the bundler, babel for compilation and obviously react and react-dom for the react part broadly.

Prerequisites

Before jump to the further reading I want to let you know that I assume you have a basic understanding of React, Webpack and Babel. Because these are the core tools which we are going to explore. If you really don't have then I would suggest you to go through their official website first and then move forward with this content.

So without any further readings we will dive into the course of content

Course of content

  • Setup of basic webpack configuration for a basic react application
  • Setup of basic babel configuration for a basic react application
  • Creation of basic folder structure for a react project
  • Creation of basic react application

First we will create a folder called my-react-app and navigate inside that folder in our command line tool like cmd or Terminal.

Then from there we will run the below command to generate a basic package.json file

npm init -y
Enter fullscreen mode Exit fullscreen mode

or

npm int
Enter fullscreen mode Exit fullscreen mode

and follow the installation instruction.

Then you will see a package.json file has been created inside the my-react-app folder.

Now we will install required packages for webpack first by running the following command

npm install -D webpack webpack-cli webpack-dev-server html-webpack-plugin clean-webpack-plugin
Enter fullscreen mode Exit fullscreen mode

You can check out what individual plugin does exactly from the official webpack website .

Now you can see above packages has been added as devDependencies inside package.json file. Cool!

Now we will install required packages for babel by running the following command

npm install -D @babel/core @babel/preset-env @babel/preset-react babel-loader
Enter fullscreen mode Exit fullscreen mode

You can check out what individual plugin does exactly from the official babel website .

To run a basic react application we need 2 packages. One is react which has the core react library and another one is react-dom which is responsible for the rendering of our application to the DOM.

So now to install those 2 libraries we need to run the following command

npm install -D react react-dom
Enter fullscreen mode Exit fullscreen mode

We are done with installation part. Now is the time to setup our webpack. To do so we have to create a file called webpack.config.js in the root of the my-react-app directory and paste the following code inside that file

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
Enter fullscreen mode Exit fullscreen mode

Coming to the setup of entry and output point of our application. To do so paste the following code after the imports

...
module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'index.bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  devtool: 'inline-source-map'
}
Enter fullscreen mode Exit fullscreen mode
  • mode - defines stage of our application. For development purpose it should be development and for deployment purpose we can use production
  • entry - defines entry point of our application which is ./src/index.js in our case.
  • output - defines where our bundled file should be placed.
  • devtool - helps us to identify where exactly the error happened.

So now we need to let webpack know that we are going to use babel to compile our code so that it can support most of the browsers. To do so we have to add the below code in webpack.config.js

...
module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  }
}
Enter fullscreen mode Exit fullscreen mode

Now we need few plugin setup for webpack. Paste the following code below the babel configuration mentioned above

...
module.exports = {
  ...
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ]
}
Enter fullscreen mode Exit fullscreen mode
  • CleanWebpackPlugin - This plugin first cleans the /dist folder and then put the bundled files inside that.
  • HtmlWebpackPlugin - This plugin generates the html file which helps to serve the webpack bundles.

So the full webpack.config.js file should look like the following code now

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  devtool: 'inline-source-map',
  output: {
    filename: 'index.bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ]
};
Enter fullscreen mode Exit fullscreen mode

Now we are done with the webpack setup. We have to make a very small babel setup. Create a .babelrc file in the root of our folder and paste the below code inside that

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}
Enter fullscreen mode Exit fullscreen mode

Babel presets are array of babel plugins where we don't need to assemble our own set of plugins.

Before jump to the react setup we need to create 2 folders in the root. One is src and another one is public. And inside public folder create a file called index.html. Also you need to create 2 files inside src folder which are app.js and index.js. So now your folder structure should look like the following

my-react-app
└───node_modules
│   
└───public
|   │---index.html
|
└───src
|   │---app.js
|   |---index.js
|
│---.babelrc
│---package.json
|---webpack.config.js  
Enter fullscreen mode Exit fullscreen mode

Now open the index.html file in you editor which is present inside public directory and paste the following code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React App</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

div with id root in the above html code is where we will render our whole application. Next we will come to that part.

Now open the index.js file inside src folder and paste the following piece of code

import React from 'react';
import ReactDom from 'react-dom';
import App from './app';

ReactDom.render(<App />, document.getElementById("root"))
Enter fullscreen mode Exit fullscreen mode

To create the app component paste the following code inside your app.js in src folder

import React from 'react';

function App() {
  return (
    <div>
      <div>Hello world!!</div>
    </div>
  )
}

export default App;
Enter fullscreen mode Exit fullscreen mode

Now we are almost there to run our newly created react project in the browser. Before doing that we need to add following piece of code inside our package.json scripts field.

{
  ...
  "scripts": {
    "start": "webpack-dev-server --open",
    "build": "webpack --mode production"
  }
}
Enter fullscreen mode Exit fullscreen mode
  • start - command is to start our application in development mode.
  • build - command is for the production build which we can deploy in any live server.

Now the time is to run the application. To do so open your Terminal or cmd and run npm start and it should forcefully open http://localhost:8080/ in your browser and you should see the page look like the following.

Setup react with webpack and babel
Screenshot

You can also use npm run build - command to build your application. Built file should be generated inside the /dist directory.

Conclusion

This is a very basic react project we have setup using webpack and babel. There are other configurations which you might need while building an enterprise application. In that note I would suggest you to explore more options from webpack and babel official website.

I hope the above content helped you to get a basic understanding of how to setup react app with webpack and babel. Thanks for reading!!

Top comments (2)

Collapse
 
msabtainanwar profile image
Muhammad Sabtain Anwar

I appreciate for your struggle, but you missing many things like style loader , images loader . I follow your documentation but at the end I have errors when I import the style and Images.
I suggest best documentation for Core React setup with babel or webpack.
dev.to/deadwing7x/setup-a-react-ap...

Collapse
 
reivaxcorp profile image
Javier

Hi,
I only work with:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack --watch",
"start": "webpack serve --open",
"build": "webpack"
},