// Tutorial //

Zero Configuration Deployment with Surge, Now, and Glitch

Published on April 5, 2017
    Default avatar

    By Casey A. Childers

    Zero Configuration Deployment with Surge, Now, and Glitch

    While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

    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.

    FWIW, every one of these bad boys is free. ✨ Two have premium options.


    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.

    A bird's eye view of Surge in action

    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.

    💣 Any attempt to deploy Next.js here will result in disappointment. Next by its nature won’t produce a static site and will not play with Surge.


    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.

    Invoking the Now command

    Bonus points for copying the url to the clipboard. 🦄

    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.

    Highlighting the source

    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.


    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:


    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.

    Deployment with Glitch

    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.

    Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

    Learn more about us

    Want to learn more? Join the DigitalOcean Community!

    Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.

    Sign up now
    About the authors
    Default avatar
    Casey A. Childers


    Still looking for an answer?

    Ask a questionSearch for more help

    Was this helpful?
    Leave a comment
    Leave a comment...

    This textbox defaults to using Markdown to format your answer.

    You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

    Try DigitalOcean for free

    Click here to sign up and get $200 of credit to try our products over 60 days!
    Try DigitalOcean for free