Easy Ember-Fastboot deployment with Google Cloud

Warning: this article is partially outdated. We have to update it for the new APIs that Google Cloud uses.

After time away from backend technologies, I was a little bit scared about implementing Fastboot in my ember apps. It turned out it was extremely easy to setup! By only following the Quick Start steps I had an app fully running on Fastboot, on development. Great, but how do I deploy an ember-fastboot app to production? It’s a difficult question because there are so many possible answers: some easy but expensive, some complex and cheaper. In this article, we will go through the steps to setup a simple app deployment to Google Cloud, which is easy enough to setup and rather inexpensive.

Waterloo Bridge, Claude Monet.

Setup Google Cloud

1. Go to your Google Cloud Console and create a new Project.
Note that it’s possible to customize your project’s ID, just so you don’t end up having an ugly generated ID (yep, you can see that happened to me).

2. Create a bucket on that project. Click on the Hamburger menu (I hate that name) on the left side of Google Cloud’s logo. Look for Storage, there you’ll be able to create buckets.

3. Install Google Cloud SDK. The Quick Start Guides are very straightforward and simple to follow.

Prepare your server for deployment

We will use fastboot-gcloud server, so clone it or download it. After some configurations, it will be deployed to Google Cloud.

fastboot-gcloud is a server for hosting ember apps in Fastboot mode on Google Cloud. Clone it or download it from Github.

When you have the server in your files, open app.yaml in your text editor. We need to change the environment variables with the project that we created earlier.

runtime: custom
vm: true
api_version: 1
env_variables:
GCLOUD_PROJECT: <google cloud project id>
FASTBOOT_GCS_BUCKET: <google cloud bucket>
FASTBOOT_GCS_KEY: fastboot-release.json

NOTE: We will not deploy it yet, or else the deployment will fail because it won’t be able to find fastboot-release.json, simply because we haven’t deployed our app yet.

Deploy your application

1. Install ember-cli-deploy addons

You need to install these addons:

  • ember-cli-deploy
  • ember-cli-deploy-build
  • ember-cli-deploy-gcloud
  • ember-cli-deploy-gcloud-storage

You can install them with this super handy commands:

ember install ember-cli-deploy
ember install ember-cli-deploy-build
ember install ember-cli-deploy-gcloud
ember install ember-cli-deploy-gcloud-storage

2. Add deploy configurations

We need to add a configuration file, config/deploy.js within the app’s config directory. Here we fill in again the bucket names after the one we created for our project.

Our deployment process uploads assets to our buckets along a file called fastboot-release.json, that our server will use to know it’s time to serve a different version of the app.

3. Prepend the correct path to your assets.

As our assets will be in a location different that our index.html, we have to add a blueprint to the app in order to prepend a path for them. Add options to the app like this:

fingerprint: {
prepend: ‘https://storage.googleapis.com/<bucket name>/'
}

It will look like this within the file:

4. Deployment time!

You can now deploy your application to production with the following command:

GCLOUD_PROJECT=<project name> ember deploy production

4.2 Optional:

You can also save yourself a little work by adding this command to your package.json among the scripts hash:

“scripts”: {
“build”: “ember build”,
“start”: “ember server”,
“test”: “ember test”,
“deploy”: “GCLOUD_PROJECT=<project name> ember deploy production”
}

With this you’d be able to run the following to have deployment done:

npm run deploy

Deploy server to Google Cloud

Now it’s time to deploy our server to Google Cloud. This is a one-time only task, after this you only have to deploy your app as shown in the previous section. We’ll do that with a simple command in our server’s directory:

gcloud app deploy

Note: You might have to set the project to deploy to on gcloud config manually, even if the app.yaml has it already. You can run the following command to make gcloud deploy to the correct project.

gcloud config set project <your project>

This server will observe when a new version of your application was deployed to the bucket by checking a file called fastboot-release.json.

Done!

Now you can remember where gcloud told you your app would be available after deployment, or run the following command on your server folder:

gcloud app browse

Bonus: Link app to your domain

It’s simple to link your domain to this application, go to your Google Cloud Console > App Engine > Settings > Add Custom Domain and follow the instructions there.

Bonus 2: Request a free pairing session

Like what you read? Give jorge a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.