Deploy a React project using FTP

I recently started exploring React and wanted to deploy my app. I use Dreamhost for my hosting, but most instructions online assume you’re using something like Heroku to deploy React apps. How could I get my shiny new React app up on my shared hosting account?

This tutorial is for beginners and assumes you’re using webpack to handle React dependencies.

The first thing you’ll need to do is add a “build” script to your package.json file if you don’t already have one. It should look something like this:

"main": "bundle.js",
"scripts": {
"start": "webpack-dev-server",
"build": "webpack"
}

The bundle.js file will be created in the next step. It contains all your files, compiled into one. You can name it anything you’d like, but ‘bundle’ seems to be the convention. Make sure your index.html file includes your bundle.js in a script tag:

<body>
<div id="app"></div>
<script src="bundle.js"></script>
</body>

Once that’s done, type ‘npm run build’ from within your project folder in terminal to create bundle.js. You’ll need to run this command any time you make changes to the project files so that bundle.js recompiles.

When you’re ready to deploy you app, log in to your hosting provider using an FTP client, such as FileZilla, and copy over index.html, bundle.js, and any image or asset directories your project needs.