vite-plugin-pwa: Cryptic error message - looking for some guidance

@userquin -

If you want to get in touch, let’s connect on Discord/Telegram/Slack/Signal (whatever you’re comfortable with)…and I can probably provide you with an example repo/project where we can include/explore anything that’s needed for adding to the docs.

Redirects & hosting an SPA/PWA/SSR app

As noted above ^^, the console lets you take care of redirects + custom headers through the UI, but it’s better to manage your custom headers through your amplify.yml file (sample included below).

For now, the only thing I manually configure through the console, specifically, is redirects. The documentation on this is actually not bad:

https://docs.aws.amazon.com/amplify/latest/userguide/redirects.html

As you can see, there’s a section here called “Redirects for single page web apps (SPA),” and the recommended regex they provide is:

</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json)$)([^.]+$)/>

Redirects for PWAs

I had to slightly tweak this regex, and added |manifest|webmanifest to the match conditions, as shown below:

[
    {
        "source": "</^[^.]+$|\\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|manifest|map|json|webmanifest)$)([^.]+$)/>",
        "target": "/index.html",
        "status": "200",
        "condition": null
    }
]

Configuring custom headers

Here’s a sample amplify.yml (I use most of this with my current vitesse project) with a bunch of cool, less-known/not-widely-discussed settings, including customHeaders, and additional Content-Security-Policy

version: 1
## Define Build ENV vars
env:
  variables:
    AMPLIFY_DIFF_BACKEND: true
    AMPLIFY_DIFF_DEPLOY: true

##! NOTE: WE DO NOT USE PNPM FOR PRODUCTION BUILDS! ALL AMPLIFY BUILDS DEFAULT TO YARN (for now)

## BEGIN Backend
backend:
  phases:
    # NOTE: You can install terraform, serverless framework (sls), etc. and/or include a makefile or
    #       BASH script that you can invoke from here to further extend your deploy automation, but
    #       benefit from having everything run centrally through your amplify build pipeline without
    #       needing more webhooks, build pipelines, or CI/CD automation!
    preBuild:
      commands:
        - nvm install --lts && nvm use --lts
        - npm install -g @aws-amplify/cli@latest

    build:
      commands:
        - amplifyPush --simple
  cache:
    paths:
      - node_modules/**/*

## BEGIN FrontEnd
## We build with YARN because CodeBuild doesn't like PNPM
frontend:
  phases:
    preBuild:
      commands:
        - nvm install --lts
        - nvm use --lts
        - npm install -g yarn
        - yarn
    build:
      commands:
        - yarn build:client:yarn:ssg
        # - yarn build:client:yarn:spa
  artifacts:
    baseDirectory: /packages/client/dist
    files:
      - "**/*"
  cache:
    paths:
      - packages/client/node_modules/**/*
      - node_modules/**/*
  customHeaders:
    - pattern: "**/*"
      headers: # https://infosec.mozilla.org/guidelines/web_security
        - key: "Strict-Transport-Security"
          value: "max-age=31536000; includeSubDomains"
        - key: "X-Content-Type-Options"
          value: "nosniff"
        - key: "X-XSS-Protection"
          value: "1; mode=block"
        - key: "X-Frame-Options"
          value: "DENY"
        - key: "Referrer-Policy"
          value: "same-origin"
        - key: "Feature-Policy"
          value: "microphone 'none'; camera 'none'; notifications 'self'"
        # CSP generated using Laboratory: https://github.com/april/laboratory
        # Caveats
        ## Stripe Elements adds inline JS and iFrame (unsafe-eval, frame-src)
        ## Allows any endpoint hosted on AWS - NOTE: Use custom domains for production
        ### REST and GraphQL have random identifiers so we allow the sub-domain (connect-src)
        ### connect-src doesn't parse cognito-idp.*.amazonaws.com used by Amplify Auth - for prod, use region(s) endpoint
        - key: "Content-Security-Policy"
          value: "'default-src 'none'; connect-src https://*.amazonaws.com; font-src 'self' https://fonts.gstatic.com; frame-src https://js.stripe.com; img-src 'self'; script-src 'self' 'unsafe-eval' https://js.stripe.com/v3/; style-src 'self' https://fonts.googleapis.com/css?family=Raleway 'unsafe-inline' https://fonts.googleapis.com'"

Important Note about “hosting” in Amplify

It’s important to add a note on “hosting” in Amplify. The naming might be slightly confusing, but there are two modes for building/hosting your Amplify app.

1

There’s “Amplify Console” hosting, which is what I use. It’s the default, out-of-the-box hosting provided with Amplify. Just create and connect your Amplify Project to a GitHub repo, and instantly get builds on git push to your repo. It comes with other benefits, like instant (and partial) cache invalidation and “atomic” deployments.

2

Then, there’s Cloudfront + S3 hosting…which is done by running amplify add hosting. It provides “more control” for your deployments…although I’ve honestly never, ever had a reason to use this (and I’m a guy with 12+ years of DevOps/SRE/SysAdmin/Solutions Architecture under my belt, and 6+ years of experience with JS & webapps).

Just to kind of highlight what I mean: I was building a proof-of-concept webapp for Video-on-Demand (use-cases like EdTech, CMS, independent content creation/sharing), file uploads, and variable/adaptive bitrate encoding + streaming…and I did all of that (and more) without ever needing to use this “hosting” mode. I just used the vanilla “Amplify console” hosting, without any issue.

For more info, see the official documentation here: https://docs.amplify.aws/cli/hosting

@userquin - I work at AWS, managing a team of Senior Solutions Architects, specifically for startups. I’d be happy to collaborate/provide my notes and everything I’ve had to do to get vitesse (and the plugins/configuration it comes with) working with Amplify deploys. I’m also a huge fan of @antfu and everything he’s done (and is doing) for the open source community, and more specifically, for the Vue + Vite communities.

I’d love to contribute or collaborate with both of you. I was thinking of writing an article or a deployment guide for getting an end-to-end app + architecture with Vitesse deployed to Amplify in under 30 minutes.

Let me know if you’d like to get in touch.

@armenr It’s already closed;). I’ll ping you when I talk about this with antfu and let’s see how we can rearrange the documents, see you and thx.

@userquin - Thank you for pointing out that very obvious question. Honestly, I’m kinda embarrassed that I didn’t do that before asking my stupid question. 😃

Amplify has added better support for redirects - so there’s a regex you have to pass for most SPAs

Source Address: </^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json)$)([^.]+$)/> is the common pattern Target Address: /index.html Type: `200 (Rewrite)

After grabbing a copy of what the browser is receiving as “manifest.webmanifest” I realized this was a rewrite problem.

The fix was to add webmanifest to the piped regex terms -->

</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|manifest|map|json|webmanifest)$)([^.]+$)/> ^^ notice that I added webmanifest to the end of the matched strings.

That fixed it! Thank you for jumping on this so quickly @userquin

@armenr see this issue when deploying on netlify https://github.com/antfu/vite-plugin-pwa/issues/23#issuecomment-776761561 and https://github.com/antfu/vite-plugin-pwa/issues/23#issuecomment-776766783, maybe AWS Amplify has the same problem.

You should see its docs to see how to add the mime for manifest.webmanifest.