aaronpowell / azure-remix-stack

A remix stack template for running a remix app on Azure

Azure Remix Stack

A Remix Stacks template for deploying to Azure. This is based off the Indie Stack template, but adapted for Azure.

npx create-remix --template aaronpowell/azure-remix-stack

What's in the stack

• Azure Web App for Containers with Docker and Azure Container Registry for container management
• Production-ready Azure Database for PostgreSQL
• GitHub Actions for deploy on merge to production and staging environments
• Email/Password Authentication with cookie-based sessions
• Database ORM with Prisma
• Styling with Tailwind
• End-to-end testing with Cypress
• Local third party request mocking with MSW
• Unit testing with Vitest and Testing Library
• Code formatting with Prettier
• Linting with ESLint
• Static Types with TypeScript
• VS Code Remote Container definition for easy local dev setup
• Azure Developer CLI (azd) to provision infrastructure

Note: you will need an Azure account to deploy this.

Development

• Initial setup: If you just generated this project, this step has been done for you.

  npm run setup

• Start dev server:

  npm run dev

This starts your app in development mode, rebuilding assets on file changes.

The database seed script creates a new user with some data you can use to get started:

• Email: [email protected]
• Password: AzureRocks!

Deployment

Quick testing

You can quickly spin up the infrastructure on Azure using azd.

1. Initialize your Azure environment (enter a name for the environment, select a subscription and region to deploy to):

   azd init

2. Provision the resources in Azure

   azd provision

3. Deploy from local

   azd deploy

Deploy with GitHub Actions or Azure Pipelines

Once you're ready, you can get azd to scaffold up a GitHub Action workflow (or Azure Pipelines definition).

1. Scaffold the workflow

   azd pipeline config

2. Commit the generated workflow and push

Relevant code:

This is a pretty simple note-taking app, but it's a good example of how you can build a full stack app with Prisma and Remix. The main functionality is creating users, logging in and out, and creating and deleting notes.

• creating users, and logging in and out ./app/models/user.server.ts
• user sessions, and verifying them ./app/session.server.ts
• creating, and deleting notes ./app/models/note.server.ts

Deployment

This Remix Stack comes with two GitHub Actions that handle automatically deploying your app to production and staging environments.

Before running a deployment, you'll need to provision the Azure Container Registry and Azure WebApp for Conitainers instances, as well as an Azure SQL database.

Note: Ensure that the Azure SQL database connection is configured in app settings as DATABASE_URL for the app to access it.

GitHub Actions

We use GitHub Actions for continuous integration and deployment. Anything that gets into the main branch will be deployed to production after running tests/build/etc. Anything in the dev branch will be deployed to staging.

Environment Variables

GitHub Actions will need the following secret variables to run:

• DATABASE_URL: Connection info for a database to run the Cypress tests again
• AZURE_RESGISTRY_URL: URL of the Azure Container Registry
• AZURE_REGISTRY_USERNAME: Username to authenticate against Azure Container Registry
• AZURE_REGISTRY_PASSWORD: Password to authenticate against Azure Container Registry
• AZURE_CLIENT_ID: Client ID to authenticate against
• AZURE_TENANT_ID: Tenant ID to autnenticate against
• AZURE_SUBSCRIPTION_ID: Subscription that the web app belongs to
• AZURE_WEBAPP_NAME: Name of the app to deploy into

Testing

Cypress

We use Cypress for our End-to-End tests in this project. You'll find those in the cypress directory. As you make changes, add to an existing file or create a new file in the cypress/e2e directory to test your changes.

We use @testing-library/cypress for selecting elements on the page semantically.

To run these tests in development, run npm run test:e2e:dev which will start the dev server for the app as well as the Cypress client. Make sure the database is running in docker as described above.

We have a utility for testing authenticated features without having to go through the login flow:

cy.login();
// you are now logged in as a new user

We also have a utility to auto-delete the user at the end of your test. Just make sure to add this in each test file:

afterEach(() => {
  cy.cleanupUser();
});

That way, we can keep your connected db clean and keep your tests isolated from one another.

Vitest

For lower level tests of utilities and individual components, we use vitest. We have DOM-specific assertion helpers via @testing-library/jest-dom.

Type Checking

