https://github.com/cloud-gov/pages-example-spa
React SPA using react router
https://github.com/cloud-gov/pages-example-spa
Last synced: 6 months ago
JSON representation
React SPA using react router
- Host: GitHub
- URL: https://github.com/cloud-gov/pages-example-spa
- Owner: cloud-gov
- License: other
- Created: 2023-08-16T13:48:32.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2025-11-19T17:04:15.000Z (8 months ago)
- Last Synced: 2025-11-19T18:17:44.719Z (8 months ago)
- Language: JavaScript
- Size: 1000 KB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
- Codeowners: CODEOWNERS
Awesome Lists containing this project
README
# Single-Page Application hosted on cloud.gov Pages
This repository houses a single-page application hosted on cloud.gov Pages using React and React Router v6. This project is designed to showcase the capabilities of cloud.gov Pages, where you can easily host and deploy your SPAs. React and React Router v6 are the backbone of this application, providing a smooth and dynamic user experience. Explore the code and development setup to see how you can leverage cloud.gov Pages for your own React-based SPAs.
## Getting Started
### Prerequisites for macOS
**Install `node.js` LTS and `npm`**
Homebrew: ```brew install node```
macOS Installer: https://nodejs.org/en/download
**node.js web server**
NPM: ```npm install http-server -g```
***(optional)*** **NVM**
Homebrew: ``` brew install nvm```
## Installation
*Below are steps to run the application locally and then how to push it the Pages platform*
***Disclaimer: When run locally node will serve the application on `localhost:5173` by default. If you have something currently running on this port you do not need to stop it as node will direct you to the next available port with your approval.***
### Locally
1. Run the application locally via `npm`
```npm install```
2. Clone the repository
```git clone git@github.com:cloud-gov/pages-example-spa.git```
3. Run `npm run dev`
### Hosted on cloud.gov Pages
1. Clone the repository
```git clone git@github.com:cloud-gov/pages-example-spa.git```
2. Navigate to your Pages account
3. Go to "Sites" >> "+ADD site"
4. Copy + Paste the repository URL
```https://github.com/cloud-gov/pages-example-spa```
5. Select `node.js` as the site engine
6. Launch and view the site hosted on Pages by clicking the "View Build Link" in the Build History
## Knowledge Base Article Glossary
[`Class extends Component`](https://legacy.reactjs.org/docs/faq-styling.html)
[`render()`](https://react.dev/reference/react-dom/render)
[`class component`](https://react.dev/reference/react/Component)
[`createRoot`](https://react.dev/reference/react-dom/client/createRoot)
[`createRoutersFromElements`](https://reactrouter.com/en/main/utils/create-routes-from-elements)
[``](https://reactrouter.com/en/main/components/routes)
[`path`](https://reactrouter.com/en/main/route/route#path)
[`element`](https://reactrouter.com/en/main/components/routes)
[`RouterProvider`](https://reactrouter.com/en/main/routers/router-provider)
[`Strict Mode`](https://react.dev/reference/react/StrictMode)
[`class Layout extends Component`](https://www.w3schools.com/react/react_class.asp)
[`router`](https://reactrouter.com/en/main/routers/picking-a-router)
[`NavLink`](https://reactrouter.com/en/main/components/nav-link)
[`className`](https://legacy.reactjs.org/docs/faq-styling.html)
[`Outlet`](https://reactrouter.com/en/main/components/outlet)
[`export default Layout`](https://react.dev/learn/importing-and-exporting-components)