DEV Community

Emmanuel Galindo
Emmanuel Galindo

Posted on

Minimal setup for React app with Webpack as bundler

Hello There!

This is a post where I share the minimum set up for React application in development stage as it renders the application in the browser (client side), which in production I don't recommend doing this. It uses webpack for bundle the JS code and Babel for traspile it.

The files content is above, for make it simple I won't go in detail for every file.

Find the repo:
Github Repository

Summary

When we run the script npm run dev , which uses webpack-dev-server --mode development to start the process for server our application. Webpack will take the entry file to bundle it.

Webpack will use the index.js from entry property. If it is not declared, don't worry, it is the default value. Also, webpack uses a babel-loader for traspile the JS code. Babel requires a .babelrc file that stablish the presets, in this case "@babel/preset-env", "@babel/preset-react" , env is for general JS and preset-react for React code. Then, Webpack uses HtmlWebpackPlugin for attached the bundled JS content, so it could be render in the browser.

Create any React application code, that renders with React DOM.

Obviously I add .gitignore to remember everyone to not add node_modules directory to the repository.

// webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');

const htmlPlugin = new HtmlWebpackPlugin({
  template: './src/index.html',
  filename: './index.html',
});

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
  plugins: [htmlPlugin],
};
Enter fullscreen mode Exit fullscreen mode
// scripts and dependencies need it

"scripts": {
  "dev": "webpack-dev-server --mode development"
},
"dependencies": {
  "react": "^16.13.1",
  "react-dom": "^16.13.1"
},
"devDependencies": {
  "@babel/core": "^7.11.6",
  "@babel/preset-env": "^7.11.5",
  "@babel/preset-react": "^7.10.4",
  "babel-loader": "^8.1.0",
  "html-webpack-plugin": "^4.4.1",
  "webpack": "^4.44.1",
  "webpack-cli": "^3.3.12",
  "webpack-dev-server": "^3.11.0"
}
Enter fullscreen mode Exit fullscreen mode
// .babelrc
{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}
Enter fullscreen mode Exit fullscreen mode
index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>src</title>
  </head>
  <body>
    <section id="root"></section>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode
// index.js

import React from 'react';
import ReactDom from 'react-dom';

ReactDom.render(<h1>React app</h1>, document.getElementById('root'));
Enter fullscreen mode Exit fullscreen mode
.gitignore

/node_modules
/dist
Enter fullscreen mode Exit fullscreen mode

Discussion (2)

Collapse
shadowtime2000 profile image
shadowtime2000

You should probably put this into a Github template repository.

Collapse
georgexx009 profile image
Emmanuel Galindo Author

Yeah, actually it is. I will update the post also github.com/georgexx009/base_react_app