Remix PWARemix PWA home page
  1. Journal Stack Home

Remix PWA CLI also got a big upgrade in this update. Much smaller, faster and more concise, the CLI (an ever-evolving tool) is more powerful than ever when it comes to supporting your PWA development workflow.

Remix PWA v4 did away with esbuild, and so did our approach to the CLI. No more remix-pwa init or the likes, everything related to build and development has been transferred to the Vite plugin. The CLI now focuses on providing a quick and easy way to scaffold bits and pieces of your PWA, like a new service worker and a new manifest.

Currently, there are only two main supported commands:

  • manifest: Scaffold a new web manifest resource route for you. With full typings included ;)
  • sw: Scaffold a very basic service worker for you. Doesn't add more boilerplate than needed 👍.

manifest

Generate a web manifest file.

Accepts one of two arguments (one of two, not both!):

  • --js: Generate a JavaScript file with the manifest object.
  • --ts: Generate a TypeScript file with the manifest object (default).
  • --dest: Alias: -d. The destination directory for the manifest file (defaults to: ./app/routes/manifest[.webmanifest].ts)
remix-pwa manifest # defaults to `--ts` behvaiour

remix-pwa manifest --js # generate a JavaScript file

remix-pwa manifest --dest app/pwa/manifest.ts # writes the manifest to `./app/pwa/manifest.ts` directory

Note, it resolves the destination path relative to process.cwd().

You should know!

Scaffolding a manifest is different from registering a manifest. Ensure to still provide a relevant link in your head tag. Or use the <ManifestLink /> component 😉

sw

Alias: service-worker

Generate a service worker file. Alias: service-worker.

Accepts one of the following arguments:

  • --js: Generate a JavaScript file with the service worker.
  • --dest: Alias: -d. The destination directory for the service worker file (defaults to: ./app/entry.worker.ts)
remix-pwa sw # generates a basic TypeScript service worker

remix-pwa sw --js # generates a basic JavaScript service worker

remix-pwa sw --dest app/pwa/service-worker.ts # writes the service worker to `./app/pwa/service-worker.ts` directory

Note, Service Workers are Typescript by default in Remix PWA.

You should know!

If changing the destination for service workers, ensure to update the Vite plugin accordingly.

update

Alias: upgrade

The update command allows you to easily update all or some of the present @remix-pwa/* packages in your project.

It takes in the following arguments:

  • --packages (-p): The packages you want to update, without the @remix-pwa/ prefix. Defaults to all packages
  • --root (-r): The root of the Remix project. Defaults to process.cwd() (current working directory)
  • --dev (-D) 🆕: Update the packages to their latest dev versions. Defaults to false
# updates all packages
npx remix-pwa update

# updates just @remix-pwa/dev & @remix-pwa/sw
npx remix-pwa update -p dev sw

# updates all packages to the latest `dev` versions
# (package@dev)
npx remix-pwa update -D

# updates all packages in the app/remix-app folder
npx remix-pwa update -r ./apps/remix-app

# Valid alias to the `update` command
npx remix-pwa upgrade
Next
Contributing