Update documentation for deploying a Vite React application on Cloudflare Pages

[sreeharsha-rav]

Existing documentation URL(s)

https://developers.cloudflare.com/pages/framework-guides/deploy-a-react-site/
https://developers.cloudflare.com/pages/framework-guides/vite/

What changes are you suggesting?

The current documentation for deploying React applications on Cloudflare Pages doesn't specifically address Vite-based React projects. We suggest updating the documentation to include a dedicated section or guide for deploying Vite React applications, with emphasis on Vite version 4.

Why should the docs be changed? What use cases does it support?

1. Vite is becoming increasingly popular for React development due to its speed and efficiency.
2. Vite-based React projects have some specific considerations for deployment that differ from traditional Create React App projects.
3. Users trying to deploy Vite React applications on Cloudflare Pages may encounter issues or confusion without specific guidance.

What is the expected outcome?

Updated documentation that includes:

1. A step-by-step guide for deploying Vite React applications on Cloudflare Pages.
2. Specific configuration settings required for Vite projects (e.g., build command, build output directory).
3. Troubleshooting tips for common issues encountered when deploying Vite React apps.
4. Any performance optimizations or best practices specific to Vite React apps on Cloudflare Pages.

Additional information

• The documentation should specifically mention compatibility with Vite version 4.
• It would be helpful to include a sample wrangler.toml file tailored for Vite React projects.
• Consider adding information about environment variable handling in Vite React projects on Cloudflare Pages.

[dario-piotrowicz]

Hi @sreeharsha-rav 🙂 thank you very much for the issue (and sorry for the late reply 🙇)

As of cloudflare/workers-sdk#6573 create-cloudflare does use create-vite under the hood to scaffold react projects (and no longer create-react-app) basically guiding users to create Vite-based React applications.

So hopefully that already addresses both the 1. and 2. suggested changes, please let me know if you disagree.

(Please note that in our guides we do want to use create-cloudflare directly and not create-vite both for promoting our creation tool and for consistency across all our guides)

Regarding the remaining 2 suggestion points (3. and 4.), I can start creating a section regarding that, I don't have a lot to of content to put there but we can create a light section and grow it over time as needed, would that work for you? and do you have any issue/optimization in mind that we could add?

---

Finally regarding the additional points:

The documentation should specifically mention compatibility with Vite version 4.

I don't understand this suggestion, could you please explain why you believe that mentioning Vite 4 is beneficial? (also note that this is a getting started guide that uses a recent version ofcreate-vite, so it does set up the application using Vite 5)

It would be helpful to include a sample wrangler.toml file tailored for Vite React projects.

create-cloudflare already sets up a wrangler.toml file for you, hopefully that's enough? do you think that also adding it to the guide would be beneficial?

Consider adding information about environment variable handling in Vite React projects on Cloudflare Pages.

I think this could be explained as part of suggestion 3. 🙂

[dario-piotrowicz]

oh... we have some (incorrect) CRA references in our guide 😅 #17499