Shivam Vishwakarma
Setting up development environment in React JS 🛠

Setting up development environment in React JS 🛠

Setting up development environment in React JS without CRA create-react-app

Shivam Vishwakarma's photo
Shivam Vishwakarma
·

5 min read

While CRA (Create React App) ⚙️ is the most popular choice for setting up development prerequisites and creating boilerplate code for React JS applications but there are few challenges using CRA when it comes to scalable application. The most common challenge is to add custom build configs.

💡 That's why it is always a good idea to set up your own development environment for react app, In this blog we will see the step by step process to set up the development environment in a React JS application and run a "hello world" react JS application.

1. Install Node : If you haven't installed Node, then you can install the latest version of Node from Node Website

Once you are done with the installation, you can check whether it is installed or not using following command

node -v // v14.15.5 ;  You may get different version , depending upon the one you've installed

2. Initialize Node app : In order to initialize your application and create package.json file, run following command.

mkdir <Name of Your Project>
cd <Name of Your Project>
npm init -y

📃 Note: Here npm init -y is the command, which will create package.json file. Here "-y" flag is used so that npm will use all default config option while creating the package.json file.

3. Install React / ReactDOM :

a) The 'react' Package will be used for supporting React.createElement() and create the render tree b) The 'react-dom' npm package is responsible for patching the render tree to real DOM. 

npm install react react-dom

4. Install Webpack :

a) Webpack : The webpack is module bundler, it takes all the js file generated and bundles them together in to a single js file to run at browser.

b) Webpack-dev-server : Webpack dev server lets us run the application (Hot reloading) in development environment without building the application for every change.

c) Webpack-cli : Is the command line interface for webpack

d) html-webpack-plugin : Helps in linking the single file js code to the single html file (index.html) 

npm install --save-dev webpack webpack-dev-server webpack-cli html-webpack-plugin

📃 Note : Here the flag --save-dev is used to differentiate the build dependencies & our app dependencies

5. Install Babel :

👨🏻‍🏫 What is babel ? Babel is basically a transpiler, it helps in converting the advance JavaScript code to the earlier basic JS code which can be understood by all the browsers.

e.g. Converting ES6 code to ES5 code

npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader css-loader style-loader

⚙️ 6. Configure Webpack :

Create a webpack.config.js in the root directory of your project.

Add following snippet to webpack.config.js file

var path = require('path');
var HtmlWebpackPlugin =  require('html-webpack-plugin');

module.exports = {
    entry : './src/index.js',
    output : {
        path : path.resolve(__dirname , 'dist'),
        filename: 'index_bundle.js'
    },
    module : {
        rules : [
            {test : /\.(js)$/, use:'babel-loader'},
            {test : /\.css$/, use:['style-loader', 'css-loader']}
        ]
    },
    mode:'development',
    plugins : [
        new HtmlWebpackPlugin ({
            template : 'public/index.html'
        })
    ]

}

👨🏻‍🏫 Now lets understand what is written in the webpack.config.js file :

a) entry : Is the entry point of application, from where the application starts b) output : The webpack will bundle all js/ts code in to a single file, having filename as bundlefile.js c) module has rules : to know which file to check and bundle. It excludes the files within node_modules folder

7. Create index.html & index.js :

📁 a)Create a folder named 'public' and inside this folder, create a file named index.html

📑 The index.html file should look like below

//public/index.html

<html>
    <head>
     <title>
        React JS App Without CRA
    </title>
 </head>
    <body>
        <div id="root"></div>
    </body>
</html>

📃 Note : The div inside body tag having id as "root" is where the whole application is going to render.

📁 b) Create a folder named 'src' and inside this folder, create a file named index.js (i.e. entry point of our application)

📑 The index.js file should look like below

//src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component{
    render(){
        return(
            <div>Hello World</div>
        )
    }
}

ReactDOM.render(<App />, document.getElementById('root'))

⚙️ 8. Set up the script in package.json file :

Up to this point of time your package.json file may look similar to this

{
  "name": "react-without-cra",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@babel/core": "^7.14.3",
    "@babel/preset-env": "^7.14.4",
    "@babel/preset-react": "^7.13.13",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.2.6",
    "html-webpack-plugin": "^5.3.1",
    "style-loader": "^2.0.0",
    "webpack": "^5.38.1",
    "webpack-cli": "^4.7.0",
    "webpack-dev-server": "^3.11.2"
  }
}

If you notice 👀 inside the "scripts" it has only one value "test". Now let us add a script as 

"start": "webpack serve --config webpack.config.js --open"

This will save development effort and time. Instead of writing the script "webpack serve --config webpack.config.js --progress" every time one can simply run the "npm run start" command.

Also add the following babel properties in package.json file above the script tag

"babel":{
    "presets" : [
      "@babel/preset-env",
      "@babel/preset-react"
    ]
  },

The final package.json file will look something like this

{
  "name": "without-cra",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "babel":{
    "presets" : [
      "@babel/preset-env",
      "@babel/preset-react"
    ]
  },
  "scripts": {
    "start": "webpack serve --config webpack.config.js --open"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@babel/core": "^7.14.3",
    "@babel/preset-env": "^7.14.4",
    "@babel/preset-react": "^7.13.13",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.2.6",
    "html-webpack-plugin": "^5.3.1",
    "style-loader": "^2.0.0",
    "webpack": "^5.38.1",
    "webpack-cli": "^4.7.0",
    "webpack-dev-server": "^3.11.2"
  }
}

9. Set up the .gitignore file

In your root directory, create a file named ".gitignore", This gitignore file will prevent push of unnecessary files/folders to remote repository.

The .gitignore file, may look something like this

node_modules
dist

10. 🚀 Run the application

npm run start

Here we go,

✌️ Congratulations !! You've successfully completed the set up for react js development environment.

✍️ This blog is part of my series on my learning experience with react js React JS Made easy , you can subscribe to get the latest update on my writings on JavaScript/React JS.

React#codenewbiescreate-react-appWeb Developmentlearning