loading...

Minimal setup for React app with Webpack as bundler

georgexx009 profile image Emmanuel Galindo ใƒป2 min read

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],
};
// 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"
}
// .babelrc
{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}
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>
// index.js

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

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

/node_modules
/dist

Posted on by:

georgexx009 profile

Emmanuel Galindo

@georgexx009

Iโ€™m a 24 year old mechatronic engineer by title and Full Stack Developer by working career. Despite my title, most of my

Discussion

markdown guide
 

You should probably put this into a Github template repository.

 

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