Fullstack serverless web development with Remix and Architect (Part 6, Go live)

In the last part of our series on Remix and Architect, we added a pretty bare bones project management feature to our sample application. In this part we will go live.

Go live

To go live, we will need to set up CI/CD, deploy and review the created resources.

Set up CI/CD

So the stack already has Github Actions setup so that we can deploy to staging and prod. What we need to do is, set the correct region to the app.arc file (right below @app definitions). If we skip this we get the default region.

@aws
region eu-central-1

Now we need a Github repo and to add the AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY repository secrets. After that we can deploy.

Deploy

Now we can try deploying the code with Github Actions by simply pushing our code to the remote main branch. Our pre-configured pipeline will run lints, tests and then deploy using the access keys we set up earlier.

Oh no, the pipeline failed! It seems that we got a failing Cypress test. We can start a Cypress locally with a script in package.json.

npm run test:e2e:dev

Now when we run the smoke.ts we see it fails because it is searching for a link with a text “+ new note” and in the UI there is “+ Create Note”. We can easily fix it by changing the test in cypress/e2e/smoke.ts to look for the link with the correct name.

Timed out retrying after 4000ms: Unable to find an accessible element with the role "link" and name /\+ new note/i

Now that we have fixed our tests and got the app deployed with our pipeline add the env secrets and review the created resources.

export AWS_PROFILE=my-profile
export AWS_REGION=eu-central-1
export AWS_SDK_LOAD_CONFIG=1
# I was worried if mfa works, so I did aws sts get-caller-identity to authenticate before doing these
npx arc env --add --env staging ARC_APP_SECRET $(openssl rand -hex 32)
npx arc env --add --env staging SESSION_SECRET $(openssl rand -hex 32)
npx arc env --add --env production ARC_APP_SECRET $(openssl rand -hex 32)
npx arc env --add --env production SESSION_SECRET $(openssl rand -hex 32)

Review created resources

Now we can go to the AWS Console and under CloudFormation with the correct region we can see the stack. For me it is called “MyRemixAppF646Production”. Now we can go to outputs and see the API endpoint. I don’t know about you, when I tried to go to the URL, I was greeted with an internal server error.

We can see what it's about by checking the lambda logs.

npx arc logs ./server
ERROR
Uncaught Exception
{
  "errorType": "Error",
  "errorMessage": "Invariant failed: SESSION_SECRET must be set",
  "stack": [
    "Error: Invariant failed: SESSION_SECRET must be set",
    "    at invariant (/var/task/node_modules/tiny-invariant/dist/tiny-invariant.cjs.js:14:11)",
    "    at Object.<anonymous> (/var/app/session.server.ts:7:1)",
    "    at Module._compile (internal/modules/cjs/loader.js:1085:14)",
    "    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)",
    "    at Module.load (internal/modules/cjs/loader.js:950:32)",
    "    at Function.Module._load (internal/modules/cjs/loader.js:790:12)",
    "    at Module.require (internal/modules/cjs/loader.js:974:19)",
    "    at require (internal/modules/cjs/helpers.js:101:18)",
    "    at _tryRequireFile (/var/runtime/UserFunction.js:63:32)",
    "    at _tryRequire (/var/runtime/UserFunction.js:151:20)"
  ]
}

Huh? Didn’t we just set it? Let’s check.

npx arc env
         App ⌁ my-remix-app-f646
      Region ⌁ eu-central-1
     Profile ⌁ default
     Version ⌁ Architect 10.3.3
         cwd ⌁ /Users/tuomaskoivistoinen/git/my-remix-app

✓ Env Total environment variables found: 4
⚬ Env Testing env vars:
  | None found! Add testing env vars with: arc env --add --env testing NAME value
⚬ Env Staging env vars:
  | ARC_APP_SECRET 41f9dc526f8695abb55dc43e4946c5a6fc92ae956ead7d04a7585793f07a3b93
  | SESSION_SECRET 16e1e1631301534a5d1a597dca80a9af535ba1160c01e691cb5fa3b2b77733d1
⚬ Env Production env vars:
  | ARC_APP_SECRET 5eb5a26907bbe0df77974f0c0902577185c557ed79adfecd955effe1e189ccfb
  | SESSION_SECRET 8987ce29831960dce1e87fe44668f6a2f276446c9c6885671e8ec9ab4eeea019
```

They definitely are set. Let’s try deploying again.

npx arc deploy --production

And boom we are live!

We can now verify that the app is working and then nuke everything.

npx arc destroy --app my-remix-app-f646 --force
npx arc destroy --production --app my-remix-app-f646 --force

Final words

In this series we got a lot done, but we only scratched the surface. Just look at the guides section and you should get a picture of how much more Remix can help you with. Even Architect has a lot more to offer in terms of features and plugins.

All in all, I think the approach Remix takes with leveraging the browser leads to both a better user and developer experience. We code less and get more. Architect on the other hand simplifies the AWS serverless experience to an extent I’ve never seen before.

What do you think? Confused? Not Impressed? Please take a few moments to drop a comment or get in touch, I’d really appreciate it.