What should be the correct config and scripts for Remix PWA?

[tonyltf]

Hi there, I am trying build an app with Remix + Remix PWA

• I used the template npx create-remix@latest --template remix-run/remix/templates/vite to create the app
• and then install Remix PWS by npx remix-pwa@latest init
• trying to deploy on Fly.io

I could not see a clear guide on remix.config.js and package.json so my files are now like this:

remix.config.js

/** @type {import('@remix-pwa/dev').WorkerConfig} */
module.exports = {
    appDirectory: "app",
    assetsBuildDirectory: "public/build",
    future: {
      /* any enabled future flags */
    },
    ignoredRouteFiles: ["**/*.css"],
    publicPath: "/build/",
    serverBuildPath: "build/index.js",
    // for Remix PWA
    entryWorkerFile: '<appDir>/entry.worker.ts',
    worker: '@remix-pwa/worker-runtime',
    workerName: 'entry.worker',
  };

package.json

{
  "name": "my-app",
  "private": true,
  "sideEffects": false,
  "type": "module",
  "scripts": {
    "build": "run-s build:*",
    "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
    "start": "remix-serve ./build/server/index.js",
    "typecheck": "tsc",
    "build:remix": "remix build",
    "build:worker": "remix-pwa build",
    "dev": "run-p dev:*",
    "dev:remix": "remix vite:dev",
    "dev:worker": "remix-pwa dev"
  },
  "dependencies": {
    "@remix-pwa/cache": "^2.0.12",
    "@remix-pwa/client": "^2.0.1",
    "@remix-pwa/push": "^1.0.9",
    "@remix-pwa/strategy": "^2.1.9",
    "@remix-pwa/sw": "^2.1.12",
    "@remix-pwa/sync": "^2.0.1",
    "@remix-run/node": "^2.8.0",
    "@remix-run/react": "^2.8.0",
    "@remix-run/serve": "^2.8.0",
    "dotenv": "^16.3.1",
    "isbot": "^4.1.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@flydotio/dockerfile": "^0.5.2",
    "@remix-pwa/dev": "2.0.31",
    "@remix-pwa/worker-runtime": "^2.0.8",
    "@remix-run/dev": "^2.8.0",
    "@types/react": "^18.2.20",
    "@types/react-dom": "^18.2.7",
    "@typescript-eslint/eslint-plugin": "^6.7.4",
    "@typescript-eslint/parser": "^6.7.4",
    "eslint": "^8.38.0",
    "eslint-import-resolver-typescript": "^3.6.1",
    "eslint-plugin-import": "^2.28.1",
    "eslint-plugin-jsx-a11y": "^6.7.1",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "glob": "^10.3.10",
    "npm-run-all": "^4.1.5",
    "remix-pwa": "^3.0.19",
    "typescript": "^5.1.6",
    "vite": "^5.1.0",
    "vite-tsconfig-paths": "^4.2.1"
  },
  "engines": {
    "node": ">=18.0.0"
  }
}

Dockerfile

# syntax = docker/dockerfile:1

# Adjust NODE_VERSION as desired
ARG NODE_VERSION=20.11.0
FROM node:${NODE_VERSION}-slim as base

LABEL fly_launch_runtime="Remix"

# Remix app lives here
WORKDIR /app

# Set production environment
ENV NODE_ENV="production"

# Install pnpm
ARG PNPM_VERSION=8.15.4
RUN npm install -g pnpm@$PNPM_VERSION


# Throw-away build stage to reduce size of final image
FROM base as build

# Install packages needed to build node modules
RUN apt-get update -qq && \
    apt-get install --no-install-recommends -y build-essential node-gyp pkg-config python-is-python3

# Install node modules
COPY --link package.json pnpm-lock.yaml ./
RUN pnpm install --frozen-lockfile --prod=false

# Copy application code
COPY --link . .

# Build application
RUN pnpm run build

# Remove development dependencies
RUN pnpm prune --prod


# Final stage for app image
FROM base

# Copy built application
COPY --from=build /app /app

# Start the server by default, this can be overwritten at runtime
EXPOSE 3000
CMD [ "pnpm", "run", "start" ]

• When I run pnpm build && pnpm start, at least the app is working most of the time;
• Sometimes When I deploy on Fly.io or run docker image locally the log shows Error: ENOENT: no such file or directory, stat '/app/build/server/index.js'
• Inside the Image, only /build/index.js ithere

[tonyltf]

Then I changed the package.json script to "start": "remix-serve ./build/index.js", I won't able to start the app

pnpm run start

> my-app@ start /home/tonyltf/dev/my-app
> remix-serve ./build/index.js

Error: Directory import '/home/tonyltf/dev/my-app/node_modules/.pnpm/@[email protected]/node_modules/buffer/' is not supported resolving ES modules imported from /home/tonyltf/dev/my-app/node_modules/.pnpm/@[email protected]/node_modules/@remix-pwa/cache/dist/src/cache.js
Did you mean to import [email protected]/node_modules/buffer/index.js?
    at finalizeResolution (node:internal/modules/esm/resolve:258:11)
    at moduleResolve (node:internal/modules/esm/resolve:917:10)
    at defaultResolve (node:internal/modules/esm/resolve:1130:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:396:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:365:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:240:38)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:85:39)
    at link (node:internal/modules/esm/module_job:84:36)
 ELIFECYCLE  Command failed with exit code 1.

[tonyltf]

Found solution here
remix-pwa/monorepo#112

[ShafSpecs]

It's also possible to use patch-package to patch the cache package yourself. So you don't have the bundle size increase overhead, if you don't mind a few extra KBs, it's fine then