{"id":13719127,"url":"https://github.com/shamsup/remix-starter-serverless","last_synced_at":"2025-05-07T11:31:11.210Z","repository":{"id":37526191,"uuid":"443172074","full_name":"shamsup/remix-starter-serverless","owner":"shamsup","description":"A template for deploying Remix to AWS with the Serverless framework","archived":false,"fork":false,"pushed_at":"2022-05-17T20:58:38.000Z","size":293,"stargazers_count":116,"open_issues_count":4,"forks_count":12,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-08-04T01:11:50.891Z","etag":null,"topics":["aws-lambda","lambda","remix","remix-run","remix-stack","serverless","serverless-framework","starter-template","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shamsup.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-12-30T19:55:40.000Z","updated_at":"2024-07-16T22:12:13.000Z","dependencies_parsed_at":"2022-07-12T16:21:41.199Z","dependency_job_id":null,"html_url":"https://github.com/shamsup/remix-starter-serverless","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shamsup%2Fremix-starter-serverless","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shamsup%2Fremix-starter-serverless/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shamsup%2Fremix-starter-serverless/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shamsup%2Fremix-starter-serverless/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shamsup","download_url":"https://codeload.github.com/shamsup/remix-starter-serverless/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224592439,"owners_count":17337095,"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":["aws-lambda","lambda","remix","remix-run","remix-stack","serverless","serverless-framework","starter-template","typescript"],"created_at":"2024-08-03T01:00:42.924Z","updated_at":"2024-11-14T08:31:19.305Z","avatar_url":"https://github.com/shamsup.png","language":"TypeScript","funding_links":[],"categories":["Starter"],"sub_categories":[],"readme":"# Welcome to Remix!\n\n- [Remix Docs](https://remix.run/docs)\n- [Serverless Docs](https://www.serverless.com/framework/docs)\n\nThis package is heavily inspired by Remix's Architect starter (`arc` deployment option in `npx create-remix`).\n\n\n## Serverless Setup\n\nWhen deploying to AWS Lambda with the Serverless framework, you'll need:\n\n- Serverless CLI (`sls` or `serverless`)\n- [AWS CLI](https://docs.aws.amazon.com/cli/latest/userguide/install-cliv2.html)\n\nServerless recommends installing the serverless cli globally:\n\n```sh\nnpm i -g serverless\n```\n\n## Development\n\nDuring development, we will use the standard `remix dev` command.\n\n```sh\nnpm run dev\n```\n\nIf you want to use `serverless-offline` with some aspects of your project, you'll need to run that as a separate script, or use something like [concurrently](https://npm.im/concurrently) to run both processes in one command.\n\nOpen up [http://localhost:3000](http://localhost:3000) and you should be ready to go!\n\n## Deploying\n\nBefore you can deploy, you'll need to [install the AWS CLI](https://docs.aws.amazon.com/cli/latest/userguide/install-cliv2.html).\n\nIf you want to use the Serverless Dashboard, you'll need to [configure the Serverless CLI](https://www.serverless.com/framework/docs/getting-started/) and add the `app` key to your `serverless.yml` file.\n\nIf you make it through all of that, you're ready to deploy!\n\n1. build the app for production:\n\n   ```sh\n   npm run build\n   ```\n\n2. Deploy with `sls`\n\n   ```sh\n   sls deploy\n   ```\n\nYou're in business!\n\nThere's a `deploy` script in `package.json` already that will handle both parts if that's your thing.\n\n```sh\n# stage defaults to \"dev\"\nnpm run deploy\n# or\nnpm run deploy -- --stage production\n# or\nyarn deploy --stage production\n```\n\nThe first deployment will take a little while longer because it has to set up the CloudFront distribution, so expect it to take about 5 minutes.\n\nAfter deploying, if you want to visit your CloudFront endpoint, you can run `sls info --verbose` to get the `WebsiteDomain` output from the Cloudformation stack.\n\n## The Result\n\nAfter deploying, you'll have an S3 bucket for storing static assets, your Remix app running in AWS Lambda behind API Gateway, and CloudFront as a CDN in front of both services.\n\n## Limitations and First-deployment configuration\n\nThere is a limitation when using CloudFront with API Gateway that CloudFront cannot forward the `Host` header. This means that there isn't a default way to know which\ndomain a user is requesting from by default. This makes `request.url` in Remix show the API Gateway domain instead of the CloudFront domain, which will be noticeable\nwhen using redirects from actions and loaders or building URLs from the request URL. In order to address this,you need to add the `X-Forwarded-Host` to the origin cache\npolicy for API Gateway. The `@remix-run/architect` adapter will read this header when transforming the API Gateway request for the Remix request handler.\n\n### Overview\n\n1. Deploy the stack\n2. run `sls info --verbose` to get the `WebsiteDomain` from \"Stack  Outputs\"\n2. Copy the WebsiteDomain into `serverless.yml` under `custom \u003e dev \u003e HOST` and uncomment the `OriginCustomHeaders` block for the `RemixOrigin`.\n3. Deploy again\n\n### Deploy the stack for the first time\n\nFollow the [deployment](#Deploying) steps.\n\n### Get the `WebsiteDomain`\n_If you [use a custom domain](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/CNAMEs.html) for your CloudFront distribution, you can skip to the next section._\n\nAfter the deployment completes, run the following in your terminal at the project root:\n\n```sh\nsls info --verbose\n```\n\nYou'll get an output similar to the following:\n\n```\nServerless: Running \"serverless\" installed locally (in service node_modules)\nService Information\nservice: remix-serverless-app\nstage: dev\nregion: us-east-1\nstack: remix-serverless-app-dev\nresources: 16\napi keys:\n  None\nendpoints:\n  ANY - https://xxxxxxxxxxxxx.execute-api.us-east-1.amazonaws.com/{proxy+}\nfunctions:\n  remix: remix-serverless-app-dev-remix\nlayers:\n  None\n\nStack Outputs\nWebsiteDomain: xxxxxxxxxxxx.cloudfront.net\nWebsiteBucketName: remix-serverless-app-dev-websitebucket-somerandomid\nDistributionID: XXXXXXXXXXXX\nHttpApiId: xxxxxxxxxxxxx\nRemixLambdaFunctionQualifiedArn: arn:aws:lambda:us-east-1:xxx:function:remix-serverless-app-dev-remix:1\nServerlessDeploymentBucketName: remix-serverless-app-dev-serverlessdeploymentbuck-xxxxxxxx\nHttpApiUrl: https://xxxxxxxxxxxxx.execute-api.us-east-1.amazonaws.com\n```\n\nFrom this output, copy the `WebsiteDomain` value from the \"Stack Outputs\" section.\n\n\n### Add the X-Forwarded-Host header\n\nIn [serverless.yml](serverless.yml#L15), add paste the copied WebsiteDomain value.\n\n```yml\ncustom:\n  dev:\n    HOST: xxxxxxxxxxxx.cloudfront.net # Replace this value\n```\n\nThen, uncomment the [`OriginCustomHeaders` block](serverless.yml#L148):\n\n```yml\n  OriginCustomHeaders:\n    - HeaderName: X-Forwarded-Host\n      HeaderValue: ${self:${self:provider.stage}.HOST}\n```\n\n### Deploy again!\n\n```sh\n  sls deploy\n  # or npm run deploy\n```\n\nAfter deploying, your Remix app will use the domain from the X-Forwarded-Host header as the domain.\n\nYou'll want to add a domain for the `prod` or any other deployment stages you intend to use as well. If you [configure CloudFront to use a custom domain](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/CNAMEs.html), you will need to use your custom domain as the value instead of the CloudFront default.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshamsup%2Fremix-starter-serverless","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshamsup%2Fremix-starter-serverless","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshamsup%2Fremix-starter-serverless/lists"}