// Tutorial //

    Zero Configuration Deployment with Surge, Now, and Glitch

    Published on April 5, 2017
      Default avatar
      By Casey A. Childers
      Developer and author at DigitalOcean.
      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

      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

      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.

      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.

      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.

      If you’ve enjoyed this tutorial and our broader community, consider checking out our DigitalOcean products which can also help you achieve your development goals.

      Learn more here


      About the authors
      Default avatar
      Developer and author at DigitalOcean.

      Still looking for an answer?

      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!