Fullstack serverless web development with Remix and Architect (Part 1, setup)

This is the first in our series of blog posts about Remix and Architect. The series will go as follows: 

1. We will get started with a sample project, get to know it better and add a few quality of life improvements. 
2. We will refactor it to use nested routing. 
3. We will separate some of the UI code from route code. 
4. We will install a couple modules and refactor our forms to be more succinct. 
5. We will start creating a new feature by creating a DynamoDB table and new routes while making full use of the components we made in the previous parts. 
6. We will set up CI/CD, review the deployment and then I’ll end with an overview before asking you a few questions.

Local development setup

In this part we’ll get our environment set up and add a few quality of life improvements. If you don’t already know Remix and Architect, you should at least scroll through this page about Remix and read this page about Architect to get a basic understanding.

Getting started

First we need something up and running. For this I’m leveraging Remix Stacks, which is a feature to get more easily started with a specific set of tools. There are multiple official stacks and it is easy to fork one, modify it and make it your own. I am using the official Grunge Stack, which uses Architect and some other tools.

npx create-remix --template remix-run/grunge-stack
# accept everything, name your project, choose TypeScript
npm i # if you didn’t already
npm run dev

Now we have a sample application running locally that’s emulating serverless infrastructure (lambda/ddb).

At this point it is easy to get overwhelmed. If it’s too much, then hit pause and get to know Architect by scanning through the docs and Remix by watching some of their videos or scanning through their doc or maybe even doing the tutorials.

To get a good grasp of everything, I personally did the tutorials and read the docs for both. What I found lacking was a walkthrough of Grunge Stack, so let’s fix that.

Getting to know the sample application

At this point we can:

1. Register
2. Log in
3. Log out
4. List notes
5. Create a note
6. Read a note
7. Delete a note

Our long-term goal is to expand the sample application to also include “projects” in a similar way it has notes. In this part, we will focus on getting things ready for a little bit of refactoring.

Live reload fix

Live reload on this stack has a bug. If it’s not fixed by the time you are reading this, you can add the line:

devServerPort: 8002,

To remix.config.js.

Database seeds

The local in-memory database is wiped at server restart, but Architect has a built in feature for seeding it. Let’s add a sandbox-seed.js file at the root of the project with contents:

module.exports = {
   password: [
     {
       pk: "email#test@test.com",
       password: "$2a$10$Fxg0TXU5CVZ0rygu9D2UJuhEdWfLrZ7Obki746nlYNixLh8sEFiCe", // 
password123
     },
   ],
   user: [
     {
       pk: "email#test@test.com",
       email: "test@test.com",
     },
   ],
 };

Now we can log in as “test@test.com” using the password “password123” after every server restart and add more seed data when needed.

Coming Up in Part 2

Setting things up in part 1 was relatively painless and I think it’s pretty great how fast we got a basic stack ready for development and deployment.

At this point, you could play around with the application, scan the folder structure and maybe even refer to docs if something seems confusing. When you feel ready, you can join me in part 2 so that we can start refactoring our sample app to use nested routes and separate some of the UI code from route code.