Zero Configuration Deployment with Surge, Now, and Glitch

There comes a time in every app’s lifecycle when it’s got to be pushed out of the nest and into a cold, uncaring world of other people’s machines where “runs on my box” can’t protect it. The good news is deployment, at least in terms of MVPs, has never been easier. We’re talking one command. We’re talking nary a .*rc file or complex doc to familiarize yourself with. We’re talking make a thing, push a button, share it, and sweat scale later.

We’re talking Surge, Now, and Glitch: three fantastic tools with strengths and idiosyncracies of their own that remove every newton of friction between your text editor and the world.

In the interest of perspective we’ll be using the same two repos for this tour. Two versions of the same app, one made with Next.js and the second with the Create React App CLI. Both run React, but none of these deployment tools are React exclusive. What matters is that Create React App’s build script generates a static app, where Next.js has no such output and relies on a more dynamic server architecture. Feel free to clone and follow along with them at home and to fork and make them your own.

Surge

Surge does one thing: serve static apps. It does it in a clever way using a CDN, but that’s beyond our scope. Install it globally like so:

$ npm i -g surge

Let’s use it with our Create React App example and get something up and running. For many types of deployments it’s enough to run the easy to remember surge command from the root directory, but CRA’s start script fires up a dev server that won’t work here. Instead, for this and all of your CRA apps, you’ll want to fire npm run build followed by:

$ surge build

For the sake of clarity, build is the directory containing the files we’d like to serve. That parameter could be any directory, so don’t conflate the location with the verb. The first time you run the command you’ll need to supply credentials.

There you have it. Live in a matter of seconds. It’s worth noting that you can customize your deployment’s name in the interactive dialog following invocation. It’s also worth noting that a premium tier is available on a per-app basis that allows for a custom domain as well as some more advanced features.

Now

Now is a realtime deployment tool from the makers of Next.js. The upshot is you know it works with Next. The other upshot is it works with a ton of other things — dockerized apps included. Like Surge it requires installation. They have a desktop app, but we’ll stick with the module for our purposes.

$ npm i -g now

From there it’s just a matter of invoking now from the command line in your app’s root directory. You’ll need to confirm your email when running it for the first time, but whether you run it on the Next or CRA repo, you’ll have a deployed site.

A curious nuance: if you run now from the root of a Create React App project, it’ll run, but what you’re getting is a dev server rendering of the app. It works, but it’s not optimized. cd into your build directory and invoke now to deploy a more static, snappy, and street legal version of your app.

One last thing on Now: every site deployed on the free tier allows users to append /_src to the URL in-browser for a view of the source. But wait, there’s more.

From the source view a user, any user, can highlight a snippet and the address bar in the browser will update with a persistent, shareable anchor to the highlighted source. Premium users can opt out of this (along with other benefits), but it’s a pretty sweet feature.

Glitch

Our final offering is a bit of a strange bird. Glitch (nee Gomix; nee HyperDev) is indeed a platform for easy deployment, but that sells it way too short. Beyond a mechanism for delivering apps, it’s pretty much a complete IDE that allows for realtime development, collaboration, and deployment. Think Google Docs for full stack JS coding, always on, hot reloading, autosaving – and the aesthetic… Perfection.

Yes, you can write code from scratch in its interface. But we’ll really need the ability to import code for this to become truly useful. No problem. Skip the command line on this one and head to the address bar of the browser after you’ve logged into the site with GitHub.

Use the following address with your repo details:

https://glitch.com/edit/#!/import/github/[YourOrg]/[YourRepo]

Do it with our CRA repo and you’re in the money. It runs. It edits. The whole nine. Granted, it runs in dev mode, but ¯\_(ツ)_/¯. Try it with alligatorio/some-gators-next on the other hand, and you’ll get an error.

Change your start script to

'next build && next start'

and it’ll know what to do with your app. Live results. In deployment.

Notable: Glitch has no premium option at present, and you can push your changes back to GitHub via the user interface. They’ll be applied to a branch called glitch.

👉 We’ve only scratched the surface of what Glitch can do. Stay tuned, and consider it for your next hackathon.