Surge VS GitHub Pages: How to deploy a create-react-app project

Surge VS GitHub Pages: How to deploy a create-react-app project  #ReactJS

  • Minimal configuration to deploy a project
  • npm run deploy will first build your project via npm run build .
  • After entering the project path, Surge will suggest a random domain to use.
  • Then use npm run build to prepare your project for deployment.
  • Surge VS GitHub Pages: How to deploy a create-react-app project

As a developer, there are several ways you can show off your skills to peers and prospective employers. Open source contributions are great. Blogging is great. But at some point you’ll want to get…

@ReactiveConf: Surge VS GitHub Pages: How to deploy a create-react-app project #ReactJS

Surge VS GitHub Pages: How to deploy a create-react-app project

As a developer, there are several ways you can show off your skills to peers and prospective employers. Open source contributions are great. Blogging is great. But at some point you’ll want to get projects up on the web, where people can actually use them.

Too many times have I started something locally and never seen it through. You may have done the same. One reason this is so common is because of all the extra work that goes into deployment.

Wouldn’t it be nice to have a central hub where all of your projects live without worrying about hosting and server configuration? This post will walk you through two popular deployment tools that require a minimum amount of effort.

create-react-app

. If you’ve been thinking of learning React — but are taken back by the amount of time it requires to get a project up and running — this command line interface (CLI) tool is your saving grace. It will take care of most of the boilerplate you need to start a project.

To install it and create your first project, go into your terminal and run these commands:

file at the root of your project directory.

to prepare your project for deployment.

Surge.sh and GitHub Pages

Let’s fast forward a bit. You’ve built a basic app and are ready to deploy it to the web.

There are many options in the realm of static site hosting platforms, but the two we’ll be working with are Surge.sh and GitHub Pages.

Both of these platforms are powerful in their own right. Which one you use comes down to your situation. My goal is to give you a better understanding as to why these tools exist, and what you can do with them.

CLI, Surge and GitHub Pages will work with even the most basic of projects. You may be able to skip some of these steps if you aren’t using React itself.

Surge is a really awesome piece of software that I recently discovered from a thread on Reddit. At its core, Surge is a CLI that allows you to deploy your projects for free. And quickly, too. What makes Surge really stand out is its simplicity.

package globally:

 . This script essentially prepares the application for production by bundling and optimizing all of the code.

in your project’s root:

npm run build

 . This folder contains the production-ready application.

command in your project’s root:

surge

you’ll be prompted to create an account. Add an email and password, then hit enter. You’ll then see output similar this:

To deploy your project, Surge only needs two things from you:

. Once you’ve made this change, press enter to confirm.

extension at the end. The tool also allows for custom domains, which is really awesome.

Accept the suggested domain, or add your own (custom or random with correct surge extension), then hit enter.

That’s all she wrote! Navigate to the domain in your browser and you should see your project up and running.

command. You can find out more information in the Surge documentation.

GitHub Pages makes it easy to turn GitHub repositories into full fledged static websites. Many organizations use this service to host their documentation and project demos, but you can use it for whatever you’d like.

Note that in order for this to work, your must first push the code to a repository on GitHub. If this sounds foreign to you, check out further documentation here.

before, then you may have noticed output that looks like this:

comes with detailed documentation to help users publish their work using all sorts of tools. Here you can see real time terminal output instructing us on how to do so via GitHub Pages. Let’s try it out.

again after the change:

CLI is walking us through the entire process. Pretty snazzy.

branch on GitHub straight from within the terminal:

is a special branch that GitHub Pages uses to publish projects. The beautiful thing about it is that the branch lives in the same repository as your project’s code, but doesn’t affect the project itself.

branch in your project’s repository, it will update the branch accordingly. If the branch doesn’t exist, it will create it on the fly.

And finally let’s run it:

branch.

file, where you’ll see your project has been deployed!

lists a few solutions in the documentation for GitHub Pages integration.

In all honesty, you can’t go wrong with either of these options. They’re both great. Let’s recap some key features of each:

If you’re simply creating a test project, or you want to show a demo to a client, using Surge’s super-fast CLI to generate a webpage is hard to pass up. You can generate the domain quickly and tear it down afterwards.

At the end of the day, the best tool for the job is the one that makes you productive. The information I’ve provided should give you a good understanding of where each shines. Audit your project needs and choose which is right for you.

Thanks for reading! I’m a self-taught developer & spend most of my free time diving into front-end tools and writing my way out.

Surge VS GitHub Pages: How to deploy a create-react-app project