remotion-dev · JonnyBurger · Nov 1, 2024 · Nov 1, 2024 · Nov 1, 2024 · Nov 1, 2024
diff --git a/packages/create-video/src/patch-readme.ts b/packages/create-video/src/patch-readme.ts
@@ -24,7 +24,7 @@ export const patchReadmeMd = (
 				return getInstallCommand(packageManager);
 			}
 
-			if (c.startsWith('npm start')) {
+			if (c.startsWith('npm run dev')) {
 				return getDevCommand(packageManager, template);
 			}
 

diff --git a/packages/create-video/src/pkg-managers.ts b/packages/create-video/src/pkg-managers.ts
@@ -75,19 +75,19 @@ export const getInstallCommand = (manager: PackageManager) => {
 
 const getStartCommand = (manager: PackageManager) => {
 	if (manager === 'npm') {
-		return `npm start`;
+		return `npm run dev`;
 	}
 
 	if (manager === 'yarn') {
-		return `yarn start`;
+		return `yarn dev`;
 	}
 
 	if (manager === 'pnpm') {
-		return `pnpm start`;
+		return `pnpm run dev`;
 	}
 
 	if (manager === 'bun') {
-		return `bun start`;
+		return `bun run dev`;
 	}
 };
 

diff --git a/packages/docs/docs/contributing/index.mdx b/packages/docs/docs/contributing/index.mdx
@@ -75,14 +75,14 @@ You can start the Testbed using
 
 ```sh
 cd packages/example
-pnpm start
+pnpm run dev
 ```
 
 You can render a test video using
 
 ```sh
 cd packages/example
-pnpm render
+pnpm exec remotion render
 ```
 
 You can run tests using
@@ -99,7 +99,7 @@ You can test changes to [@remotion/player](https://remotion.dev/docs/player) by
 
 ```sh
 cd packages/player-example
-pnpm start
+pnpm run dev
 ```
 
 For information about testing, please consult [TESTING.md](https://github.com/remotion-dev/remotion/blob/main/TESTING.md). Issues and pull requests of all sorts are welcome!

diff --git a/packages/docs/docs/env-variables.mdx b/packages/docs/docs/env-variables.mdx
@@ -2,7 +2,7 @@
 image: /generated/articles-docs-env-variables.png
 id: env-variables
 title: Environment variables
-crumb: "How To"
+crumb: 'How To'
 ---
 
 _Available from v2.1.2._
@@ -16,7 +16,7 @@ If you want to pass an environment variable from the CLI, you need to prefix it
 You can pass environment variables in development mode and while rendering. For example:
 
 ```bash
-REMOTION_MY_VAR=hello_world npm start
+REMOTION_MY_VAR=hello_world npm run dev
 ```
 
 In your project, you can access the variable using `process.env.REMOTION_MY_VAR`.

diff --git a/packages/docs/docs/getting-started.mdx b/packages/docs/docs/getting-started.mdx
@@ -7,8 +7,8 @@ slug: /
 crumb: "Let's begin!"
 ---
 
-import Tabs from "@theme/Tabs";
-import TabItem from "@theme/TabItem";
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
 
 ## Prerequisites
 
@@ -81,7 +81,7 @@ values={[
 After the project has been scaffolded, we recommend to open the project in your text editor and starting the [Remotion Studio](/docs/studio):
 
 ```bash
-npm start
+npm run dev
 ```
 
   </TabItem>

diff --git a/packages/docs/docs/preview.mdx b/packages/docs/docs/preview.mdx
@@ -2,11 +2,11 @@
 image: /generated/articles-docs-preview.png
 title: Preview your video
 id: preview
-crumb: "Timeline basics"
+crumb: 'Timeline basics'
 ---
 
-import Tabs from "@theme/Tabs";
-import TabItem from "@theme/TabItem";
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
 
 You can preview your video by starting the [Remotion Studio](/docs/studio):
 
@@ -20,7 +20,7 @@ values={[
 <TabItem value="Regular templates">
 
 ```bash
-npm start
+npm run dev
 ```
 
   </TabItem>
@@ -45,3 +45,7 @@ A server will be started on port `3000` (or a higher port if it isn't available)
 <img src="/img/timeline.png"></img>
 
 Learn more about the [Remotion Studio](/docs/studio).
+
+:::note
+In older projects, `npm start` was used over `npm run dev`.
+:::
diff --git a/packages/example-without-zod/package.json b/packages/example-without-zod/package.json
@@ -9,7 +9,7 @@
 	"author": "Jonny Burger",
 	"main": "dist/index.js",
 	"scripts": {
-		"start": "remotion preview",
+		"dev": "remotion studio",
 		"render": "remotion render react-svg"
 	},
 	"dependencies": {

diff --git a/packages/example/package.json b/packages/example/package.json
@@ -13,7 +13,7 @@
 	],
 	"scripts": {
 		"formatting": "prettier src --check",
-		"start": "remotion studio --props src/my-props.json",
+		"dev": "remotion studio --props src/my-props.json",
 		"start-bun": "PATCH_BUN_DEVELOPMENT=true bun --bun remotion studio",
 		"start-js": "remotion preview src/entry.jsx",
 		"comps": "remotion compositions",

diff --git a/packages/it-tests/src/templates/publish.ts b/packages/it-tests/src/templates/publish.ts
@@ -28,14 +28,11 @@ const publish = async (template: Template) => {
 		.split('\n')
 		.filter(Boolean);
 
-	const branchName = `${Math.random().toString().replace('0.', '')}`;
-
 	await $`git clone git@github.com:${template.org}/${template.repoName}.git ${workingDir} --depth 1`;
 
 	const defaultBranch = await $`git branch --show-current`
 		.cwd(workingDir)
 		.text();
-	await $`git checkout -b ${branchName}`.cwd(workingDir);
 	const existingFilesInRepo = await $`git ls-files`.cwd(workingDir).quiet();
 	for (const file of existingFilesInRepo.stdout
 		.toString('utf-8')
@@ -64,11 +61,7 @@ const publish = async (template: Template) => {
 	}
 
 	await $`git commit -m "Update template"`.cwd(workingDir);
-	await $`git diff ${defaultBranch.trim()} ${branchName}`
-		.cwd(workingDir)
-		.quiet()
-		.text();
-	await $`git push origin ${branchName}`.cwd(workingDir);
+	await $`git push origin ${defaultBranch.trim()}`.cwd(workingDir);
 };
 
 for (const template of folders) {

diff --git a/packages/studio-server/src/preview-server/get-package-manager.ts b/packages/studio-server/src/preview-server/get-package-manager.ts
@@ -14,25 +14,25 @@ export const lockFilePaths: LockfilePath[] = [
 		path: 'package-lock.json',
 		manager: 'npm',
 		installCommand: 'npm i',
-		startCommand: 'npm start',
+		startCommand: 'npx remotion studio',
 	},
 	{
 		path: 'yarn.lock',
 		manager: 'yarn',
 		installCommand: 'yarn add',
-		startCommand: 'yarn start',
+		startCommand: 'yarn remotion studio',
 	},
 	{
 		path: 'pnpm-lock.yaml',
 		manager: 'pnpm',
 		installCommand: 'pnpm i',
-		startCommand: 'pnpm start',
+		startCommand: 'pnpm exec remotion studio',
 	},
 	{
 		path: 'bun.lockb',
 		manager: 'bun',
 		installCommand: 'bun i',
-		startCommand: 'bun start',
+		startCommand: 'bunx remotion studio',
 	},
 ];
 

diff --git a/packages/template-audiogram/README.md b/packages/template-audiogram/README.md
@@ -46,7 +46,7 @@ npm install
 **Start Preview**
 
 ```console
-npm start
+npm run dev
 ```
 
 **Render video**

diff --git a/packages/template-audiogram/package.json b/packages/template-audiogram/package.json
@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "description": "My Remotion video",
   "scripts": {
-    "start": "remotion studio",
+    "dev": "remotion studio",
     "build": "remotion render Audiogram out/video.mp4",
     "upgrade": "remotion upgrade",
     "test": "eslint src --ext ts,tsx,js,jsx && tsc"

diff --git a/packages/template-blank/README.md b/packages/template-blank/README.md
@@ -22,7 +22,7 @@ npm install
 **Start Preview**
 
 ```console
-npm start
+npm run dev
 ```
 
 **Render video**

diff --git a/packages/template-blank/package.json b/packages/template-blank/package.json
@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "description": "My Remotion video",
   "scripts": {
-    "start": "remotion studio",
+    "dev": "remotion studio",
     "build": "remotion render MyComp out/video.mp4",
     "upgrade": "remotion upgrade",
     "test": "eslint src --ext ts,tsx,js,jsx && tsc"

diff --git a/packages/template-code-hike/README.md b/packages/template-code-hike/README.md
@@ -22,7 +22,7 @@ npm i
 **Start Preview**
 
 ```console
-npm start
+npm run dev
 ```
 
 **Change code snippets**

diff --git a/packages/template-code-hike/package.json b/packages/template-code-hike/package.json
@@ -28,7 +28,7 @@
     "typescript": "5.5.4"
   },
   "scripts": {
-    "start": "remotion studio",
+    "dev": "remotion studio",
     "build": "remotion render Main out/video.mp4",
     "upgrade": "remotion upgrade",
     "test": "eslint src --ext ts,tsx,js,jsx && tsc"

diff --git a/packages/template-helloworld/README.md b/packages/template-helloworld/README.md
@@ -22,7 +22,7 @@ npm install
 **Start Preview**
 
 ```console
-npm start
+npm run dev
 ```
 
 **Render video**

diff --git a/packages/template-helloworld/package.json b/packages/template-helloworld/package.json
@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "description": "My Remotion video",
   "scripts": {
-    "start": "remotion studio",
+    "dev": "remotion studio",
     "build": "remotion render HelloWorld out/video.mp4",
     "upgrade": "remotion upgrade",
     "test": "eslint src --ext ts,tsx,js,jsx && tsc"

diff --git a/packages/template-javascript/README.md b/packages/template-javascript/README.md
@@ -22,7 +22,7 @@ npm install
 **Start Preview**
 
 ```console
-npm start
+npm run dev
 ```
 
 **Render video**

diff --git a/packages/template-javascript/package.json b/packages/template-javascript/package.json
@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "description": "My Remotion video",
   "scripts": {
-    "start": "remotion studio",
+    "dev": "remotion studio",
     "build": "remotion render HelloWorld out/video.mp4",
     "upgrade": "remotion upgrade",
     "test": "eslint src --ext ts,tsx,js,jsx"

diff --git a/packages/template-overlay/README.md b/packages/template-overlay/README.md
@@ -22,7 +22,7 @@ npm i
 **Start Preview**
 
 ```console
-npm start
+npm run dev
 ```
 
 **Render video**

diff --git a/packages/template-overlay/package.json b/packages/template-overlay/package.json
@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "description": "My Remotion video",
   "scripts": {
-    "start": "remotion studio",
+    "dev": "remotion studio",
     "build": "remotion render",
     "upgrade": "remotion upgrade",
     "test": "eslint src --ext ts,tsx,js,jsx && tsc"

diff --git a/packages/template-remix/README.md b/packages/template-remix/README.md
@@ -78,7 +78,7 @@ npm run build
 Start the app in production mode (after build is done):
 
 ```
-npm start
+npm run dev
 ```
 
 Start the Remotion preview:

diff --git a/packages/template-skia/README.md b/packages/template-skia/README.md
@@ -22,7 +22,7 @@ npm install
 **Start Preview**
 
 ```console
-npm start
+npm run dev
 ```
 
 **Render video**
@@ -43,11 +43,11 @@ This template uses a [custom Webpack override](https://www.remotion.dev/docs/web
 
 ```ts
 bundle(entry, () => undefined, {
-	webpackOverride: (config) => enableSkia(config),
+  webpackOverride: (config) => enableSkia(config),
 });
 // or
 deploySite({
-	webpackOverride: (config) => enableSkia(config),
+  webpackOverride: (config) => enableSkia(config),
 });
 ```
 

diff --git a/packages/template-skia/package.json b/packages/template-skia/package.json
@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "description": "My Remotion video",
   "scripts": {
-    "start": "remotion studio",
+    "dev": "remotion studio",
     "build": "remotion render HelloSkia out/video.mp4",
     "upgrade": "remotion upgrade",
     "test": "eslint src --ext ts,tsx,js,jsx && tsc"

diff --git a/packages/template-stargazer/README.md b/packages/template-stargazer/README.md
@@ -28,7 +28,7 @@ npm i
 4. Start the preview:
 
 ```
-npm start
+npm run dev
 ```
 
 5. Open the right sidebar, enter your repo name and click "Render".

diff --git a/packages/template-stargazer/package.json b/packages/template-stargazer/package.json
@@ -2,7 +2,7 @@
   "name": "template-stargazer",
   "version": "1.0.0",
   "scripts": {
-    "start": "remotion studio",
+    "dev": "remotion studio",
     "build": "remotion render main out/Main.mp4 --log verbose",
     "test": "eslint src --ext ts,tsx,js,jsx && tsc"
   },

diff --git a/packages/template-three/README.md b/packages/template-three/README.md
@@ -27,7 +27,7 @@ npm install
 **Start Preview**
 
 ```console
-npm start
+npm run dev
 ```
 
 **Render MP4 video**

diff --git a/packages/template-three/package.json b/packages/template-three/package.json
@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "description": "A React Three Fiber Project",
   "scripts": {
-    "start": "remotion studio",
+    "dev": "remotion studio",
     "build": "remotion render Scene",
     "upgrade": "remotion upgrade",
     "test": "eslint src --ext ts,tsx,js,jsx && tsc"

diff --git a/packages/template-tiktok/README.md b/packages/template-tiktok/README.md
@@ -22,7 +22,7 @@ npm i
 **Start Preview**
 
 ```console
-npm start
+npm run dev
 ```
 
 **Render video**