{"id":13605159,"url":"https://github.com/aaronpowell/azure-remix-stack","last_synced_at":"2025-07-28T16:31:08.595Z","repository":{"id":39911260,"uuid":"471218701","full_name":"aaronpowell/azure-remix-stack","owner":"aaronpowell","description":"A remix stack template for running a remix app on Azure","archived":false,"fork":false,"pushed_at":"2023-03-29T06:12:32.000Z","size":2648,"stargazers_count":78,"open_issues_count":4,"forks_count":15,"subscribers_count":6,"default_branch":"main","last_synced_at":"2024-11-17T19:44:07.981Z","etag":null,"topics":["azure","remix-stack"],"latest_commit_sha":null,"homepage":"","language":"Bicep","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aaronpowell.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-03-18T03:04:44.000Z","updated_at":"2024-09-30T06:06:20.000Z","dependencies_parsed_at":"2024-11-07T09:35:05.796Z","dependency_job_id":"fa81a1a8-275f-4ece-b02b-15bb499fcc59","html_url":"https://github.com/aaronpowell/azure-remix-stack","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronpowell%2Fazure-remix-stack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronpowell%2Fazure-remix-stack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronpowell%2Fazure-remix-stack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronpowell%2Fazure-remix-stack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aaronpowell","download_url":"https://codeload.github.com/aaronpowell/azure-remix-stack/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227777694,"owners_count":17818455,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["azure","remix-stack"],"created_at":"2024-08-01T19:00:55.280Z","updated_at":"2024-12-03T13:48:25.728Z","avatar_url":"https://github.com/aaronpowell.png","language":"Bicep","readme":"# Azure Remix Stack\n\nA [Remix Stacks](https://remix.run/stacks) template for deploying to Azure. This is based off the [Indie Stack](https://github.com/remix-run/indie-stack) template, but adapted for Azure.\n\n```\nnpx create-remix --template aaronpowell/azure-remix-stack\n```\n\n## What's in the stack\n\n- [Azure Web App for Containers](https://docs.microsoft.com/azure/app-service/quickstart-custom-container?tabs=dotnet\u0026pivots=container-linux\u0026WT.mc_id=javascript-61097-aapowell) with [Docker](https://www.docker.com/) and [Azure Container Registry](https://docs.microsoft.com/azure/container-registry/?WT.mc_id=javascript-61097-aapowell) for container management\n- Production-ready [Azure Database for PostgreSQL](https://azure.microsoft.com/products/postgresql/?WT.mc_id=javascript-61097-aapowell#overview)\n- [GitHub Actions](https://github.com/features/actions) for deploy on merge to production and staging environments\n- Email/Password Authentication with [cookie-based sessions](https://remix.run/docs/en/v1/api/remix#createcookiesessionstorage)\n- Database ORM with [Prisma](https://prisma.io)\n- Styling with [Tailwind](https://tailwindcss.com/)\n- End-to-end testing with [Cypress](https://cypress.io)\n- Local third party request mocking with [MSW](https://mswjs.io)\n- Unit testing with [Vitest](https://vitest.dev) and [Testing Library](https://testing-library.com)\n- Code formatting with [Prettier](https://prettier.io)\n- Linting with [ESLint](https://eslint.org)\n- Static Types with [TypeScript](https://typescriptlang.org)\n- VS Code [Remote Container definition](https://code.visualstudio.com/docs/remote/containers?WT.mc_id=javascript-61097-aapowell) for easy local dev setup\n- [Azure Developer CLI (azd)](https://learn.microsoft.com/azure/developer/azure-developer-cli/overview?WT.mc_id=javascript-61097-aapowell) to provision infrastructure\n\n_Note: you will need an Azure account to deploy this._\n\n## Development\n\n- Initial setup: _If you just generated this project, this step has been done for you._\n\n  ```sh\n  npm run setup\n  ```\n\n- Start dev server:\n\n  ```sh\n  npm run dev\n  ```\n\nThis starts your app in development mode, rebuilding assets on file changes.\n\nThe database seed script creates a new user with some data you can use to get started:\n\n- Email: `aaron.powell@microsoft.com`\n- Password: `AzureRocks!`\n\n## Deployment\n\n### Quick testing\n\nYou can quickly spin up the infrastructure on Azure using `azd`.\n\n1. Initialize your Azure environment (enter a name for the environment, select a subscription and region to deploy to):\n\n   ```sh\n   azd init\n   ```\n\n1. Provision the resources in Azure\n\n   ```sh\n   azd provision\n   ```\n\n1. Deploy from local\n\n   ```sh\n   azd deploy\n   ```\n\n### Deploy with GitHub Actions or Azure Pipelines\n\nOnce you're ready, you can get `azd` to scaffold up a GitHub Action workflow (or Azure Pipelines definition).\n\n1. Scaffold the workflow\n\n   ```sh\n   azd pipeline config\n   ```\n\n1. Commit the generated workflow and push\n\n### Relevant code:\n\nThis 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.\n\n- creating users, and logging in and out [./app/models/user.server.ts](./app/models/user.server.ts)\n- user sessions, and verifying them [./app/session.server.ts](./app/session.server.ts)\n- creating, and deleting notes [./app/models/note.server.ts](./app/models/note.server.ts)\n\n## Deployment\n\nThis Remix Stack comes with two GitHub Actions that handle automatically deploying your app to production and staging environments.\n\nBefore running a deployment, you'll need to provision the [Azure Container Registry](https://docs.microsoft.com/azure/container-registry/?WT.mc_id=javascript-61097-aapowell) and [Azure WebApp for Conitainers](https://docs.microsoft.com/azure/app-service/quickstart-custom-container?tabs=dotnet\u0026pivots=container-linux\u0026WT.mc_id=javascript-61097-aapowell) instances, as well as an [Azure SQL](https://docs.microsoft.com/azure/azure-sql/database/single-database-create-quickstart?tabs=azure-portal\u0026WT.mc_id=javascript-61097-aapowell) database.\n\n_Note: Ensure that the Azure SQL database connection is configured in [app settings](https://docs.microsoft.com/azure/app-service/configure-common?tabs=portal\u0026WT.mc_id=javascript-61097-aapowell) as `DATABASE_URL` for the app to access it._\n\n## GitHub Actions\n\nWe 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.\n\n### Environment Variables\n\nGitHub Actions will need the following secret variables to run:\n\n- `DATABASE_URL`: Connection info for a database to run the Cypress tests again\n- `AZURE_RESGISTRY_URL`: URL of the Azure Container Registry\n- `AZURE_REGISTRY_USERNAME`: Username to authenticate against Azure Container Registry\n- `AZURE_REGISTRY_PASSWORD`: Password to authenticate against Azure Container Registry\n- `AZURE_CLIENT_ID`: Client ID to authenticate against\n- `AZURE_TENANT_ID`: Tenant ID to autnenticate against\n- `AZURE_SUBSCRIPTION_ID`: Subscription that the web app belongs to\n- `AZURE_WEBAPP_NAME`: Name of the app to deploy into\n\n## Testing\n\n### Cypress\n\nWe 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.\n\nWe use [`@testing-library/cypress`](https://testing-library.com/cypress) for selecting elements on the page semantically.\n\nTo 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.\n\nWe have a utility for testing authenticated features without having to go through the login flow:\n\n```ts\ncy.login();\n// you are now logged in as a new user\n```\n\nWe 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:\n\n```ts\nafterEach(() =\u003e {\n  cy.cleanupUser();\n});\n```\n\nThat way, we can keep your connected db clean and keep your tests isolated from one another.\n\n### Vitest\n\nFor lower level tests of utilities and individual components, we use `vitest`. We have DOM-specific assertion helpers via [`@testing-library/jest-dom`](https://testing-library.com/jest-dom).\n\n### Type Checking\n\nThis 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`.\n\n### Linting\n\nThis project uses ESLint for linting. That is configured in `.eslintrc.js`.\n\n### Formatting\n\nWe use [Prettier](https://prettier.io/) for auto-formatting in this project. It's recommended to install an editor plugin (like the [VSCode Prettier plugin](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)) to get auto-formatting on save. There's also a `npm run format` script you can run to format all files in the project.\n\n## License\n\nThe 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.\n","funding_links":[],"categories":["Bicep","Starter","Remix Starter","Stacks"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faaronpowell%2Fazure-remix-stack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faaronpowell%2Fazure-remix-stack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faaronpowell%2Fazure-remix-stack/lists"}