This project uses TypeScript. It's recommended to get TypeScript set up for your editor to get a really great in-editor experience with type checking and auto-complete. To run type checking across the whole project, run npm run typecheck.

Linting

This project uses ESLint for linting. That is configured in .eslintrc.js.

Formatting

We use Prettier for auto-formatting in this project. It's recommended to install an editor plugin (like the VSCode Prettier plugin) to get auto-formatting on save. There's also a npm run format script you can run to format all files in the project.

License

The template is licensed under MIT, but the license file will be removed as you scaffold the template, so make sure you license your repo appropriately.

azure-remix-stack's Issues

Remix app is unable to connect to DB when deployed to Azure.

Bug Description
When I deployed this repo to Azure using azd up as recomended in the /prisma/seed.ts file, I get the error below. For some reason the remix app is unable to connect to the postgresql instance when it is running in Azure.

Steps to reproduce:

1. Clone this repo and run the dev container inside of it.
2. When the dev container is initialized, log into azd with the azd login --use-device-code command.
3. After a successful login, run the command azd up and answer the questions in the following dialog.
4. After a successful deployment, navigate to the produced Endpoint and try to log in with the credentials provided in the README.
5. See this error in the browser and the error below in the console:

Console Error:

2023-01-21T05:14:45.78782  Successfully Connected to container: 'main' [Revision: 'ca-web-zpj7g4hsn3q5e--33qs0uf', Replica: 'ca-web-zpj7g4hsn3q5e--33qs0uf-8486759696-2g887']
2023-01-21T05:13:27.144270489Z 
2023-01-21T05:13:27.144274861Z Can't reach database server at `psql-db-zpj7g4hsn3q5e.postgres.database.azure.com`:`5432`
2023-01-21T05:13:27.144278759Z 
2023-01-21T05:13:27.144283149Z Please make sure your database server is running at `psql-db-zpj7g4hsn3q5e.postgres.database.azure.com`:`5432`.
2023-01-21T05:13:27.144287778Z     at RequestHandler.handleRequestError (/myapp/node_modules/@prisma/client/runtime/index.js:34316:13)
2023-01-21T05:13:27.144291493Z     at RequestHandler.request (/myapp/node_modules/@prisma/client/runtime/index.js:34293:12)
2023-01-21T05:13:27.144295489Z     at PrismaClient._request (/myapp/node_modules/@prisma/client/runtime/index.js:35273:16)
2023-01-21T05:13:27.144299564Z     at verifyLogin (/myapp/build/index.js:111:26)
2023-01-21T05:13:27.144303596Z     at action2 (/myapp/build/index.js:479:14)
2023-01-21T05:13:27.144306942Z     at Object.callRouteAction (/myapp/node_modules/@remix-run/server-runtime/dist/data.js:35:14)
2023-01-21T05:13:27.144310339Z     at handleDataRequest (/myapp/node_modules/@remix-run/server-runtime/dist/server.js:116:18)
2023-01-21T05:13:27.144313941Z     at requestHandler (/myapp/node_modules/@remix-run/server-runtime/dist/server.js:48:18)
2023-01-21T05:13:27.144317795Z     at /myapp/node_modules/@remix-run/express/dist/server.js:39:22 {
2023-01-21T05:13:27.144321674Z   clientVersion: '4.6.1',
2023-01-21T05:13:27.144325256Z   errorCode: undefined
2023-01-21T05:13:27.144329396Z }
2023-01-21T05:13:27.146333004Z POST /login?_data=routes%2Flogin 500 - - 5045.256 ms
2023-01-21T05:13:27.229181638Z GET /login?_data=root 200 - - 1.297 ms
2023-01-21T05:14:44.818299223Z GET /login?_data=routes%2Flogin 200 - - 2.002 ms
2023-01-21T05:14:44.819928833Z GET /login?_data=root 200 - - 0.999 ms

