Deploying to Heroku with Webpack
Introduction
Webpack is a tool used in JavaScript applications for dependency management. By traversing all the imports in your app, webpack creates a dependency graph consisting of all the assets needed by your app. This dependency graph is then used to generate one or more files called bundles.
WebPack Core Concepts
Entry
The entry point pinpoints the module that webpack should start with when creating its internal dependency graph. By default, webpack uses ./src/index.js.
Output
The output specifies the location that webpack should use to emit bundles and how to name them. By default, webpack uses ./dist/main.js for the main output file and ./dist folder for other generated files.
Loaders
Loaders are webpack's way of allowing developers to bundle files other than JavaScript and JSON that Webpack does not understand out of the box.
Setting Up the App
Create a new folder named deploy-react-webpack and navigate to the folder.
1mkdir deploy-react-webpack
2cd deploy-react-webpack
Initialize the project with default options.
1npm init -yThis creates a package.json file.
Install the required ReactJs packages.
1npm i react react-domBabel
Babel converts ES5 and ES6 syntax used in ReactJs to a backwards-compatible version of JavaScript that is supported by both older and newer browsers.
Install Babel:
1npm i -D @babel/core babel-loader @babel/preset-env @babel/preset-reactInstall webpack and webpack-cli:
1npm i -D webpack webpack-cli webpack-dev-serverConfiguring Babel
Create a new file at the project root named .babelrc.
1touch .babelrcAdd the following code to the file and save.
1{
2 "presets": [
3 "@babel/preset-env","@babel/preset-react"
4 ]
5}Configure Webpack
Create a new file at the project root named webpack.config.js.
Add Components for Processing HTML
1npm i html-webpack-plugin html-loader --save-dev1touch webpack.config.jsAdd the following code.
1const HtmlWebPackPlugin = require("html-webpack-plugin");
2
3module.exports = {
4 module: {
5 rules: [
6 {
7 test: /\.(js|jsx)$/,
8 exclude: /node_modules/,
9 use: {
10 loader: "babel-loader"
11 }
12 },
13 {
14 test: /\.html$/,
15 use: [
16 {
17 loader: "html-loader"
18 }
19 ]
20 }
21 ]
22 },
23 plugins: [
24 new HtmlWebPackPlugin({
25 template: "./src/index.html",
26 filename: "./index.html"
27 })
28 ]
29};entry tells webpack where to start when bundling your application.
The test rule specifies the file extensions where the babel-loader can be used while excluding files in the node_modules.
Creating the React App
In this stage you will create the actual React app that users can interact with.
Create index.html inside src.
1mkdir src
2cd src
3touch index.html
Add the following code to index.html.
1<html lang="en">
2<head>
3 <meta charset="utf-8">
4 <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
5 <title>How To Deploy React Js With Babel On Heroku</title>
6</head>
7<body>
8<div id="root"></div>
9</body>
10</html>Inside src, create a file named index.js.
1touch index.jsAdd the following code.
1import React from 'react'
2import ReactDOM from 'react-dom'
3class App extends React.Component{
4 render(){
5 return(
6 <div>
7 Hello World !
8 </div>
9 )
10 }
11}
12ReactDOM.render(<App/>, document.getElementById("root"));This creates a simple React hello world component.
Replace the following code in your package.json.
1"scripts": {
2 "test": "echo \"Error: no test specified\" && exit 1"
3},with
1"scripts": {
2 "dev": "webpack serve",
3 "start": "node server.js",
4 "build": "webpack --mode production"
5 },The dev command is used to run the app in development mode.
The start command is used by Heroku to serve files in production.
Your package.json should look like this.
1{
2 "name": "deploy-react-webpack",
3 "version": "1.0.0",
4 "description": "",
5 "main": "index.js",
6 "scripts": {
7 "dev": "webpack serve",
8 "start": "node server.js",
9 "build": "webpack --mode production"
10 },
11 "keywords": [],
12 "author": "",
13 "license": "ISC",
14 "dependencies": {
15 "react": "^17.0.1",
16 "react-dom": "^17.0.1"
17 },
18 "devDependencies": {
19 "@babel/core": "^7.12.3",
20 "@babel/preset-env": "^7.12.1",
21 "@babel/preset-react": "^7.12.5",
22 "@webpack-cli/serve": "^1.0.1",
23 "babel-loader": "^8.1.0",
24 "html-loader": "^1.3.2",
25 "html-webpack-plugin": "^4.5.0",
26 "webpack": "^5.4.0",
27 "webpack-cli": "^4.1.0",
28 "webpack-dev-server": "^3.11.0"
29 }
30}Adding Express To Serve Files in Heroku
Install Express using the following command:
1npm install expressCreate a file in the project root named server.js and add the following code:
1var path = require('path');
2var express = require('express');
3
4var app = express();
5
6app.use(express.static(path.join(__dirname, 'dist')));
7app.set('port', process.env.PORT || 8080);
8
9var server = app.listen(app.get('port'), function() {
10 console.log('listening on port ', server.address().port);
11});Preview Project Locally
Run the following command to launch the project locally.
1npm run devOpen the following link in your browser window:
1http://127.0.0.1:8080/You should see a page like this:
Build Project for Production
1npm run buildDeploy to Heroku
Create an account on Heroku and confirm your email address.
Install Heroku CLI:
1npm install -g herokuConfirm that the Heroku CLI is installed by running:
1heroku --versionYou should see your Heroku CLI version.
Log in to Heroku by executing the command below.
1heroku loginRunning this command will open the Heroku site on your browser, where you can log in.
Set up a Git repository in the project root.
1git initIgnore Node modules in Git.
1touch .gitignoreAdd the following line to the file:
1node_modules1git add .1git commit -m "initial commit"Create a Heroku app.
1heroku createPublish to Heroku.
1git push heroku masterOnce the build succeeds, you can go to your Heroku apps dashboard and open your app or open the link in your console.
Once you open the link, your app should look like this:
All done!
Conclusion
Mastery of this skill is vital in roles such as frontend development and devOps leaning towards frontend projects.