Sign in
Log inSign up
Setting Up a React App without CRA

Setting Up a React App without CRA

Bami Ogunfemi's photo
Bami Ogunfemi
·Mar 27, 2020·

5 min read

According to the react docs**

Create-react App is a comfortable environment for learning React and is the best way to start building a new single-page application in React.

However, CRA might not always ideal for a project, and I find the ejection process to be extra painful, with the resulting configuration being far to complex to easily work with.

Prequisite

  • Have Node installed
  • Have knowledge of Javascript
  • Have basic knowledge of React

Let's get started by creating a directory 

mkdir my-app

Next, we navigate into the directory

cd my-app

We then create a package.json file by running

npm init -y

Create a .gitignore file 

touch .gitignore

Add node modules to the .gitignore file

*The -y flag tells npm to use all default config option while creating the package.json file

Next, We need to install some dependencies:

install react and React dom

npm install react react-dom

Install webpack, webpack-dev-server, and webpack-cli

npm i --save-dev webpack webpack-dev-server webpack-cli

Install @babel/core, babel-loader, @babel/preset-env, @babel/preset-react, html-webpack-plugin, css-loader, style-loader. html-webpack-plugin is a webpack plugin that makes it easy to create HTML files that serve webpack bundles.


npm install --save-dev @babel/core @babel/preset-env @babel/preset-react webpack webpack-cli webpack-dev-server babel-loader css-loader style-loader html-webpack-plugin

Create a webpack.config.js file in the root directory to configure webpack.

touch webpaack.config.js

Webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser

In webpack.config.js require the path module and the html-webpack-plugin installed.

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

In the webpack.config.js file specify an entry for the project 

module.exports = {
  entry: './src/index.js'
}

Specify the output path

output: {
  path: path.join(__dirname, '/dist'),
  filename: 'bundlefile.js'
}

At this point, our webpack.config.js file should look like this 

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, '/dist'),
    filename: 'bundlefile.js'
  },
}

Specify the test files

module: {
rules : [
         {
          test: /\.js$/,
         }
        ]
},

Specify the Loader and exclude the node_modules

module: {
rules : [
         {
          test: /\.js$/,
          use: [ 'babel-loader'],
          exclude: /node_modules/,
         }
        ]
},

Create the src directory 

mkdir src

Navigate into the directory

cd src

Create the index.js and index.html files inside the src directory.

touch index.html index.js

In the index.html file, create a template html file and in its body, create a div with an id of ‘app’

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>My React App</title>
  <meta name="viewport" content="width=device-width, initial-   scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
  <script src="main.js"></script>
</head>
<body>
  <div id="app"></div>
</body>
</html>

In the index.js file, import React and React Dom. Create a class App that returns a div of 'hello world'.

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('app'))

Add html-webpack-plugin to bundle the index.html file we created.

plugins: [
  new HtmlWebpackPlugin({
  template: './src/index.html'
  })
]

Your webpack.config.js file should look like this:

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, '/dist'),
    filename: 'bundlefile.js'
  },
module: {
rules : [
         {
          test: /\.js$/,
          use: [ 'babel-loader'],
          exclude: /node_modules/,
         }
        ]
},
  plugins: [
    new HtmlWebpackPlugin({
       template: './src/index.html'
    })
  ]
}

Babel is a JavaScript compiler and to Configure the application to use babel by creating a .babelrc file in the root directory of the project.

touch .babelrc

The .babelrc file is an object. In it, set the presets to work based on the environment of the application( test, development, production).

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

In package.json, write the start script:

"start": "webpack-dev-server --mode development --open",

Now when you run npm run start it will start the dev server and open your app in the browser.

To run the project:

npm run start

You can also clone/check out the code Here

5