2023-01-21T05:15:17.502527331Z PrismaClientInitializationError: 
2023-01-21T05:15:17.502560236Z Invalid `prisma.user.findUnique()` invocation:
2023-01-21T05:15:17.502565036Z 
2023-01-21T05:15:17.502569184Z 
2023-01-21T05:15:17.502573770Z Can't reach database server at `psql-db-zpj7g4hsn3q5e.postgres.database.azure.com`:`5432`
2023-01-21T05:15:17.502577328Z 
2023-01-21T05:15:17.502583345Z Please make sure your database server is running at `psql-db-zpj7g4hsn3q5e.postgres.database.azure.com`:`5432`.
2023-01-21T05:15:17.502586974Z     at RequestHandler.handleRequestError (/myapp/node_modules/@prisma/client/runtime/index.js:34316:13)
2023-01-21T05:15:17.502590850Z     at RequestHandler.request (/myapp/node_modules/@prisma/client/runtime/index.js:34293:12)
2023-01-21T05:15:17.502594398Z     at PrismaClient._request (/myapp/node_modules/@prisma/client/runtime/index.js:35273:16)
2023-01-21T05:15:17.502598911Z     at verifyLogin (/myapp/build/index.js:111:26)
2023-01-21T05:15:17.502603695Z     at action2 (/myapp/build/index.js:479:14)
2023-01-21T05:15:17.502607903Z     at Object.callRouteAction (/myapp/node_modules/@remix-run/server-runtime/dist/data.js:35:14)
2023-01-21T05:15:17.502611587Z     at handleDataRequest (/myapp/node_modules/@remix-run/server-runtime/dist/server.js:116:18)
2023-01-21T05:15:17.502631731Z     at requestHandler (/myapp/node_modules/@remix-run/server-runtime/dist/server.js:48:18)
2023-01-21T05:15:17.502635831Z     at /myapp/node_modules/@remix-run/express/dist/server.js:39:22 {
2023-01-21T05:15:17.502641064Z   clientVersion: '4.6.1',
2023-01-21T05:15:17.502645171Z   errorCode: undefined
2023-01-21T05:15:17.502649064Z }
2023-01-21T05:15:17.504787869Z POST /login?_data=routes%2Flogin 500 - - 5005.932 ms

2023-01-21T05:15:17.594855249Z GET /login?_data=root 200 - - 1.197 ms

Error database connection and migration Prisma step during install

@aaronpowell having issues getting past the DB connection and migration.

Im using sqlexpress and when it asks for the local connection string I am using the following:

sqlserver://localhost\sql2019;initialCatalog=remixAzure;integratedSecurity=true;trustServerCertificate=true;

Hoever I get the following error every time. I have tried with SA password as well. Is there something that I am doing wrong?

Error: Migration engine error:
Error creating a database connection.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! remixAzure-180a@ setup:db: prisma migrate dev
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the remixAzure-180a@ setup:db script.

Could not determine executable to run

When trying to build the Docker image, I get the following error:

#9 71.55 > postinstall
#9 71.55 > npx remix setup node
#9 71.55
#9 71.71 npm WARN using --force Recommended protections disabled.
#9 71.91 npm ERR! could not determine executable to run
#9 71.91
#9 71.91 npm ERR! A complete log of this run can be found in:
#9 71.91 npm ERR!     /root/.npm/_logs/2022-07-08T08_54_42_835Z-debug-0.log
#9 71.92 npm notice
#9 71.92 npm notice New minor version of npm available! 8.11.0 -> 8.13.2
#9 71.92 npm notice Changelog: <https://github.com/npm/cli/releases/tag/v8.13.2>
#9 71.92 npm notice Run `npm install -g [email protected]` to update!
#9 71.92 npm notice
#9 71.92 npm ERR! code 1
#9 71.92 npm ERR! path /myapp
#9 71.92 npm ERR! command failed
#9 71.92 npm ERR! command sh -c npx remix setup node
#9 71.93
#9 71.93 npm ERR! A complete log of this run can be found in:
#9 71.93 npm ERR!     /root/.npm/_logs/2022-07-08T08_53_31_411Z-debug-0.log
------
executor failed running [/bin/sh -c npm install --force --unsafe-perm]: exit code: 1

How can I fix this?

remix v2.2.0 - nginx landing page

Hi,

When using the template with the latest version of remix (2.2.0) and then updating the Dockerfile to node:19-alpine the deployment just stays on the nginx landing page.

I'm not sure where to debug from there if you can point that out it'd be a great help? We're using Azure through foundershub so would prefer to stay with Azure which is made easier with your template (thank you!!) but still challenging!

Andrew

Trouble provisioning database

