You can now deploy your React Application with just a single command on Surge. With the Surge command-line tool, deploying your application has never been easier.
Wait, what's surge? Good, you asked!
Surge is a static web publishing server. It deploys your static application sites with just a single command right from the terminal. You don't ever need to set up or configure your CPanel or Server. You can also add your custom domain with just a single command also.
Enough talk, let's see how to deploy your react application easily with just a single command.
Installation
Of course, the first you need is to get it installed on your computer. You will need to have node and npm installed before you can install it.
To install it, open your terminal and type the command below:
$ npm install -g surge
with sudo access:
$ sudo npm install -g surge
Setup
Once you have it installed, the next thing is to set it up.
In your terminal enter the command below:
$ surge login
This will prompt for your email and password. If you don't have an account on Surge, this will automatically create one and log you in.
Usage
The next thing now is to see how we can deploy our react app on surge using the command-line tool.
Open your terminal and navigate to the react application you would like to deploy.
In this tutorial, I will be using this react project. It's a project I used in one of my tutorials on react hooks. You can git clone it if you don't have one to deploy with.
Now navigate to the directory in your terminal:
$ cd react-useinfinitescroll
Once you are in the directory, you would need to confirm if you have built your react app to production.
Run the command below to build your react app:
$ npm run build
Once that's done, we can now deploy our app using the command below:
$ surge
The command above will prompt for the build folder directory (where the static files are) and the subdomain you would like to use (although it suggests random domain and you don't need to provide one).
You should get something like below:
$ surge
Running as oyetoketoby80@gmail.com (Student)
project: /home/oyetoke/react-useinfinitescroll/build
domain: reactuseinfinitescrollhook.surge.sh
upload: [=] 100% eta: 0.0s (17 files, 648618 bytes)
CDN: [====================] 100%
IP: 45.55.110.124
Success! - Published to reactuseinfinitescrollhook.surge.sh
Tada! Your react application is now live. Now head over to reactuseinfinitescrollhook.surge.sh to confirm if your app is deployed.
To make your workflow better, you can turn this into an npm script. Open your package.json and head over to the scripts section and add the line below:
"deploy": "surge"
With this you can now run npm run deploy to deploy your application to surge easily.
Another thing you could do to reduce the step taken to build and deploy your application is to run your build command and deploy sequentially. Let's take a look at the line below:
"deploy": "npm run build && surge"
Cool right, I know!
Let's say you are working on a Single Page or Client Side Routing react app, you would need to add a callback file(200.html) that surge will fallback to. It helps you re-route all requests to your client-side application.
To do this, just copy the content of your index.html to 200.html. You can simply do this using the command below:
$ cp build/index.html build/200.html
To reduce the steps and increase our workflow, we can now update our deploy script command like below:
"deploy": "npm run build && cp build/index.html build/200.html && surge"
With this, you can now easily deploy your react application with just a single command.
Conclusion
Long gone are the days you have to go through a thorough and exhausting server setup to get your application deployed. All you need is just a single command to deploy your React Application. These steps also applies to deploying any frontend application (vue, svelte).