README.md

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 [email protected]:cloud-gov/pages-example-spa.git
3. Run npm run dev

Hosted on cloud.gov Pages

1. Clone the repository git clone [email protected]: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 <class name> extends Component

render()

class component

createRoot

createRoutersFromElements

<Route>

path

element

RouterProvider

Strict Mode

class Layout extends Component

router

NavLink

className

Outlet

export default Layout