Deploying an Ember.js App

Ember.js is a powerful, opinionated JavaScript framework for building ambitious web applications. It features a strong convention-over-configuration philosophy, a robust CLI, and a large ecosystem, making it ideal for scalable single-page applications (SPAs).

This guide explains how to deploy an Ember.js application to Klutch.sh, both with and without a Dockerfile. It covers installation, sample code, and deployment steps.

Prerequisites

• Node.js & npm installed (Download)
• Git and GitHub account
• Klutch.sh account

---

Getting Started: Create an Ember.js App

1. Install Ember CLI globally:

   npm install -g ember-cli

2. Create a new Ember.js app:

   ember new my-ember-app
   cd my-ember-app

3. Start the development server:

   ember serve

   Your app should be running at http://localhost:4200.

Sample Code (app/components/hello-world.js & app/templates/components/hello-world.hbs)

Create a simple component:

app/components/hello-world.js

import Component from '@glimmer/component';

export default class HelloWorldComponent extends Component {}

app/templates/components/hello-world.hbs

<h1>Hello from Ember.js on Klutch.sh!</h1>

Add <HelloWorld /> to your app/templates/application.hbs to display it.

---

Deploying Without a Dockerfile

Ember.js apps are static sites after build. Klutch.sh can deploy static sites directly.

1. Push your Ember.js app to a GitHub repository.
2. Log in to Klutch.sh.
3. Create a new project.
4. Create a new app:
   • Select your Ember.js GitHub repository and branch
   • Choose “Static Site” as the app type
   • Set build command: ember build --environment=production
   • Set output directory: dist
   • Configure region, compute, and environment variables as needed
5. Click “Create” to deploy. Klutch.sh will build and serve your static Ember.js app.

---

Deploying With a Dockerfile

If you need custom server logic or want to use a Dockerfile:

1. Add a Dockerfile to your project root. Example:

   # Build stage
   FROM node:20-alpine AS builder
   WORKDIR /app
   COPY package*.json ./
   RUN npm install -g ember-cli && npm install
   COPY . .
   RUN ember build --environment=production
   
   # Production stage
   FROM nginx:alpine
   COPY --from=builder /app/dist /usr/share/nginx/html
   EXPOSE 80
   CMD ["nginx", "-g", "daemon off;"]

2. Push your code (with Dockerfile) to GitHub.
3. In Klutch.sh, create a new app and select the Dockerfile option when prompted.
4. Set service details and environment variables as needed.
5. Click “Create” to deploy. Klutch.sh will build your Docker image and serve your Ember.js app via Nginx.

---

Resources

• Klutch.sh Documentation
• Ember.js Documentation

---

Deploying Ember.js to Klutch.sh is fast and flexible. Use static site deployment for most cases, or Dockerfile for custom setups.