How to add a new page to a ViteJS project
A step by step guide on adding pages (i.e. multiple entry points) in a ReactJS and ViteJS project.
We recommend that you clone our Open Source React, Typescript & ViteJS Starter Project, checking out the main branch and carrying out the steps below. The changes can be found on the tutorial/entry-points branch.
git clone git@github.com:delasign/reactjs-3js-vitejs-starter-project.git
Step One: Setup the Project
Follow the tutorial below to learn how to setup a ViteJS project to work with GLSL, ReactJS, Typescript & ThreeJS.
Step Two: Create the page
Copy the index.html, App.css, App.tsx, index.css and main.tsx into a new folder within the source folder.
Make sure that the src of the index.html file to point to the new main.tsx file of the folder. We also strongly suggest that you update the meta title of the page.
Step Three: Create the Entry Point
In the vite.config.ts, add the root to the top of the configuration definition.
Beneath it, within the build options, add the rollupOptions which must include the inputs (i.e. entry points).
Each of these inputs is a page (i.e. entry point), where "main" is the "index.html" and the others must match a location of a page that you created within the ViteJS project.
Step Four: Test
Run the app and confirm that the entry points work as expected.
Looking to learn more about ReactJS and ViteJS ?
Search our blog to find educational content on learning how to use ReactJS and ViteJS.