Setting up React@17 with Webpack and Babel (Part 2)

See the part 1 here.

Now we will setup a simple routing enabled react app.(No fanciness!). But before that let make use of SCSS instead of css for styling.

npm install style-loader css-loader sass-loader node-sass --save-dev

We have to add the following code to both webpack.config.js and webpack.config.prod.js inside the rules array:

{  test: /\.scss$/,
   use: ['style-loader', {
         loader: 'css-loader', options: {
                modules: {
           localIdentName: '[path][name]__[local]--[hash:base64:5]',
           },
    }
  },'sass-loader'
]}

Let start react-routing

npm install react-router-dom

Create four simple components inside a components folder:

• Home
• Users List
• NotFoundPage (for 404 error)
• Navbar (with some styles)

and modify the App.jsx file as :

The source code for the other components can be found in this github repository.

The page refresh error!

On running the application in development mode there will be error on client side routing on refresh as there is only 1 single index.html file.

To mitigate this,we have to modify the below code in webpack.config.js

Netlify deployment

Go to Netlify , login and click on the “New site from git”

Select your online repo and select the branch you have pushed your commits.

The build command will be :

npm run build

and published directory will be:

dist

Finally click on the deploy button.

Yay, 🎉 your site is live.You can also push new changes to your online git repo and netlify will automatically build and update the site.

Github repo link : https://github.com/abhidatta0/react17-webpack-setup