search

vite-pwa / docs

Documentation: PWA integrations for Vite and the ecosystem
https://vite-pwa-org.netlify.app/
MIT License
196 stars 42 forks source link

docs: add Vercel deployment instructions #155

Closed jb-thery closed 2 months ago

jb-thery commented 2 months ago

This pull request includes necessary updates to deploy our Vite PWA on Vercel efficiently. It introduces a vercel.json configuration file that specifies HTTP headers for optimal caching and security, mirroring some settings typically used with Netlify but adapted for Vercel.

Changes Included

  1. vercel.json Configuration:

    • Added new caching rules for HTML pages, service workers, and assets to enhance load times and user experience.
    • Set up security headers to protect against common vulnerabilities and ensure content integrity.
    • Included rewrites to ensure all requests are routed correctly within our SPA.

  2. Deployment Instructions:

    • Detailed steps on preparing the application, setting up the project on Vercel, and verifying deployment to ensure everything functions as expected.

  3. Clearing the Data Cache:

    • Explained the importance of clearing the data cache in Vercel’s administration panel. This is crucial for addressing issues with stale content or deployment errors, ensuring that each deployment is fresh and free from past configurations or data.

Purpose of This Pull Request

The adjustments to the vercel.json file ensure that our application not only runs more efficiently but also adheres to best practices for web security and performance. The included deployment guide assists any new team members in understanding how to deploy and manage our PWA on Vercel. Additionally, explaining the significance of clearing the data cache helps maintain optimal operation and troubleshoot deployment-related issues effectively.

How to Test

  1. Review the changes in the vercel.json file.
  2. Follow the deployment steps to set up a new environment.
  3. Use the provided Vercel URL post-deployment to check for correct application behavior.
  4. Inspect HTTP headers via browser tools to confirm they are applied as configured.

Expected Benefits

Implementing these changes will lead to improved load times, enhanced security, and a better overall user experience for our users. Clearing the data cache as part of routine maintenance will help prevent issues related to outdated content and configurations, contributing to the stability and reliability of our deployments.

netlify[bot] commented 2 months ago

Deploy Preview for vite-pwa-org ready!

Name Link
Latest commit f4a006a3538f2e5266f1d58babeffc22dc5d5f21
Latest deploy log https://app.netlify.com/sites/vite-pwa-org/deploys/6633e4b17081080008f68c8a
Deploy Preview https://deploy-preview-155--vite-pwa-org.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

userquin commented 2 months ago

Add outline: deep in the md header below the title, this will add h3 heading to the right nav aside