Publishing

Documentation for deploying your application

Deploying to Now

This section will document how to deploy your application to Now, which is a hosting service provided by zeit.co.

Additional information about Now can be found in the official documentation for the service.

Features

This particular service provides several nice features for hosting static applications, including:

  • An easy deploy process
  • Free SSL certificates for custom domains
  • Zero-downtime deploys
  • Ability to roll-back to previous deploys
  • Provides an informative web dashboard
  • Free global CDN, with data centers in USA and Europe

Create Account

To create an account, first install the Now CLI by running this command:

npm install -g now

Once installed, run this command to login, which is also the sign up process:

now login

Now will prompt you to enter the email address you'd like to use for your account:

> Enter your email: [email]

Once you enter your email, Now will send you an email with a verification link:

> We sent an email to [email]. Please follow the steps provided
  inside it and make sure the security code matches Proud Galapagos Penguin.
â ¼ Waiting for your confirmation

Find the email in your inbox, and click the link inside. Once you do, the CLI will automatically update to display the confirmation message below, and your account will now exist:

> We sent an email to jason_hansen@outlook.com. Please follow the steps provided
  inside it and make sure the security code matches Proud Galapagos Penguin.
✔ Email confirmed
✔ Fetched your personal details
> Ready! Authentication token and personal details saved in "~/.now"

Build the Project

Next, build the application, using whatever environment you want to deploy. We'll use production for this example:

npm run build:production

Deploy the Project

New Lore projects include support for deploying to Now, and you can deploy the /dist folder you created in the Build step by running this command:

npm run deploy

This command is store in your package.json file, with the relevant section shown below:

"scripts": {
  "deploy": "npm run now:copy && now dist",
  "now:copy": "cp .now/package.json dist/package.json",
},

The deploy script does two things:

  • First, it copies the package.json file from the /.now folder at the root of your project into the /dist folder.
  • Then it deploys the /dist folder to Now.

The package.json file needs to be copied into the /dist folder in order to make sure that routing works like you expect when the application is deployed. Without you, the application won't reload the page correctly if you try to refresh the browser on a nested route like https://app.example.com/users/1.

Once the deploy process completes, you'll see a message like this, if the name of the project you deployed was lore-quickstart:

> Deploying ~/lore-quickstart/dist under jchansen
> Using Node.js 8.11.1 (default)
> https://lore-quickstart-avvuiuuwto.now.sh [in clipboard] (sfo1) [11s]
> Synced 4 files (5.63MB) [11s]
> Building…
> â–² npm install
> ⧗ Installing 1 main dependency…
> ✓ Installed 130 modules [2s]
> â–² Snapshotting deployment
> â–² Saving deployment image (5.8M)
> Build completed
> ✔ Verified sfo1 (1) [12s]
> Success! Deployment ready!

The important part here is the URL the project was deployed to, which for this example is https://lore-quickstart-avvuiuuwto.now.sh. Copy that URL - we'll need it in the next step.

Set up an Alias

Every time you deploy an application to Now, it will create a unique auto-generated URL for that deploy. Then you alias that URL to actual domain you want people to access the application from.

It's this two-step process that enables zero-downtime deploys. It also means that if you screw up, you can easily roll-back to a previous version of your application simply by switching the alias.

Let's illustrate what this process looks like.

In the example above, Now deployed the application to lore-quickstart-avvuiuuwto.now.sh. If we wanted users to access that application from lore-quickstart.now.sh, then we would create an alias from lore-quickstart-avvuiuuwto.now.sh to lore-quickstart.now.sh using this command:

now alias lore-quickstart-avvuiuuwto.now.sh lore-quickstart.now.sh

And now the application would now be available from https://lore-quickstart.now.sh.

If the subdomain you want is already taken, you'll see an error like this:

> Assigning alias lore-quickstart.now.sh to deployment lore-quickstart-avvuiuuwto.now.sh
> Error! The alias lore-quickstart.now.sh is a deployment URL or it's in use by a different team.

If that's the case, just keep trying different subdomains until you find one that's available.

Set Up Custom Domain

If you want to deploy to a custom domain like quickstart.lorejs.org, simply use that custom domain as the alias, like this:

now alias lore-quickstart-avvuiuuwto.now.sh quickstart.lorejs.org

In that case, Now will ask you some questions to verify you own the domain, and you may need to add some DNS records depending on how you want to prove your ownership.

Once you're done though, Now will automatically acquire an SSL certificate for that domain from Let's Encrypt, and your application will then be available at https://quickstart.lorejs.org, or whatever domain you chose.