From ebfca5234e08f7c9c00f7fef5af7b8a2b1e3f577 Mon Sep 17 00:00:00 2001 From: Ephraim Gross <103453764+Ephraim-G@users.noreply.github.com> Date: Thu, 2 Nov 2023 14:13:39 -0400 Subject: [PATCH 1/7] Update _kbarticlespages/single-page-application.md Co-authored-by: Sven Aas <12150+svenaas@users.noreply.github.com> --- _kbarticlespages/single-page-application.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_kbarticlespages/single-page-application.md b/_kbarticlespages/single-page-application.md index f29fdc8de..b3de1e284 100644 --- a/_kbarticlespages/single-page-application.md +++ b/_kbarticlespages/single-page-application.md @@ -7,7 +7,7 @@ excerpt: ## Intro -cloud.gov Pages hosts static sites, but this doesn’t mean that developers are limited to only using [“static site generators”](https://jamstack.org/generators/): anything that can be compiled down into HTML can be run on Pages. You can use single-page application frameworks like Vue.js, Svelte, Angular, or React etc. and host it seamlessly on the Pages platform. This is achieved via the `npm run pages` command which allows developers to add a custom build script, and we’ll automatically publish everything in the `_site` folder. Details on utilizing a custom build script will be covered later in the article. +cloud.gov Pages hosts static sites, but this doesn’t mean that developers are limited to only using [“static site generators”](https://jamstack.org/generators/): anything that can be compiled down into HTML can be run on Pages. You can use a single-page application framework like Vue.js, Svelte, Angular, React, etc. and host it seamlessly on the Pages platform. This is achieved via the `npm run pages` command which allows developers to add a custom build script, and we’ll automatically publish everything in the `_site` folder. Details on utilizing a custom build script will be covered later in the article. In this example we will be taking a look at a simple single-page application which uses the React library and React Router v6. You can view a repository with a full example here and see the results in Pages [here](https://federalist-01aa8660-8aca-452d-a270-5e58ffa18645.sites.pages.cloud.gov/site/ephraim-g/react_spa4/). There are also more detailed instructions on how to run this locally in the repositories’ README.md. This article serves a high level overview and will highlight three key features: From 2e060f42cb8eae14bc5cdbffe5ae0b97936dfff8 Mon Sep 17 00:00:00 2001 From: Ephraim Gross <103453764+Ephraim-G@users.noreply.github.com> Date: Thu, 2 Nov 2023 14:13:49 -0400 Subject: [PATCH 2/7] Update _kbarticlespages/single-page-application.md Co-authored-by: Sven Aas <12150+svenaas@users.noreply.github.com> --- _kbarticlespages/single-page-application.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_kbarticlespages/single-page-application.md b/_kbarticlespages/single-page-application.md index b3de1e284..a7e8cc5d7 100644 --- a/_kbarticlespages/single-page-application.md +++ b/_kbarticlespages/single-page-application.md @@ -9,7 +9,7 @@ excerpt: cloud.gov Pages hosts static sites, but this doesn’t mean that developers are limited to only using [“static site generators”](https://jamstack.org/generators/): anything that can be compiled down into HTML can be run on Pages. You can use a single-page application framework like Vue.js, Svelte, Angular, React, etc. and host it seamlessly on the Pages platform. This is achieved via the `npm run pages` command which allows developers to add a custom build script, and we’ll automatically publish everything in the `_site` folder. Details on utilizing a custom build script will be covered later in the article. -In this example we will be taking a look at a simple single-page application which uses the React library and React Router v6. You can view a repository with a full example here and see the results in Pages [here](https://federalist-01aa8660-8aca-452d-a270-5e58ffa18645.sites.pages.cloud.gov/site/ephraim-g/react_spa4/). There are also more detailed instructions on how to run this locally in the repositories’ README.md. This article serves a high level overview and will highlight three key features: +In this example we will be taking a look at a simple single-page application which uses the React library and React Router v6. You can view a repository with a full example here and see the results in Pages [here](https://federalist-01aa8660-8aca-452d-a270-5e58ffa18645.sites.pages.cloud.gov/site/ephraim-g/react_spa4/). There are also more detailed instructions on how to run this locally in the repositories’ README.md. This article serves as a high level overview and will highlight three key features: * Application routing * Environment variables From dfdce8b380b9107a1c8523c231ccc6bdfb7afe92 Mon Sep 17 00:00:00 2001 From: Ephraim Gross <103453764+Ephraim-G@users.noreply.github.com> Date: Thu, 2 Nov 2023 14:13:58 -0400 Subject: [PATCH 3/7] Update _kbarticlespages/single-page-application.md Co-authored-by: Sven Aas <12150+svenaas@users.noreply.github.com> --- _kbarticlespages/single-page-application.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_kbarticlespages/single-page-application.md b/_kbarticlespages/single-page-application.md index a7e8cc5d7..ee53a0755 100644 --- a/_kbarticlespages/single-page-application.md +++ b/_kbarticlespages/single-page-application.md @@ -19,7 +19,7 @@ In this example we will be taking a look at a simple single-page application whi #### Application Routing -Static site generators like Jekyll and Hugo handle routing by creating an HTML file at each path that can be requested by the user. For single-page applications, we will only render one HTML file: index.html, which loads the Javascript necessary for running our application and router. +Static site generators like Jekyll and Hugo handle routing by creating an HTML file at each path that can be requested by the user. For single-page applications, we will only render one HTML file: index.html, which loads the JavaScript necessary for running our application and router. All of the routing is located in the `index.js` file. Here we import all our components, css and functions. We create the `` and use the `` to provide that router to our application. The parent route registers a `Layout` component which essentially wraps all the other page components thus providing a uniform structure/design for all the components. From cd48e3dd8862e06a14eb8bd504b29d3b1a981acc Mon Sep 17 00:00:00 2001 From: Ephraim Gross <103453764+Ephraim-G@users.noreply.github.com> Date: Thu, 2 Nov 2023 14:14:08 -0400 Subject: [PATCH 4/7] Update _kbarticlespages/single-page-application.md Co-authored-by: Sven Aas <12150+svenaas@users.noreply.github.com> --- _kbarticlespages/single-page-application.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_kbarticlespages/single-page-application.md b/_kbarticlespages/single-page-application.md index ee53a0755..5f032c26f 100644 --- a/_kbarticlespages/single-page-application.md +++ b/_kbarticlespages/single-page-application.md @@ -21,7 +21,7 @@ In this example we will be taking a look at a simple single-page application whi Static site generators like Jekyll and Hugo handle routing by creating an HTML file at each path that can be requested by the user. For single-page applications, we will only render one HTML file: index.html, which loads the JavaScript necessary for running our application and router. -All of the routing is located in the `index.js` file. Here we import all our components, css and functions. We create the `` and use the `` to provide that router to our application. The parent route registers a `Layout` component which essentially wraps all the other page components thus providing a uniform structure/design for all the components. +All of the routing is located in the `index.js` file. Here we import all our components, CSS and functions. We create the `` and use the `` to provide that router to our application. The parent route registers a `Layout` component which essentially wraps all the other page components thus providing a uniform structure/design for all the components. ``` const router = createBrowserRouter( From d60317b64ed5fa8a50a6a574b81f60131ff5d61a Mon Sep 17 00:00:00 2001 From: Ephraim Gross <103453764+Ephraim-G@users.noreply.github.com> Date: Wed, 8 Nov 2023 13:14:05 -0500 Subject: [PATCH 5/7] Update _kbarticlespages/single-page-application.md Co-authored-by: Drew Bollinger --- _kbarticlespages/single-page-application.md | 1 - 1 file changed, 1 deletion(-) diff --git a/_kbarticlespages/single-page-application.md b/_kbarticlespages/single-page-application.md index 5f032c26f..ee82c5a18 100644 --- a/_kbarticlespages/single-page-application.md +++ b/_kbarticlespages/single-page-application.md @@ -5,7 +5,6 @@ date: November 2, 2023 excerpt: --- -## Intro cloud.gov Pages hosts static sites, but this doesn’t mean that developers are limited to only using [“static site generators”](https://jamstack.org/generators/): anything that can be compiled down into HTML can be run on Pages. You can use a single-page application framework like Vue.js, Svelte, Angular, React, etc. and host it seamlessly on the Pages platform. This is achieved via the `npm run pages` command which allows developers to add a custom build script, and we’ll automatically publish everything in the `_site` folder. Details on utilizing a custom build script will be covered later in the article. From 66fdb99c491bef87d0552141725b3b3dbeaa1b9f Mon Sep 17 00:00:00 2001 From: Ephraim Gross <103453764+Ephraim-G@users.noreply.github.com> Date: Wed, 8 Nov 2023 13:14:41 -0500 Subject: [PATCH 6/7] Update _kbarticlespages/single-page-application.md Co-authored-by: Drew Bollinger --- _kbarticlespages/single-page-application.md | 1 - 1 file changed, 1 deletion(-) diff --git a/_kbarticlespages/single-page-application.md b/_kbarticlespages/single-page-application.md index ee82c5a18..b7c828732 100644 --- a/_kbarticlespages/single-page-application.md +++ b/_kbarticlespages/single-page-application.md @@ -14,7 +14,6 @@ In this example we will be taking a look at a simple single-page application whi * Environment variables * 404 Pages -## Key features of a single-page application on Pages #### Application Routing From 468f069282f35ae9843400e590f9f056cd57bffd Mon Sep 17 00:00:00 2001 From: Ephraim Gross <103453764+Ephraim-G@users.noreply.github.com> Date: Wed, 8 Nov 2023 13:14:50 -0500 Subject: [PATCH 7/7] Update _kbarticlespages/single-page-application.md Co-authored-by: Drew Bollinger --- _kbarticlespages/single-page-application.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_kbarticlespages/single-page-application.md b/_kbarticlespages/single-page-application.md index b7c828732..4d3bb636b 100644 --- a/_kbarticlespages/single-page-application.md +++ b/_kbarticlespages/single-page-application.md @@ -15,7 +15,7 @@ In this example we will be taking a look at a simple single-page application whi * 404 Pages -#### Application Routing +## Application Routing Static site generators like Jekyll and Hugo handle routing by creating an HTML file at each path that can be requested by the user. For single-page applications, we will only render one HTML file: index.html, which loads the JavaScript necessary for running our application and router.