Deploy a Vite 3 site
Cloudflare Pages has native support for Vite 3 projects. Refer to the blog post on , including sub-second build initialization, for more information on using Vite 3 and Cloudflare Pages to optimize your application’s build tooling.
In this guide, you will learn how to start a new project using Vite 3, and deploy it to Cloudflare Pages.
$ npm create vite@latest✔ Project name: … vite-on-pages✔ Select a framework: › vue✔ Select a variant: › vueScaffolding project in ~/src/vite-on-pages...Done. Now run:cd vite-on-pagesnpm installnpm run dev
$ git initInitialized empty Git repository in ~/vite-vue3-on-pages/.git/$ git add .$ git commit -m "Initial commit" vite-vue3-on-pages/git/main +[main (root-commit) dad4177] Initial commit14 files changed, 1452 insertions(+)$ gh repo create✓ Created repository kristianfreeman/vite-vue3-on-pages on GitHub✓ Added remote [email protected]:kristianfreeman/vite-vue3-on-pages.git$ git push
To deploy your site to Pages:
- Log in to the and select your account.
- In Account Home, select Workers & Pages > Create application > Pages > Connect to Git.
- Select your new GitHub repository.
- In the Set up builds and deployments, set
npm run buildas the Build command, and
distas the Build output directory.
After completing configuration, select Save and Deploy.
You will see your first deploy pipeline in progress. Pages installs all dependencies and builds the project as specified. After you have deployed your project, it will be available at the
<YOUR_PROJECT_NAME>.pages.dev subdomain. Find your project’s subdomain in Workers & Pages > select your Pages project > Deployments.
Cloudflare Pages will automatically rebuild your project and deploy it on every new pushed commit.
Additionally, you will have access to , which repeat the build-and-deploy process for pull requests. With these, you can preview changes to your project with a real URL before deploying them to production.