DEV Community

Cover image for Quick full-stack app deployment using AWS and Ember.js
Ewan McDougall
Ewan McDougall

Posted on • Originally published at blog.mrloop.com

Quick full-stack app deployment using AWS and Ember.js

I've been working on a small side project, more on that later, and wanted a straight forward way to deploy a serverless full-stack app. I'm using Ember.js as the front-end framework and the back-end is AWS, Amazon Web Services, Lambda and other AWS services. This post describes the minimal setup to deploy a full-stack app with Ember.js and a Lambda API endpoint.

We're going to create a simple hello world Ember.js app that is deployed to AWS with Serverless Stack, SST, and uses a hello API endpoint. There are lots of good docs on SST at https://docs.sst.dev. We'll use the 'Get Started' instructions to create the SST project and then add our Ember.js app to it.

You'll need an AWS account and AWS credentials configured locally. We'll use pnpm but you could also use npm or yarn. The finished app is available on github.

Create a new app

pnpm create sst ember-sst-example
Enter fullscreen mode Exit fullscreen mode

Start your local dev environment.

pnpm install && pnpm sst dev
Enter fullscreen mode Exit fullscreen mode

This will print the URL of your API endpoint to the console similar to https://random-string.execute-api.us-east-1.amazonaws.com.

Add an Ember.js app.

cd packages
pnpx ember-cli new web --lang en --skip-npm --skip-git
pnpm install
Enter fullscreen mode Exit fullscreen mode

We'll remove the ember-cli-sri package from the ember app as it's not working with the SST cloudfront deployment.
In future ember releases, ember-cli > 5, it's likely the following step won't be needed. If it fails don't worry.

cd web && pnpm remove ember-cli-sri
Enter fullscreen mode Exit fullscreen mode

Add the web app to your stacks and link the API to it.

stacks/MyStack.tsc

-import { StackContext, Api } from "sst/constructs";
+import { StaticSite, StackContext, Api } from "sst/constructs";

export function API({ stack }: StackContext) {
  const api = new Api(stack, "api", {
    routes: {
      "GET /": "packages/functions/src/lambda.handler",
    },
  });

+ const web = new StaticSite(stack, "web", {
+   path: "packages/web",
+   buildOutput: "dist",
+   buildCommand: "pnpm build",
+   environment: {
+     EMBER_APP_API_URL: api.url,
+   }
+ });
+
  stack.addOutputs({
    ApiEndpoint: api.url,
+   Website: web.url,
  });
}
Enter fullscreen mode Exit fullscreen mode

Config the Ember.js app to use the API.

packages/web/config/environment.js

const ENV = {
+  apiUrl: process.env.EMBER_APP_API_URL,
Enter fullscreen mode Exit fullscreen mode

packages/web/ember-cli-build.js

const app = new EmberApp(defaults, {
- // Add options here
+ storeConfigInMeta: false,
});
Enter fullscreen mode Exit fullscreen mode

Start the ember app locally and bind SST to it.

cd packages/web
pnpm sst bind ember s
Enter fullscreen mode Exit fullscreen mode

Remove the Ember.js welcome page and fetch the welcome from the hello endpoint.

packages/web/app/routes/application.js

import Route from '@ember/routing/route';
import config from 'web/config/environment';

export default class ApplicationRoute extends Route {
  async model() {
    let response = await fetch(config.apiUrl);
    return response.json();
  }
}
Enter fullscreen mode Exit fullscreen mode

packages/web/app/templates/application.hbs

{{page-title "Web"}}

{{this.model.body}}

{{outlet}}
Enter fullscreen mode Exit fullscreen mode

You should see the API hello message rendered by the Ember.js app.

Deploy to production.

pnpm sst deploy --stage prod
Enter fullscreen mode Exit fullscreen mode

Congratulations you just deployed your app! The Website URL will be printed to the console.

Clean up

To cleanup your AWS resources you can remove the development environment and the production environment.

pnpm sst remove
pnpm sst remove --stage prod
Enter fullscreen mode Exit fullscreen mode

Top comments (0)