Skip to content

Commit 7af8fcb

Browse files
JonnyBurgerJonnyBurger
committed
update commands
1 parent f80b29b commit 7af8fcb

4 files changed

Lines changed: 107 additions & 51 deletions

File tree

‎README.md‎

Lines changed: 83 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,8 @@
33
- [Remix Docs](https://remix.run/docs)
44
- [Remotion Docs](https://remotion.dev/docs)
55

6-
## This template:
7-
86
This is a [Remix starter kit](https://remix.run/docs) with [Remotion](https://remotion.dev), [`@remotion/player`](https://remotion.dev/player) and [`@remotion/lambda`](https://remotion.dev/lambda) built in.
9-
It lets you render a video from a remix app with Amazon Lambda.
7+
It lets you render a video from a Remix app with AWS Lambda.
108

119
Check the online version here: [https://remotion-remix-template.vercel.app/](https://remotion-remix-template.vercel.app/)
1210

@@ -16,49 +14,107 @@ https://user-images.githubusercontent.com/11575645/195991193-f854448a-cdf1-4d61-
1614

1715
## Getting started
1816

19-
Clone the repository and install dependencies using `npm i`.
17+
Install dependencies using
18+
19+
<!-- create-video will replace this with the package manager specific command -->
2020

21-
> If you prefer to use Yarn, run `yarn`.
22-
> If you prefer to use pnpm, run `pnpm i`.
21+
```
22+
npm install
23+
```
2324

24-
Run the example app using `npm run dev`.
25+
## Run the Remix app
26+
27+
Run the example app using:
28+
29+
```
30+
npm run dev
31+
```
32+
33+
## Edit the video
34+
35+
Start the Remotion Preview (the editor interface) using:
36+
37+
```
38+
npm run remotion:preview
39+
```
2540

26-
## Set up rendering via AWS Lambda
41+
## Render videos with AWS Lambda
2742

28-
1. Follow the [Remotion Lambda setup guide](https://www.remotion.dev/docs/lambda/setup).
43+
Follow these steps to set up video rendering:
44+
45+
1. Follow the steps in [Remotion Lambda setup guide](https://www.remotion.dev/docs/lambda/setup).
2946
2. Rename the `.env.example` file to `.env`.
3047
3. Fill in the `REMOTION_AWS_ACCESS_KEY_ID` and `REMOTION_AWS_SECRET_ACCESS_KEY` values that you got from the first step.
31-
4. Run
48+
4. Run the following to generate a [Serve URL](https://www.remotion.dev/docs/terminology#serve-url) and use it to fill in the `REMOTION_AWS_SERVE_URL` value:
3249

3350
```
34-
npm run remotion:lambda:site:update
51+
npm run remotion:deploysite
3552
```
3653

37-
to generate a [Serve URL](https://www.remotion.dev/docs/terminology#serve-url) and use it to fill in the `REMOTION_AWS_SERVE_URL` value.
38-
39-
5. Run
54+
5. Run the following [to deploy a Lambda function](https://www.remotion.dev/docs/lambda/cli/functions#deploy) and fill in the function name as `REMOTION_AWS_FUNCTION_NAME`.
4055

4156
```
42-
remotion:lambda:function:deploy
57+
npm run remotion:deployfunction
4358
```
4459

4560
6. Restart the Remix server.
4661

47-
to deploy a Lambda function and fill in the function name as `REMOTION_AWS_FUNCTION_NAME`.
48-
49-
## Scripts
62+
## Commands
5063

5164
### Remix
5265

53-
- `yarn build` - build the app
54-
- `yarn dev` - start the app in development mode
55-
- `yarn start` - start the app in production mode
66+
Start the app in development mode:
67+
68+
```
69+
npm run dev
70+
```
71+
72+
Build the app:
73+
74+
```
75+
npm run build
76+
```
77+
78+
Start the app in production mode (after build is done):
79+
80+
```
81+
npm start
82+
```
5683

5784
### Remotion
5885

59-
- `yarn remotion:start`: start the remotion preview
60-
- `yarn remotion:build`: render the example video
61-
- `yarn remotion:upgrade`: upgrade all Remotion packages
62-
- `yarn remotion:lambda:build`: render the video with lambda
63-
- `yarn remotion:lambda:function:deploy`: deploy the AWS lambda function
64-
- `yarn remotion:lambda:site:update`: update the AWS lambda site
86+
Start the Remotion preview:
87+
88+
```
89+
npm run remotion:preview
90+
```
91+
92+
Render the example video localle:
93+
94+
```
95+
npm run remotion:render
96+
```
97+
98+
Upgrade all Remotion packages:
99+
100+
```
101+
npm run remotion:upgrade
102+
```
103+
104+
Render the example video on AWS Lambda:
105+
106+
```
107+
npm run remotion:renderlambda
108+
```
109+
110+
(Re-)Deploy the AWS lambda function:
111+
112+
```
113+
npm run remotion:deployfunction
114+
```
115+
116+
Deploy/Update the Remotion video on S3:
117+
118+
```
119+
npm run remotion:deploysite
120+
```

app/remotion/index.tsx renamed to app/remotion/index.ts

File renamed without changes.

‎package.json‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@
55
"dev": "remix dev",
66
"start": "remix-serve build",
77
"test": "eslint app --ext ts,tsx,js,jsx && tsc",
8-
"remotion:start": "remotion preview app/remotion/index.tsx",
9-
"remotion:build": "remotion render app/remotion/index.tsx LogoAnimation out/logo-animation.mp4",
8+
"remotion:preview": "remotion preview app/remotion/index.ts",
9+
"remotion:render": "remotion render app/remotion/index.ts LogoAnimation out/logo-animation.mp4",
1010
"remotion:upgrade": "remotion upgrade",
11-
"remotion:lambda:build": "npx remotion lambda render [[Function name]] LogoAnimation out/logo-animation-lambda-rendered.mp4",
12-
"remotion:lambda:function:deploy": "npx remotion lambda functions deploy",
13-
"remotion:lambda:site:update": "npx remotion lambda sites create app/remotion/index.tsx --site-name=remotion-remix-example"
11+
"remotion:renderlambda": "remotion lambda render remotion-remix-example LogoAnimation out/logo-animation-lambda-rendered.mp4",
12+
"remotion:deployfunction": "remotion lambda functions deploy",
13+
"remotion:deploysite": "remotion lambda sites create app/remotion/index.ts --site-name=remotion-remix-example"
1414
},
1515
"dependencies": {
1616
"@remix-run/node": "^1.7.2",

‎tsconfig.json‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
{
2-
"include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
3-
"compilerOptions": {
4-
"lib": ["DOM", "DOM.Iterable", "ES2019"],
5-
"isolatedModules": true,
6-
"esModuleInterop": true,
7-
"jsx": "react-jsx",
8-
"moduleResolution": "node",
9-
"resolveJsonModule": true,
10-
"target": "ES2019",
11-
"strict": true,
12-
"allowJs": true,
13-
"forceConsistentCasingInFileNames": true,
14-
"noImplicitAny": true,
15-
"noUnusedLocals": true,
16-
"noUnusedParameters": true,
17-
// Remix takes care of building everything in `remix build`.
18-
"noEmit": true,
19-
"skipLibCheck": true
20-
}
2+
"include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
3+
"compilerOptions": {
4+
"lib": ["DOM", "DOM.Iterable", "ES2019"],
5+
"isolatedModules": true,
6+
"esModuleInterop": true,
7+
"jsx": "react-jsx",
8+
"moduleResolution": "node",
9+
"resolveJsonModule": true,
10+
"target": "ES2019",
11+
"strict": true,
12+
"allowJs": true,
13+
"forceConsistentCasingInFileNames": true,
14+
"noImplicitAny": true,
15+
"noUnusedLocals": true,
16+
"noUnusedParameters": true,
17+
"noEmit": true,
18+
"skipLibCheck": true,
19+
"baseUrl": "."
20+
}
2121
}

0 commit comments

Comments
 (0)