Epigames tutorial page

Setting up

Install dependencies after cloning the repo:

npm install

Building

Compile the React code into standard, browser-ready HTML, CSS, and JavaScript:

npm run build

This will create a new folder called dist in the project directory. The contents of this dist folder are the final, deployable website. Make sure to set the path of the tutorial in the deployed site in the vite.config.js file:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  // This tells Vite exactly where the app will live on example.com
  base: '/path/to/tutorial/', 
})

In this example above, the deployed tutorial will be available at https://example.com/path/to/tutorial/

The tutorial can be tested locally by running with vite:

npm run dev

To preview the static built version of the site off the dist folder, as if were from the deployed site, use the following:

npm run preview

Move the files to the Epidemica website repo

Now, you need to transfer those built files into your existing epidemica-website repository.

• Clone or open your existing epidemica-website repository on your computer.

• Navigate to the epigames folder inside it.

• Create a new folder inside epigames named tutorial (if it doesn't already exist).

• Copy everything from inside the dist folder (from building step) and paste it into the epidemica-website/epigames/tutorial folder. (Note: Make sure you copy the contents inside dist, including the index.html and assets folder, not the dist folder itself).

React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Oxc
• @vitejs/plugin-react-swc uses SWC

React Compiler

The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.

Expanding the ESLint configuration

If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the TS template for information on how to integrate TypeScript and typescript-eslint in your project.