A quick guide to even quicker deployments

We made a walkthrough on how to easily deploy a web app.

When working on a new project, one of our most valuable rules is to get the environment set as simply and quickly as possible. Lets face it, as developers, every new project feels like going on a Rick and Morty adventure: we don’t want to waste time, we want the adventure to start right away.

Interacting with your app is the best way to realize that… well… that you’ve just created a monster. Its your little monster and you will love it no matter what (unless it was developed in .NET ) but its also the best way too see if your app is working as intended.

Nowadays there are several resources available to build, test, deploy, and get our apps working in a manner of minutes. So let’s get to it!

Selecting the technology

Eeny, meeny, miny, moe, which technology fits the most? Of course this will depend on the particulars of every project. It can range from a static page using a simple static page generator (like yeogurt), or a react static page using create-react-app, to a PWA using React with Next or preact-cli.

Regardless of which technology you need for your project, there is always a way to get it deployed and working. We’ll show an example by creating and deploying a static react app.

Creating the App

Since we want to get started immediately, we’ll be using facebook’s create react app library which works on macOS, Windows, and Linux. We’ll manage some packages using node js, so if you don’t have node installed, here you go.

First, lets install the library globally, this will allow us to to use it as a command (cli) available in the whole system. Open your terminal and type:

npm install -g create-react-app

Once installed, let’s create our little monster and give it a name:

create-react-app name-of-your-app

Finally, to start the app, we just access it, install the dependencies, and start the server.

cd name-of-your-app
npm i
npm start

Voilá! That’s it!

We’ve just got our app up and running, open http://localhost:3000/ on your browser to check it out. Keep in mind that you could use both: npm start as well as yarn start. Also, remember that the port number can change.

We could start talking about React Components, and how to build crazy stuff with them, but that’s a tale for another time. Now that we have our app running, let’s focus on how to deploy it.

Ready, set, deploy!

There are infinite universes Morty!

There are infinite ways of deploying apps. Our recommendation for you is to use Now — Realtime global deployments. With Now, you can take your application to the cloud in a sec and spend the rest of the night looking at memes. You don’t believe me? Just go ahead and open your terminal, and type:

npm install -g now

Exactly as we did for the react-create-app library, we are installing Now as a global package. Now (wait, the library? Or right now?), in the terminal, inside your project’s folder, type:

now

If it’s the first time you’re using Now, running this command will ask for your email to identify you. The deployment will stop until the verification is successful so just enter your email, open your inbox and click on the verify link. As soon as you click the link, the identification should be successful and the process will continue.

If, for some reason, the process doesn’t continue after you click the verification link, just run the command ‘now’ again, that should solve the problem.

Once deployment has started, you will notice on the terminal a link where your app is online and running, ready to be shared. So… that’s it? Just two lines of code? Yup. I told you, the world is a better place now.

As for the other infinite ways of deploying apps, I don’t know them all but I can definitely offer some alternatives.

Heroku Style

You don’t know Heroku? Well, you should. Heroku, meet Reader, Reader, meet Heroku.

According to their website:

“Heroku is a cloud platform that lets companies build, deliver, monitor and scale apps — we’re the fastest way to go from idea to URL, bypassing all those infrastructure headaches.”

Going straight to the point, in order to deploy with Heroku you will have to sign up on https://www.heroku.com/. Once you have an account you’re ready to go. You will find the process similar to using Now, maybe a bit more complex, but it’s still a simple way to get your app deployed.

First we install Heroku globally using Brew. What is Brew? Well, it’s a package manager that will install everything you need on your macOs. Just run this on your terminal:

brew install heroku/brew/heroku

If you are not a macOS user … why not?!

Just kidding, here’s an awesome tutorial for windows and linux users: https://devcenter.heroku.com/articles/heroku-cli

Once we have Heroku cli available on the terminal, you should log in to your heroku account, type

heroku login

This, of course, will ask for your username/email and password.

Remember the React App we created just a moment ago? Let’s enter on its directory and initialize it as a git repo, to do this enter:

git init

Now we have our git initialized, if we want to make deployment even simpler, we use Heroku Buildpack for create-react-app library, a library with the purpose of automating deployment for React apps generated with create-react-app. It’s time for us to create a Heroku app by typing:

heroku create your-app-name -b https://github.com/mars/create-react-app-buildpack.git

This command will set a name and a url for us to access our app. And that’s it! The only thing left is to commit our changes, push them to heroku and test our running app. Enter:

git add .
git commit -m “react-create-app on Heroku”
git push heroku master
heroku open

There you go! Your app is ready to be shared.

As I said before, there are other ways of getting a deployment done, we could create a droplet on Digitalocean, install Dokku (powered mini-Heroku ) and set the environment to work, but using Now or Heroku is a good starting point to get things done.

If you want to go further, you could try building a React App with Nextjs using our github repo!