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 Babel (or oxc when used in rolldown-vite) for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

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.

---

Typical Flow:

1. Browser goes to index.html where it imports the main.jsx file
2. In the main.jsx, create a root using ReactDOM.createRoot() method where it takes in docment.getElementById(root) as the parmeter. Additionally, dot call .render() method to render App.jsx functional component in the DOM.
3. App.jsx takes in all the pages and routes, here you set up general format of each page from each placement of functional components.
4. From here for every page/component/route that were to be established, make sure to import and include them into the App.jsx in order to reflect the changes on the DOM.

References

Navigation Bar Ideas

• https://react-bootstrap.github.io/docs/components/navbar

Website Color Schemes

• https://colorhunt.co/palettes/popular

Emoji Source

• https://emojidb.org/work-emojis

Markdown Syntax

• https://docs.readme.com/rdmd/docs/code-blocks

Github Pages (static) Web Hosting

• https://docs.github.com/en/pages
• https://www.geeksforgeeks.org/git/github-pages/

LINK TO FRONT-END:

https://github.com/yangbri1/fullstack_mrs_crud_backend

---

Hosting/Deploying Front-End React to GitHub Pages

1. Install Github Pages package

• (1) npm install gh-pages --save-dev

2. Add script commands to package.json

{
    "homepage": "https://github.io/yangbri1/fullstack_react_spring_boot_frontend",
    "scripts": {
        "predeploy": "npm run build"
        "deploy": "gh-pages -d dist"
    }
}

• (2) Aside: Make sure to include the "homepage" line tp package.json as well
• NOTICE: Here it's .io NOT .com AND username before Github http://<your-username>.github.io/<repository-name>
• Changed this line ...

"deploy": "gh-pages -d build"

• into below in order to not conflict with vite's existing "build" script command

"deploy": "gh-pages -d dist"    ------- **(3)**

3. Set/Add base in vite.config.js file to repository name

Crucial step for when GitHub repo is hosted at http://github.com/yangbri1/fullstack_react_spring_boot_frontend/ & being deployed to GitHub Pages (aka not using custom domain)

**(4)**
import { defineConfig } from 'vite'

// https://vite.dev/config/
export default defineConfig({
  base: '/fullstack_react_spring_boot_frontend/',
})

• Note: Must follow exact notation --- /<repo-name>/
• Otherwise, nothing appears for this customized Github Pages --- Error 404 when inspecting element on browser

4. Push React project upstream to Github (if not already done) ------- (5)

5. Build the project first

Vite generates dist/ folder with static files upon running below command

• (6) npm run build

6. Deploy this React front-end

This command prompts Github to automatically create a branch gh-pages & push dist/ contents to said gh-pages branch

• (7) npm run deploy OR gh-pages -d dist (seen in package.json)
• NOTICE: Different from usual npm run dev w/ vite

7. Enable GitHub Pages option

• 7.1 Navigate to selected repository on Github.com
• 7.2 Click on Settings tab
• 7.3 Find Pages on the left-hand side
• 7.4 Under Source choose Deploy from a branch
• 7.5 Under Branch choose gh-pages (for deployment), /root (folder) & Save ------ (8)

8. Visit hosted Github site

• (9) https://yangbri1.github.io/fullstack_react_spring_boot_frontend/
• IMPORTANT: Sometimes the browser would cache an older version of the app (ex. w/ /main.jsx rather than /fullstack_react-Psring_boot_frontend/main.jsx updated URL path) where a normal F5 refresh does not work ...
• (10) In that case, use the hard reload Ctrl + F5 which re-download everything, ignore cache, & use new vite.config.js base path rather than the default / base path