Deploying a React App requires several packages to bundle the files and convert the code to JavaScript.
In this React tutorial, we will first bundle our React Chatbot with webpack and Babel. Then in a later section, we will deploy it to an AWS S3 bucket.
What is needed to bundle a React App?
- a React app
- install and configure webpack and webpack-cli
- install and configure Babel
- install and configure HTML webpack plugin
- install and configure webpack development server
All of these packages are discussed in detail below.
Creating a React App
This tutorial assumes that you have already created and configured your React App using Facebook's create-react-app. However, any React app can be deployed using this method.
Webpack and webpack CLI

What is webpack?
Webpack is a JavaScript module bundler. Released in 2012, it is an open-source and designed for modern JavaScript applications.
Webpack bundles HTML, CSS, JS, and images, generating static assets representing these original modules.
Why use webpack with React?
Webpack will bundle all the React components into condensed assets that are easily read by web browsers.
Install webpack and webpack-cli
Install webpack and webpack-cli - Windows Command Prompt
C:\Users\Owner\desktop\react\react-chatbot> npm install webpack webpack-cli --save-dev
Install webpack and webpack-cli - macOS Terminal
User-Macbook:react-chatbot user$ npm i webpack webpack-cli --save-dev
Install webpack
and webpack-cli
in your app's directory. The install will take a few minutes.
Update the packages.json
react-chatbot > package.json
...
"scripts": {
"start": "react-scripts start",
"build": "webpack --mode production",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
...
Next, go to the file package.json and replace "build":"react-scripts build"
with "build":"webpack --mode production"
, as seen above.
Babel

Now it's time to install Babel.
What is Babel?
Babel is a JavaScript compiler that converts next-generation JavaScript code into browser-compatible Javascript.
Why use Babel with React?
Babel will convert the React class components, ES6 variables, and JSX code to regular JavaScript so older browsers can render the component correctly.
Install Babel
Install Babel and it's dependencies - Windows Command Prompt
C:\Users\Owner\desktop\react\react-chatbot> npm i @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev
Install Babel and it's dependencies - macOS Terminal
User-Macbook:react-chatbot user$ npm i @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev
We will install the babel-loader
, the webpack loader for Babel, the babel/preset-env
that complies JavaScript to ES5 and the babel/preset-react
for compiling JSX to JS.
Create a new file called .babelrc
react-chatbot > (New File) .babelrc
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
After the installation, create file called .babelrc inside your app's directory. This is the same directory with package.json.
Create a new file called webpack.config.js
react-chatbot > (New File) webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
};
Also, create another file called webpack.config.js. Again, create this file in the app's directory, the same folder as package.json.
The code above is a rile that states if a file ends in .js or .jsx, have the webpack send the code through the babel-loader
.
Create the bundle
Now we can create the bundle.
Run the build command
npm run build - Windows Command Prompt
C:\Users\Owner\desktop\react\react-chatbot> npm run build
npm run build - macOS Terminal
User-Macbook:react-chatbot user$ npm run build
Run the command npm run build, and the script "webpack --mode production"
in the package.json file will run.
The command prompt will then say that the asset main.js was created and webpack successfully compiled.
View dist > main.js
react-chatbot > dist > main.js
/*! For license information please see main.js.LICENSE.txt */
(()=>{var e={669:(e,t,n)=>{e.exports=n(609)},592:(e,t,n)=>{"use strict";var r=n(867),o=n(26),i=n(372),a=n(327),l=n(97),u=n(109),s=n(985),c=n(61);e.exports=function(e){return new Promise((function(t,n){var f=e.data,p=e.headers;r.isFormData(f)&&delete ...(e.Component);t.render(e.createElement(j,null),document.getElementById("root"))})()})();
If you look at the file structure of the app, you will notice a new directory called dist with a file called main.js. The file main.js is the bundled version of the entire React app.
Adding the bundle to an HTML page
With the bundle created, let's load it into the HTML file.
Install two more packages for webpack
Install html-webpack and html-loader - Windows Command Prompt
C:\Users\Owner\desktop\react\react-chatbot> npm install html-webpack-plugin html-loader --save-dev
Install html-webpack and html-loader - macOS Terminal
User-Macbook:react-chatbot user$ npm install html-webpack-plugin html-loader --save-dev
Run the command npm install html-webpack-plugin html-loader --save-dev
to install the html-webpack-plugin and the html-loader.
Update the webpack.config.js file
react-chatbot > webpack.config.js
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader"
}
]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./public/index.html",
filename: "./index.html"
})
]
};
Then update the webpack.config.js file with a new const
variable called HtmlWebPackPlugin
that is called under plugins
.
Also add another rule that states if a file ends in .html, have the webpack send the code through the html-loader
.
If you used create-react-app to make your React app, the index.html is in the public folder. Link to the file with the line template:"./public/index.html"
, as seen in the example above.
Else, if your index.html is in src directory, use template:"./src/index.html"
.
Run the build command again
npm run build - Windows Command Prompt
C:\Users\Owner\desktop\react\react-chatbot> npm run build
npm run build - macOS Terminal
User-Macbook:react-chatbot user$ npm run build
Run the command npm run build
again to bundle your index.html file and create the bundled asset in dist > index.html.
View the dist > index.html file
react-chatbot > dist > index.html
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="%PUBLIC_URL%/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png"/><link rel="manifest" href="%PUBLIC_URL%/manifest.json"/><title>React App</title></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script src="main.js"></script></body></html>
If you look at the new file called index.html in the dist folder, you will see it is a compiled version of the HTML code from public > index.html.
Configuring a development sever with webpack
Our project is now bundled, so to avoid having to run npm build
every time to push changes, install webpack-dev-server
.
Install webpack-dev-server
Install webpack-dev-server - Windows Command Prompt
C:\Users\Owner\desktop\react\react-chatbot> npm install webpack-dev-server --save-dev
Install webpack-dev-server - macOS Terminal
User-Macbook:react-chatbot user$ npm install webpack-dev-server --save-dev
Run npm install webpack-dev-server
.
Update the packages.json
react-chatbot > package.json
...
"scripts": {
"start": "webpack-dev-server --open --mode development",
"build": "webpack --mode production",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
...
Next, update the package.json file with a new script for npm start
.
Run the development server
Install webpack-dev-server - Windows Command Prompt
C:\Users\Owner\desktop\react\react-chatbot> npm start
Install webpack-dev-server - macOS Terminal
User-Macbook:react-chatbot user$ npm start
Now when you run start
the webpack development server will launch the bundled application version in the browser.
Deploying a React App to an AWS S3 bucket

Now that our app is bundled, we can deploy the condensed files to an AWS S3 bucket.
What is required to deploy a React App to an S3 bucket?
- create a free AWS account
- create an S3 bucket
- install and configure AWS CLI
Create an AWS account
Create a free AWS account at https://aws.amazon.com/free/.
Give your username AWS S3 permissions with IAM
Before creating an S3 bucket, you need to give your user permission to AWS S3.
To give a user S3 permissions:
- Login to AWS
- On the AWS Management Console page find the IAM service (a) under the Security, Identify, & Compliance section of All Services or (b) by typing in IAM in the search bar
- Click on the IAM link
- Click the Users tab under the Access management section in the left side menu
- Click on the username you want to give access to
- Click the "Add permissions" button
- Select "Attach existing policies directly" and type in AmazonS3FullAccess
- Click the "Next:Review" button
- Check that the permission was added to the correct user on the Permissions summary page
- Click "Add permission" to save the changes
Create an S3 bucket for your React app
Now with the proper permissions added, you can create your S3 bucket.
AWS Simple Storage Service (S3) stores files and objects using a scalable storage infrastructure. S3 buckets act as containers for these files and can even be used to host a static website.
To create an S3 bucket:
- On the AWS Management Console page find the S3 service (a) under the Storage section of All Services or (b) by typing in S3 in the search bar
- Click on the S3 link
- Click on the "Create bucket" button on the right side of the screen
On the Create bucket page:
- Under General configuration:
- name your bucket and section your region
- Under Bucket settings for Block Public Access:
- deselect the" Block all public access" checkbox
- select the warning box that states "Turing off block all public access might result in this bucket and the objects within becoming public"
- Keep the remaining default configurations the same
- Click the button "Create bucket" at the bottom of the page

Update S3 bucket permissions
Now that we have our bucket, let's add read-only permission for anonymous users.
To add permissions:
- Click on your S3 bucket
- Select the "Permissions" tab
- Click on the "Bucket Policy" button
- In the Bucket policy editor add the following code, replacing
"Resource"
with the name of your bucket
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "AllowPublicReadAccess",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::name-of-your-bucket/*"
}
]
}
- Click the "Save" button when you are done.
Add CORS configurations
We will also add CORS configurations to the S3 bucket to allows cross-origin requests.
To add CORS configurations:
- Click on your S3 bucket
- Select the "Permissions" tab
- Click on the "CORS configuration" button
- In the CORS configuration editor add the following code
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<ExposeHeader>x-amz-meta-custom-header</ExposeHeader>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
- Click the "Save" button when you are done.
Install AWS CLI
The bucket is created and configured so we can now upload our React app bundle to the S3 bucket.
We will be uploading via the AWS Command Line Interface.
Please follow the AWS CLI installation instructions for your specific OS before continuing.

Check AWS CLI is installed
Install webpack-dev-server - Windows Command Prompt
C:\Users\Owner\desktop\react\react-chatbot> aws --v
aws-cli/2.0.47 Python/3.7.4 Windows/10 botocore/2.0.0
Install webpack-dev-server - macOS Terminal
User-Macbook:react-chatbot user$ aws --v
aws-cli/2.0.47 Python/3.7.4 Darwin/18.7.0 botocore/2.0.0
Once the installation process is complete, go ahead and run the command aws --v
to check the installation worked.
Create a set of AWS access keys
When using the AWS CLI, you need to provide a set of AWS access keys so the CLI can properly connect to your AWS account.
To create a set of keys:
- Click on your username on the upper right-side
- Select My Security Credentials from the dropdown menu
- Click the "Create access key" button under the section Access keys for CLI, SDK, & API access
- Two access keys will appear in a popup menu
- Click the "Download .csv file" button and save the keys
You will need both of the keys saved in the file to configure the AWS CLI in the next step.

If you do happen to lose the access keys, just create another set.
Configure the AWS CLI
Configure AWS CLI - Windows Command Prompt
C:\Users\Owner\desktop\react\react-chatbot> aws configure
AWS Access Key ID:****************
AWS Secret Access Key:****************
Default region name [us-west-1]:
Default output format [None]:
Configure AWS CLI - macOS Terminal
User-Macbook:react-chatbot user$ aws configure
AWS Access Key ID:****************
AWS Secret Access Key:****************
Default region name [us-west-1]:
Default output format [None]:
In the command prompt of your project, run the command aws configure. Then enter your AWS access key and AWS secret key you created in the previous step.
You can then skip the remaining configuration section by clicking Enter for each one.
Update the package.json file
react-chatbot > package.json
...
"scripts": {
"start": "webpack-dev-server --open --mode development",
"build": "webpack --mode production",
"test": "react-scripts test",
"eject": "react-scripts eject",
"deploy": "aws s3 sync dist/ s3://name-of-your-bucket"
},
...
Go to package.json and add a new script for deployment: "deploy": "aws s3 sync webpack/dist/ s3://name-of-your-bucket"
.
Be sure to replace name-of-your-bucket
with the correct bucket name and to save the file.
Deploy to AWS S3 bucket
Deploy to the S3 bucket - Windows Command Prompt
C:\Users\Owner\desktop\react\react-chatbot> npm run build
C:\Users\Owner\desktop\react\react-chatbot> npm run deploy
Deploy to the S3 bucket - macOS Terminal
User-Macbook:react-chatbot user$ npm run build
User-Macbook:react-chatbot user$ npm run deploy
Return to your CLI and run npm run build to bundle any changes then npm run deploy
to upload the bundle to your S3 bucket.
All of the files in the dist directory will upload to the S3 bucket.
Make your S3 bucket a domain
To make your S3 a domain:
- Click on your bucket
- You should see the index.html, main.js, and main.js.LICENSE.txt files
- Select the "Properties" tabs
- Click the "Static website hosting" card
- Select the "use this bucket to host a website" button
- Type index.html as the "Index document" and "Error document"
- Click the "Save" button to finish

If you check on the card again, you should notice a URL Endpoint.
Click this URL and your app will appear in a new browser tab.
Solving common errors that could occur
ERROR: 'MODULE_NOT_FOUND" webpack-dev-server
code: 'MODULE_NOT_FOUND',
requireStack: [
'C:\\Users\\Owner\\Desktop\\react\\react-chatbot\\node_modules\\webpack-dev-server\\bin\\webpack-dev-server.js'
]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! react-tutorial@0.1.0 start: `webpack-dev-server --open --mode development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the react-tutorial@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
If you get an error when running npm start
after installing webpack-dev-server
, you need to downgrade your the webpack-cli version.
1. Update the package.json
react-chatbot > package.json
...
},
"devDependencies": {
...
"webpack-cli": "^3.3.12",
...
}
}
Change the "webpack-cli"
version to "^3.3.12"
, a version of webpack-cli without the bug, in package.json.
Be sure to save the file.
2. Reinstall webpack-cli
Install webpack-dev-server - Windows Command Prompt
C:\Users\Owner\desktop\react\react-chatbot> npm install
Install webpack-dev-server - macOS Terminal
User-Macbook:react-chatbot user$ npm install
Then run npm install
to install the version specified in package.json.
3. Run the development server again
Run the webpack development sever - Windows Command Prompt
C:\Users\Owner\desktop\react\react-chatbot> npm start
Install webpack development server - macOS Terminal
User-Macbook:react-chatbot user$ npm start
Now when you run npm start
, the developer server should open.
ERROR: Failed to parse json; Unexpected token } in JSON
npm ERR! code EJSONPARSE
npm ERR! file C:\Users\Owner\Desktop\code\react\react-chatbot\package.json
npm ERR! JSON.parse Failed to parse json
npm ERR! JSON.parse Unexpected token } in JSON at position 662 while parsing near '...y-react-example",
npm ERR! JSON.parse },
If you get this error while trying to run npm run build
, make sure there is no comma at the end of the last script added.
ERROR: fatal error: An error occurred (NoSuchBucket) when calling the ListObjectsV2 operation: The specified bucket does not exist
fatal error: An error occurred (NoSuchBucket) when calling the ListObjectsV2 operation: The specified bucket does not exist
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! react-chatbot@0.1.0 deploy: `aws s3 sync dist/ s3://deploy-react-example`
npm ERR! Exit status 1
If this error occurs while trying to deploy to your S3 bucket, you probably spelled the bucket name wrong in package.json.