As we've been accepted into the Microsoft Founders Hub, I am now looking into the migration path we can take to move from Fly.io to Azure.

I've tried following the steps, but when running the provisioning steps I get the following output:

(main) [1] % azd provision                                                                                                       ~/Sites/azure/azure-notes-app

Provisioning Azure resources (azd provision)
Provisioning Azure resources can take some time


  You can view detailed progress in the Azure Portal:
  https://portal.azure.com/#blade/HubsExtension/DeploymentDetailsBlade/overview/id/%2Fsubscriptions%2F7016d301-b77a-4084-83ed-f61ec4c3c495%2Fproviders%2FMicrosoft.Resources%2Fdeployments%2Fazure-notes-app-1684586540

  (✓) Done: Resource group: rg-azure-notes-app
  (✓) Done: Log Analytics workspace: log-6pdjv6yqsrp3w
  (✓) Done: Application Insights: appi-6pdjv6yqsrp3w
  (✓) Done: Portal dashboard: dash-6pdjv6yqsrp3w
  (✓) Done: Container Apps Environment: cae-6pdjv6yqsrp3w
  (x) Failed: Azure Database for PostgreSQL flexible server: psql-db-6pdjv6yqsrp3w
  (✓) Done: Container Registry: cr6pdjv6yqsrp3w

ERROR: deployment failed: failing invoking action 'provision', error deploying infrastructure: deploying to subscription:

Deployment Error Details:
InternalServerError: An unexpected error occured while processing the request. Tracking ID: '2adc0978-33cc-48b6-b4fc-359447d4b1e8'

  |       | Creating/Updating resourcesTraceID: 06dd6919ecb123e5efee779f15834831

When I look into the deployment job in Azure Portal I see the following Failed job, giving a bit of a non-descript error for creating `remix-db`:

{
  "code": "DeploymentFailed",
  "target": "/subscriptions/7016d301-b77a-4084-83ed-f61ec4c3c495/resourceGroups/rg-azure-notes-app/providers/Microsoft.Resources/deployments/db-remix",
  "message": "At least one resource deployment operation failed. Please list deployment operations for details. Please see https://aka.ms/arm-deployment-operations for usage details.",
  "details": [
    {
      "code": "ResourceDeploymentFailure",
      "target": "/subscriptions/7016d301-b77a-4084-83ed-f61ec4c3c495/resourceGroups/rg-azure-notes-app/providers/Microsoft.DBforPostgreSQL/flexibleServers/psql-db-6pdjv6yqsrp3w",
      "message": "The resource write operation failed to complete successfully, because it reached terminal provisioning state 'Failed'.",
      "details": [
        {
          "code": "InternalServerError",
          "message": "An unexpected error occured while processing the request. Tracking ID: '2adc0978-33cc-48b6-b4fc-359447d4b1e8'"
        }
      ]
    }
  ]
}

Required upgrade of msw to avoid error with recent node versions

First thanks a lot for this! I'm not in prod yet, but looking really great so far.

I've followed the Remix tutorial steps with the azure stack. I could not start my server:

npm run dev
Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './lib' is not defined by "exports" in /home/martin/code/beeo/beeoutstanding-remix/node_modules/headers-polyfill/package.json

After some tests I find that the "root culprit" was the msw package. Upgrading from 0.39 to 0.47 (latest) made it work with npm v17

I can provide a (one line) PR if interested.

Unable to run devcontainer on Apple Silicon w/ fix

The default configuration leads to errors when trying to execute line 26 of the Dockerfile:

curl -fsSL https://aka.ms/install-azd.sh | bash

on Apple Silicon Macs. As a workaround, I removed that line to be able to spin up the devcontainer. After it was running, I connected to it, downloaded the linux-arm64 azd binary and placed it in /usr/local/bin. This should be a suitable workaround for others facing the same problem.

AZD deployment sets incorrect secrets for infra/app/web.bicep

The infra/main.parameters.json and infra/app/web.parameters.json have the value of $(secretOrRandomPassword) for the databasePassword and sessionSecret parameters.

If one does not already have a Azure KeyVault setup with those two secrets, azd will generate two different random passwords for the databasePassword and sessionSecret parameters. This causes the app container resource to have the incorrect database password and the remix app will fail to login with the default credentials with a bad username/password error.