fix(starter): Avoid using npx in scripts (#1200)

Removes `npx` from the example scripts as npx [will fetch a remote
package](https://docs.npmjs.com/cli/v8/commands/npx) by default if a
local one is not found.

There was an issue raised by someone who was running `npx pg-migrations
blah blah` without the appropriate @databases/pg-migrations package
installed which led to `npx` downloading the wrong `pg-migrations`
package leading to confusing red herring errors.

This way it ensures that scripts require the dependencies to be
installed to run, and that they run with the specified versions.

.changeset/selfish-rocks-appear.md

@@ -0,0 +1,5 @@
+---
+"create-electric-app": patch
+---
+
+Remove usage of `npx` in template scripts to ensure correct package is used.

examples/checkout/package.json

@@ -12,7 +12,7 @@
     "backend:down": "cd ./backend && docker compose -f docker-compose.yml -f ./dev/docker-compose.dev.yml down -v --remove-orphans",
     "client:generate": "electric-sql generate --service http://localhost:5133 --proxy postgresql://prisma:proxy_password@localhost:65432/postgres",
     "client:watch": "npm run client:generate --watch",
-    "db:migrate": "electric-sql with-config \"npx pg-migrations apply --database {{ELECTRIC_PROXY}} --directory ./db/migrations\"",
+    "db:migrate": "electric-sql with-config \"pg-migrations apply --database {{ELECTRIC_PROXY}} --directory ./db/migrations\"",
     "db:load-data": "node ./db/load-data.js",
     "dev": "vite",
     "build": "tsc && vite build",

examples/expo/package.json

@@ -5,15 +5,15 @@
   "license": "Apache-2.0",
   "main": "node_modules/expo/AppEntry.js",
   "scripts": {
-    "backend:start": "npx electric-sql start --with-postgres",
-    "backend:stop": "npx electric-sql stop",
-    "backend:up": "npx electric-sql start --with-postgres --detach",
-    "backend:down": "npx electric-sql stop --remove",
-    "client:generate": "npx electric-sql generate",
-    "client:watch": "npx electric-sql generate --watch",
-    "db:migrate": "npx electric-sql with-config \"npx pg-migrations apply --database {{ELECTRIC_PROXY}} --directory ./db/migrations\"",
-    "db:psql": "npx electric-sql psql",
-    "electric:start": "npx electric-sql start",
+    "backend:start": "electric-sql start --with-postgres",
+    "backend:stop": "electric-sql stop",
+    "backend:up": "electric-sql start --with-postgres --detach",
+    "backend:down": "electric-sql stop --remove",
+    "client:generate": "electric-sql generate",
+    "client:watch": "electric-sql generate --watch",
+    "db:migrate": "electric-sql with-config \"npx pg-migrations apply --database {{ELECTRIC_PROXY}} --directory ./db/migrations\"",
+    "db:psql": "electric-sql psql",
+    "electric:start": "electric-sql start",
     "start": "expo start",
     "start:android": "expo start --android",
     "start:ios": "expo start --ios"

examples/ionic-demo/package.json

@@ -4,15 +4,15 @@
   "version": "0.9.4",
   "type": "module",
   "scripts": {
-    "backend:start": "npx electric-sql start --with-postgres",
-    "backend:stop": "npx electric-sql stop",
-    "backend:up": "npx electric-sql start --with-postgres --detach",
-    "backend:down": "npx electric-sql stop --remove",
-    "client:generate": "npx electric-sql generate",
-    "client:watch": "npx electric-sql generate --watch",
-    "db:migrate": "npx electric-sql with-config \"npx pg-migrations apply --database {{ELECTRIC_PROXY}} --directory ./db/migrations\"",
-    "db:psql": "npx electric-sql psql",
-    "electric:start": "npx electric-sql start",
+    "backend:start": "electric-sql start --with-postgres",
+    "backend:stop": "electric-sql stop",
+    "backend:up": "electric-sql start --with-postgres --detach",
+    "backend:down": "electric-sql stop --remove",
+    "client:generate": "electric-sql generate",
+    "client:watch": "electric-sql generate --watch",
+    "db:migrate": "electric-sql with-config \"pg-migrations apply --database {{ELECTRIC_PROXY}} --directory ./db/migrations\"",
+    "db:psql": "electric-sql psql",
+    "electric:start": "electric-sql start",
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview",
@@ -21,7 +21,7 @@
     "lint": "eslint",
     "typecheck": "tsc --noEmit --skipLibCheck",
     "format": "prettier --write --loglevel warn .",
-    "make-icons": "npx @capacitor/assets generate"
+    "make-icons": "@capacitor/assets generate"
   },
   "dependencies": {
     "@capacitor-community/sqlite": "^5.6.2",

examples/linearlite/package.json

@@ -4,19 +4,19 @@
   "license": "Apache-2.0",
   "type": "module",
   "scripts": {
-    "backend:start": "npx electric-sql start --with-postgres",
-    "backend:stop": "npx electric-sql stop",
-    "backend:up": "npx electric-sql start --with-postgres --detach",
-    "backend:down": "npx electric-sql stop --remove",
-    "client:generate": "npx electric-sql generate",
-    "client:watch": "npx electric-sql generate --watch",
-    "db:migrate": "npx electric-sql with-config \"npx pg-migrations apply --database {{ELECTRIC_PROXY}} --directory ./db/migrations\"",
-    "db:psql": "npx electric-sql psql",
+    "backend:start": "electric-sql start --with-postgres",
+    "backend:stop": "electric-sql stop",
+    "backend:up": "electric-sql start --with-postgres --detach",
+    "backend:down": "electric-sql stop --remove",
+    "client:generate": "electric-sql generate",
+    "client:watch": "electric-sql generate --watch",
+    "db:migrate": "electric-sql with-config \"pg-migrations apply --database {{ELECTRIC_PROXY}} --directory ./db/migrations\"",
+    "db:psql": "electric-sql psql",
     "db:load-data": "node ./db/load_data.js",
     "db:process-data": "node ./db/process_data.js",
     "db:truncate": "node ./db/truncate.js",
     "db:reload-data": "npm run db:truncate && npm run db:load-data",
-    "electric:start": "npx electric-sql start",
+    "electric:start": "electric-sql start",
     "reset": "npm run backend:down && npm run backend:up && sleep 5 && npm run db:migrate && npm run client:generate && npm run db:load-data",
     "dev": "vite",
     "start": "npm run dev",

examples/react-native/package.json

@@ -4,15 +4,15 @@
   "author": "ElectricSQL",
   "license": "Apache-2.0",
   "scripts": {
-    "backend:start": "npx electric-sql start --with-postgres",
-    "backend:stop": "npx electric-sql stop",
-    "backend:up": "npx electric-sql start --with-postgres --detach",
-    "backend:down": "npx electric-sql stop --remove",
-    "client:generate": "npx electric-sql generate",
-    "client:watch": "npx electric-sql generate --watch",
-    "db:migrate": "npx electric-sql with-config \"npx pg-migrations apply --database {{ELECTRIC_PROXY}} --directory ./db/migrations\"",
-    "db:psql": "npx electric-sql psql",
-    "electric:start": "npx electric-sql start",
+    "backend:start": "electric-sql start --with-postgres",
+    "backend:stop": "electric-sql stop",
+    "backend:up": "electric-sql start --with-postgres --detach",
+    "backend:down": "electric-sql stop --remove",
+    "client:generate": "electric-sql generate",
+    "client:watch": "electric-sql generate --watch",
+    "db:migrate": "electric-sql with-config \"pg-migrations apply --database {{ELECTRIC_PROXY}} --directory ./db/migrations\"",
+    "db:psql": "electric-sql psql",
+    "electric:start": "electric-sql start",
     "pods:install": "cd ios && bundle install && bundle exec pod install && cd ..",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
     "start": "react-native start",

examples/recipes/package.json

@@ -10,10 +10,10 @@
     "backend:stop": "npm run backend:compose stop",
     "backend:up": "npm run backend:compose up -- --detach",
     "backend:down": "npm run backend:compose down -- --volumes",
-    "client:generate": "npx electric-sql generate",
-    "client:watch": "npx electric-sql generate --watch",
-    "db:migrate": "npx electric-sql with-config \"npx pg-migrations apply --database {{ELECTRIC_PROXY}} --directory ./db/migrations\"",
-    "db:psql": "npx electric-sql psql",
+    "client:generate": "electric-sql generate",
+    "client:watch": "electric-sql generate --watch",
+    "db:migrate": "electric-sql with-config \"pg-migrations apply --database {{ELECTRIC_PROXY}} --directory ./db/migrations\"",
+    "db:psql": "electric-sql psql",
     "dev": "vite",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",

examples/tauri-sqlite/package.json

@@ -4,15 +4,15 @@
   "author": "ElectricSQL",
   "type": "module",
   "scripts": {
-    "backend:start": "npx electric-sql start --with-postgres",
-    "backend:stop": "npx electric-sql stop",
-    "backend:up": "npx electric-sql start --with-postgres --detach",
-    "backend:down": "npx electric-sql stop --remove",
-    "client:generate": "npx electric-sql generate",
-    "client:watch": "npx electric-sql generate --watch",
-    "db:migrate": "npx electric-sql with-config \"npx pg-migrations apply --database {{ELECTRIC_PROXY}} --directory ./db/migrations\"",
-    "db:psql": "npx electric-sql psql",
-    "electric:start": "npx electric-sql start",
+    "backend:start": "electric-sql start --with-postgres",
+    "backend:stop": "electric-sql stop",
+    "backend:up": "electric-sql start --with-postgres --detach",
+    "backend:down": "electric-sql stop --remove",
+    "client:generate": "electric-sql generate",
+    "client:watch": "electric-sql generate --watch",
+    "db:migrate": "electric-sql with-config \"pg-migrations apply --database {{ELECTRIC_PROXY}} --directory ./db/migrations\"",
+    "db:psql": "electric-sql psql",
+    "electric:start": "electric-sql start",
     "dev": "vite",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",