Skip to content

Commit fbd68a5

Browse files
bnusunnybnusunny
committed
Add Remix examples
1 parent 04c71c6 commit fbd68a5

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+26525
-0
lines changed

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -205,6 +205,8 @@ The Lambda Web Adapter also supports all non-HTTP event triggers, such as SQS, S
205205
- [FastHTML in Zip](examples/fasthtml-zip)
206206
- [FastHTML with Response Streaming](examples/fasthtml-response-streaming)
207207
- [FastHTML with Response Streaming in Zip](examples/fasthtml-response-streaming-zip)
208+
- [Remix](examples/remix/)
209+
- [Remix in Zip](examples/remix-zip/)
208210

209211
## Acknowledgement
210212

‎examples/remix-zip/.gitignore‎

Lines changed: 208 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,208 @@
1+
2+
# Created by https://www.toptal.com/developers/gitignore/api/osx,node,linux,windows,sam
3+
# Edit at https://www.toptal.com/developers/gitignore?templates=osx,node,linux,windows,sam
4+
5+
### Linux ###
6+
*~
7+
8+
# temporary files which can be created if a process still has a handle open of a deleted file
9+
.fuse_hidden*
10+
11+
# KDE directory preferences
12+
.directory
13+
14+
# Linux trash folder which might appear on any partition or disk
15+
.Trash-*
16+
17+
# .nfs files are created when an open file is removed but is still being accessed
18+
.nfs*
19+
20+
### Node ###
21+
# Logs
22+
logs
23+
*.log
24+
npm-debug.log*
25+
yarn-debug.log*
26+
yarn-error.log*
27+
lerna-debug.log*
28+
29+
# Diagnostic reports (https://nodejs.org/api/report.html)
30+
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
31+
32+
# Runtime data
33+
pids
34+
*.pid
35+
*.seed
36+
*.pid.lock
37+
38+
# Directory for instrumented libs generated by jscoverage/JSCover
39+
lib-cov
40+
41+
# Coverage directory used by tools like istanbul
42+
coverage
43+
*.lcov
44+
45+
# nyc test coverage
46+
.nyc_output
47+
48+
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
49+
.grunt
50+
51+
# Bower dependency directory (https://bower.io/)
52+
bower_components
53+
54+
# node-waf configuration
55+
.lock-wscript
56+
57+
# Compiled binary addons (https://nodejs.org/api/addons.html)
58+
build/Release
59+
60+
# Dependency directories
61+
node_modules/
62+
jspm_packages/
63+
64+
# TypeScript v1 declaration files
65+
typings/
66+
67+
# TypeScript cache
68+
*.tsbuildinfo
69+
70+
# Optional npm cache directory
71+
.npm
72+
73+
# Optional eslint cache
74+
.eslintcache
75+
76+
# Optional stylelint cache
77+
.stylelintcache
78+
79+
# Microbundle cache
80+
.rpt2_cache/
81+
.rts2_cache_cjs/
82+
.rts2_cache_es/
83+
.rts2_cache_umd/
84+
85+
# Optional REPL history
86+
.node_repl_history
87+
88+
# Output of 'npm pack'
89+
*.tgz
90+
91+
# Yarn Integrity file
92+
.yarn-integrity
93+
94+
# dotenv environment variables file
95+
.env
96+
.env.test
97+
.env*.local
98+
99+
# parcel-bundler cache (https://parceljs.org/)
100+
.cache
101+
.parcel-cache
102+
103+
# Next.js build output
104+
.next
105+
106+
# Nuxt.js build / generate output
107+
.nuxt
108+
dist
109+
110+
# Storybook build outputs
111+
.out
112+
.storybook-out
113+
storybook-static
114+
115+
# rollup.js default build output
116+
dist/
117+
118+
# Gatsby files
119+
.cache/
120+
# Comment in the public line in if your project uses Gatsby and not Next.js
121+
# https://nextjs.org/blog/next-9-1#public-directory-support
122+
# public
123+
124+
# vuepress build output
125+
.vuepress/dist
126+
127+
# Serverless directories
128+
.serverless/
129+
130+
# FuseBox cache
131+
.fusebox/
132+
133+
# DynamoDB Local files
134+
.dynamodb/
135+
136+
# TernJS port file
137+
.tern-port
138+
139+
# Stores VSCode versions used for testing VSCode extensions
140+
.vscode-test
141+
142+
# Temporary folders
143+
tmp/
144+
temp/
145+
146+
### OSX ###
147+
# General
148+
.DS_Store
149+
.AppleDouble
150+
.LSOverride
151+
152+
# Icon must end with two \r
153+
Icon
154+
155+
156+
# Thumbnails
157+
._*
158+
159+
# Files that might appear in the root of a volume
160+
.DocumentRevisions-V100
161+
.fseventsd
162+
.Spotlight-V100
163+
.TemporaryItems
164+
.Trashes
165+
.VolumeIcon.icns
166+
.com.apple.timemachine.donotpresent
167+
168+
# Directories potentially created on remote AFP share
169+
.AppleDB
170+
.AppleDesktop
171+
Network Trash Folder
172+
Temporary Items
173+
.apdisk
174+
175+
### SAM ###
176+
# Ignore build directories for the AWS Serverless Application Model (SAM)
177+
# Info: https://aws.amazon.com/serverless/sam/
178+
# Docs: https://docs.aws.amazon.com/serverless-application-model/latest/developerguide/serverless-sam-reference.html
179+
180+
**/.aws-sam
181+
182+
### Windows ###
183+
# Windows thumbnail cache files
184+
Thumbs.db
185+
Thumbs.db:encryptable
186+
ehthumbs.db
187+
ehthumbs_vista.db
188+
189+
# Dump file
190+
*.stackdump
191+
192+
# Folder config file
193+
[Dd]esktop.ini
194+
195+
# Recycle Bin used on file shares
196+
$RECYCLE.BIN/
197+
198+
# Windows Installer files
199+
*.cab
200+
*.msi
201+
*.msix
202+
*.msm
203+
*.msp
204+
205+
# Windows shortcuts
206+
*.lnk
207+
208+
# End of https://www.toptal.com/developers/gitignore/api/osx,node,linux,windows,sam

