Zero Configuration Deployment with Surge, Now, and Glitch

Published on April 5, 2017

    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 our products

    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

    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 below to sign up and get $200 of credit to try our products over 60 days!

    Sign up

    Join the Tech Talk
    Success! Thank you! Please check your email for further details.

    Please complete your information!

    Featured on Community

    Get our biweekly newsletter

    Sign up for Infrastructure as a Newsletter.

    Hollie's Hub for Good

    Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

    Become a contributor

    Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

    Welcome to the developer cloud

    DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

    Learn more
    DigitalOcean Cloud Control Panel