Click here to Skip to main content
15,887,477 members
Articles / All Topics

Deploy Create React App with Surge

Rate me:
Please Sign up or sign in to vote.
0.00/5 (No votes)
30 Jan 2017CPOL1 min read 6.5K   1   1
Deploy Create React App with Surge

Have you heard of Create React App? It’s a tool for bootstrapping React apps. Better than a boilerplate where you have to manage the dependencies yourself, Create React App (a.k.a. CRA) contains all the Webpack magic and build scripts. It’s one command to generate a project, and then all you need to do to create a production-ready JS bundle is run npm run build.

Now, how can you get that app live on the internet?

  • Set up a VPS, configure nginx, and scp up the files. (“30 minutes”, but probably like 4 hours)
  • Configure an Amazon S3 bucket and then set it up correctly to serve a single-page app? (10-30 minutes)
  • Just use Surge (27 seconds)

Deploying an app to Surge is insanely easy, and it’s even free (including a custom domain and SSL).

Here’s a 27-second video.

Here are the steps:

(This assumes you already have an app created with Create React App.)

  1. Install Surge:
    npm install -g surge
  2. Run the Create React App build:
    cd your-react-project 
    npm run build
  3. Switch into the build directory:
    cd build
  4. Run Surge, and follow the prompts. All it needs is an email and a password, and you can optionally specify a different domain name.
    surge
  5. Go to the URL it prints out. For instance, http://lively-payment.surge.sh/.

Happy deploying!

Deploy Create React App with Surge was originally published by Dave Ceddia at Dave Ceddia on January 30, 2017.

This article was originally posted at https://daveceddia.com/feed.xml

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
United States United States
Dave is a Software Engineer in the Boston area and writes about AngularJS and other JavaScript things over at daveceddia.com

Comments and Discussions

 
QuestionProblems with the snippets? Pin
Nelek31-Jan-17 8:02
protectorNelek31-Jan-17 8:02 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.