‎examples/remix-zip/Makefile‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
build-RemixFunction:
2+
cd remix-app && npm install && npm run build && npm prune --omit=dev
3+
cd remix-app && cp -R build node_modules server.js package.json ../run.sh $(ARTIFACTS_DIR)

‎examples/remix-zip/README.md‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
# remix-zip
2+
3+
This example shows how to use Lambda Adapter to run an Remix application on AWS Lambda.
4+
5+
The Remix application is created using the following command:
6+
7+
```bash
8+
npx create-remix@latest --template remix-run/remix/templates/express
9+
```
10+
11+
### How does it work?
12+
13+
We add Lambda Adapter layer to the function and configure wrapper script.
14+
15+
1. attach Lambda Adapter layer to your function. This layer containers Lambda Adapter binary and a wrapper script.
16+
1. x86_64: `arn:aws:lambda:${AWS::Region}:753240598075:layer:LambdaAdapterLayerX86:23`
17+
2. arm64: `arn:aws:lambda:${AWS::Region}:753240598075:layer:LambdaAdapterLayerArm64:23`
18+
2. configure Lambda environment variable `AWS_LAMBDA_EXEC_WRAPPER` to `/opt/bootstrap`. This is a wrapper script included in the layer.
19+
3. set function handler to a startup command: `run.sh`. The wrapper script will execute this command to boot up your application.
20+
21+
To get more information of Wrapper script, please read Lambda documentation [here](https://docs.aws.amazon.com/lambda/latest/dg/runtimes-modify.html#runtime-wrapper).
22+
23+
### Build and Deploy
24+
25+
Run the following commands to build and deploy the application to lambda. SAM CLI will use GNU Make to build the Remix application.
26+
27+
```bash
28+
sam build
29+
sam deploy --guided
30+
```
31+
When the deployment completes, take note of RemixFunctionApi's Value. It is the API Gateway endpoint URL.
32+
33+
### Verify it works
34+
35+
Open RemixFunctionApi's URL in a browser, you should see the "Weclome to Remix" page.
36+
37+

‎examples/remix-zip/remix-app/.eslintrc.cjs‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
/**
2+
* This is intended to be a basic starting point for linting in your app.
3+
* It relies on recommended configs out of the box for simplicity, but you can
4+
* and should modify this configuration to best suit your team's needs.
5+
*/
6+
7+
/** @type {import('eslint').Linter.Config} */
8+
module.exports = {
9+
root: true,
10+
parserOptions: {
11+
ecmaVersion: "latest",
12+
sourceType: "module",
13+
ecmaFeatures: {
14+
jsx: true,
15+
},
16+
},
17+
env: {
18+
browser: true,
19+
commonjs: true,
20+
es6: true,
21+
},
22+
ignorePatterns: ["!**/.server", "!**/.client"],
23+
24+
// Base config
25+
extends: ["eslint:recommended"],
26+
27+
overrides: [
28+
// React
29+
{
30+
files: ["**/*.{js,jsx,ts,tsx}"],
31+
plugins: ["react", "jsx-a11y"],
32+
extends: [
33+
"plugin:react/recommended",
34+
"plugin:react/jsx-runtime",
35+
"plugin:react-hooks/recommended",
36+
"plugin:jsx-a11y/recommended",
37+
],
38+
settings: {
39+
react: {
40+
version: "detect",
41+
},
42+
formComponents: ["Form"],
43+
linkComponents: [
44+
{ name: "Link", linkAttribute: "to" },
45+
{ name: "NavLink", linkAttribute: "to" },
46+
],
47+
"import/resolver": {
48+
typescript: {},
49+
},
50+
},
51+
},
52+
53+
// Typescript
54+
{
55+
files: ["**/*.{ts,tsx}"],
56+
plugins: ["@typescript-eslint", "import"],
57+
parser: "@typescript-eslint/parser",
58+
settings: {
59+
"import/internal-regex": "^~/",
60+
"import/resolver": {
61+
node: {
62+
extensions: [".ts", ".tsx"],
63+
},
64+
typescript: {
65+
alwaysTryTypes: true,
66+
},
67+
},
68+
},
69+
extends: [
70+
"plugin:@typescript-eslint/recommended",
71+
"plugin:import/recommended",
72+
"plugin:import/typescript",
73+
],
74+
},
75+
76+
// Node
77+
{
78+
files: [".eslintrc.cjs", "server.js"],
79+
env: {
80+
node: true,
81+
},
82+
},
83+
],
84+
};

‎examples/remix-zip/remix-app/.gitignore‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
node_modules
2+
3+
/.cache
4+
/build
5+
.env

‎examples/remix-zip/remix-app/README.md‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
# Welcome to Remix!
2+
3+
- 📖 [Remix docs](https://remix.run/docs)
4+
5+
## Development
6+
7+
Run the dev server:
8+
9+
```shellscript
10+
npm run dev
11+
```
12+
13+
## Deployment
14+
15+
First, build your app for production:
16+
17+
```sh
18+
npm run build
19+
```
20+
21+
Then run the app in production mode:
22+
23+
```sh
24+
npm start
25+
```
26+
27+
Now you'll need to pick a host to deploy it to.
28+
29+
### DIY
30+
31+
If you're familiar with deploying Node applications, the built-in Remix app server is production-ready.
32+
33+
Make sure to deploy the output of `npm run build`
34+
35+
- `build/server`
36+
- `build/client`
37+
38+
## Styling
39+
40+
This template comes with [Tailwind CSS](https://tailwindcss.com/) already configured for a simple default starting experience. You can use whatever css framework you prefer. See the [Vite docs on css](https://vitejs.dev/guide/features.html#css) for more information.

0 commit comments

Comments
 (0)