Tutorial: Setup React App from scratch with Webpack’s CSS, SASS and file loaders 2022

The first time I installed React was back in 2020 when I developed an interface for blind users. I remember thinking, “What exactly are these installed files? How do they function together? Which files am I supposed to work on and which are the ones I should not touch?” To satisfy my curiosity, I installed React App from scratch to teach myself and wrote it in a digestible manner for beginners looking to understand. Let’s start!

TLDR: You can make a copy from my Github repo to help you follow along or simply use it!

I assume you have downloaded a code editor of your choice and Nodejs. If not, download them first before proceeding. To check if you have Nodejs, open your command prompt and type ‘node -v’.

1. Create a folder for your React App

Create a folder for your React App, open it in the code editor and open your terminal.

C:\Users\username\>mkdir simple-react-boilerplate

2. Create package.json file

What: This is the identity document of a Nodejs project. It tells us the project version, author, main endpoint, and packages and libraries installed into the project known as dependencies. This needs to be created for every new project.

Use(s): This is the document you share with someone to install your project’s dependencies. One does not share node-modules folder as it is a large folder.

3. Install react and react-dom file

npm install react react-dom

What: This creates a package-lock.json file and node-modules folder. The package-lock.json file locks the version of packages and libraries installed for the project which are stored in node-modules.

4. Install Babel and setup .babel.rc

npm install @babel/core @babel/preset-env @babel/preset-react babel-loader

@babel/core and @babel/preset-env: Transforms modern Javascript code i.e. es2015 into vanilla Javascript that works in all browsers

@babel/preset-react: Transforms React’s JSX code into vanilla Javascript

babel/loader: A package that connects Babel to Webpack to transpile Javascript code

// Add '.babelrc' file to your folder 
// Then copy & paste this 
{ "presets": ["@babel/preset-react", "@babel/preset-env"] }

5. Install Webpack

npm install webpack webpack-cli webpack-dev-server

What: Webpack bundles modules used in your project into static output files for production.

Next, we need to create a custom ‘webpack.config.js’ file. This configuration bundles sass and css code into a css folder in the dist folder

const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require("path");
module.exports = {
  mode: "production",
  entry: path.resolve(__dirname,"./src/index.js"),
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "js/[name].[fullhash].js",
    clean: true,
  },
  devServer: {
    historyApiFallback: true,
    static: "./",
    hot:true,
    open: true,
  },
  stats: {
    errorDetails: true,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
    }),
    new MiniCssExtractPlugin({
      filename: "css/[name].css", //creates css folder and puts .css files
    }),
  ],
  resolve: {
    modules: [__dirname, "src", "node_modules"],
    extensions: ["*", ".js", ".jsx", ".tsx", ".ts"],
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: require.resolve("babel-loader"),
      },
      {
        test:  /\.(s(a|c)ss)$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: "/css/",
            },
          },
          "css-loader", 
          "sass-loader"],
      },
      {
        test: /\.png|svg|pdf|jpg|gif$/,
        use: [
          {
            loader:"file-loader",
            options: 
            {
              outputPath: 'images/',
              name: 'images/[name].[ext]',
              publicPath: '/images/'
            }
          }
        ],  
      },
    ],
  },
};

We need to install ‘css-loader’, ‘sass-loader’, ‘sass’ and ‘file-loader’ for our bundling configurations.

npm install css-loader sass-loader sass file-loader

6. Create App.js file

Create a folder called ‘src’ and create ‘App.js’ in the folder.

//App.js file
import React from "react"; 
const App = () => ( <div></div> ); 
export default App;

7. Create index.js file

If we look at the webpack.config.js file, we see the entry point is set as ‘./src/index.js’. This index.js file we create is where our react app gets rendered.

import React from "react";
import ReactDOM from "react-dom";
// Import App
import App from './App'
ReactDOM.render(<App/>, document.getElementById("root"));

8. Create index.html file

The <div> with the ID root is where the App.js code gets injected. You can rename the id but it MUST match the ReactDOM.render(<App/>,document.getElementById("root")) in index.js file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

9. Configure scripts in package.json

Under scripts, remove “test” and add “start” and “build”.

"scripts": {
    "start": "webpack serve --hot --open",
    "build": "webpack --config webpack.config.js --mode production"
  },

10. Start the React App

Now, we are ready to run the react app. Simply type the command into the terminal!

I hope that this post has been useful for you!

Originally published at https://heysuen.com on May 28, 2022.