How to Deploy Remix Apps to Amazon Amplify

Amplify Hosting supports many popular SSR frameworks such as Nextjs, Nuxtjs or any SSR framework with a custom adapter. This means that if you implement it correctly, it will support almost all frameworks. This article will focus on how to implement Remix to Amplify. We will create a basic project from scratch.

Installed

CLI create-remix will create a new remix project. Passing no parameters, this command launches an interactive CLI to configure the new project and set it up in a given directory.

npx create-remix@latest

Discontinue use remix-serveand replace it with express. Install Express, Remix Express and cross-env adapters to run in production mode.

npm i express @remix-run/express cross-env
npm uninstall @remix-run/serve

Create a server file in the root directory of the Express project. (You can run the command below or use any directory manager and create a server.js file)

touch server.js

Then edit the content of server.js as follows

import remix from "@remix-run/express";
import express from "express";
import * as build from "./index.js";

const app = express();
const port = 3000;

app.all(
  "*",
  remix.createRequestHandler({
    build,
  })
);

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

Configure deploy-manifest.json

Next comes the creation of a file called deploy-manifest.json in the project root directory. This file will tell Amplify how to route traffic and configure and start compute resources. The contents of this file are as follows. You can customize the content of the file below differently depending on your application's needs and goals.

{
  "version": 1,
  "framework": {
    "name": "remix",
    "version": "2.15.2"
  },
  "routes": [
    {
      "path": "/*.*",
      "target": {
        "kind": "Static",
        "cacheControl": "public, max-age=86400"
      },
      "fallback": {
        "kind": "Compute",
        "src": "default"
      }
    },
    {
      "path": "/*",
      "target": {
        "kind": "Compute",
        "src": "default"
      }
    }
  ],
  "computeResources": [
    {
      "name": "default",
      "runtime": "nodejs20.x",
      "entrypoint": "server.js"
    }
  ]
}

Create amplify.yml configuration file

Run npm run build to build applications. Remix puts the build output into a directory build

Amplify uses a file called amplify.ymlTo build the project. To meet the Amplify specification we need to rename build to .amplify-hosting, Rename the folder clientinside the build folder (is now .amplify-hosting) to static, Move Folder serverinside the build folder (is now .amplify-hosting) to compute/default .

Finally, copy server.jsand deploy-mainfest.jsoninto the right position so that it can be started correctly. Copy server.js to .amplify-hosting/compute/default , Copy deploy-manifest.jsonenter .amplify-hosting/deploy-manifest.json

Create a file with a name amplify.ymlin the root directory of the project and has the following content:

version: 1
baseDirectory: .amplify-hosting
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
        - mv build .amplify-hosting
        - mv .amplify-hosting/client .amplify-hosting/static
        - mkdir -p .amplify-hosting/compute
        - mv .amplify-hosting/server .amplify-hosting/compute/default
        - npm ci --omit dev
        - cp package.json .amplify-hosting/compute/default
        - cp -r node_modules .amplify-hosting/compute/default
        - cp server.js .amplify-hosting/compute/default
        - cp deploy-manifest.json .amplify-hosting/deploy-manifest.json
  artifacts:
    files:
      - "**/*"
    baseDirectory: .amplify-hosting

Deploy to Amplify

Finally upload them all to Git and connect the repository to Amplify. Amplify will automatically build and deploy the app.