How to: Deploy Create-React-App on Surge

shaundai

Shaundai Person

Posted on December 5, 2020

How to: Deploy Create-React-App on Surge

Have a React app you're ready for the world to see? Check out these 5 easy steps to deploy that bad boy!

1. Install Surge

First things first - let's make sure you have surge installed.

Install Surge globally ("globally" means that all of your projects will have access to Surge, not just this one) by typing this into your terminal:

npm install --global surge
Enter fullscreen mode Exit fullscreen mode

2. Create a build folder for your repo

In the terminal, get to the root directory of your completed React app ("root directory" is the highest-level folder for your app). If you used create-react-app to get your app running in the first place, type npm run build in the command line and press enter.

npm run build
Enter fullscreen mode Exit fullscreen mode

Npm will create a build folder, which is basically a deployable version of all of the React files you've worked so hard on, minus the junk and the secret information you wanted to keep hidden.

Now navigate to your build folder by typing the following into the command line.

cd build
Enter fullscreen mode Exit fullscreen mode

3. Deploy to Surge

We're going to deploy to surge at this point, which is as easy as typing one word in the command window to activate the program: surge. Type surge into the command line and press enter.

surge
Enter fullscreen mode Exit fullscreen mode

4. Create a Surge Account (or log into your existing account)

Surge will prompt you to either create an account or log in. If this is your first time using Surge, use your email address and create a password to create a Surge account through the command line. If you've used surge before, your most recently used credentials will appear and you can press enter to keep it moving or create a new account/enter a different login from there.

5. Get your Domain

Surge will make up a domain name for you. You can keep the domain they give you, change the surge sub-domain to your own available name (for example: 'my-customname.surge.sh'), or use a custom domain by following the instructions here

Press enter.

You're done! Enter the link in your browser to see your app live in action.

Connect with me on Twitter and on LinkedIn.

💖 💪 🙅 🚩
shaundai
Shaundai Person

Posted on December 5, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related