From c8a2824a78c5d1daac36e17ba3bf14f6d96cf246 Mon Sep 17 00:00:00 2001 From: Ephraim-G Date: Thu, 14 Sep 2023 11:06:22 -0400 Subject: [PATCH 01/17] SPA knowledge-base article --- _kbarticlespages/single-page-application.md | 43 +++++++++++++++++++++ 1 file changed, 43 insertions(+) create mode 100644 _kbarticlespages/single-page-application.md diff --git a/_kbarticlespages/single-page-application.md b/_kbarticlespages/single-page-application.md new file mode 100644 index 000000000..dd5f6c5ec --- /dev/null +++ b/_kbarticlespages/single-page-application.md @@ -0,0 +1,43 @@ +--- +layout: post +title: "Single-Page Application" +date: TBD, 2023 +excerpt: Single-Page Application with React library +--- + +## Preamble + +This will serve as an informative article regarding hosting a single-page application on the Pages platform using the React library and React Router v6, not as an instructional step by step creation guideline. For more detailed instructions on how to run this locally please refer to the repositories’ README.md. The folders/files referenced in this article will only be the ones where significant changes were made in construction of the application and enabled compatibility with Pages. It is recommended to view the full repository here {insert repo link} in conjunction with working your way through the article. This article is written top-down in correlation to the lines of code in each file of the repository. You can also view the single-page application here {enter preview URL}! + +## .vscode/build/node_modules/public/src + +These folders are all created initially in the repository when you create-react-app. For the purpose of this example the src and public folders were cleared out and files were implemented from scratch. Additionally when you run `npm build` all the optimized javascript will be placed into the “`build`” folder. + +## Src +#### Contact.js/Home.js/Stuff.js + +Each of the class components were created in their own javascript files respectively by declaring `class extends Component`. In React class components typically extend the `Component` class to inherit functionality and methods for creating and managing component state. We then define the method `render()` as a subclass. `render` is the only method which must be defined in a `class component`. Everything we incorporate in the `render` method is what users will see when they navigate to our single-page application. Class components require a `rendor()` method and in this case it returns HTML which will be shown on the page in our web application. Each component is then exported as a default value to be called in other parts of the application. + +#### Index.css +This file contains all the CSS rules and styling that apply to all the components and elements. This is imported into the index.js file to apply globally styling rules throughout the whole application. + +#### Index.js + +##### Importing functions/components + +We imported the `{ createRoot }` function via the react-dom/client module to create a root which will enable us to display React components inside a browser DOM node. We import the React library and CSS. We then import 4 different functions from react-router-dom which are essentially for enabling dynamic routing on the page itself. This is accomplished by creating a DOM History API to manage the history stack of the application. We are essentially manipulating the browser's history to navigate between different states of our application without reloading the page which makes this a Single-Page application. +We imported the `createRoutesFromElements` and `Route` components which are exclusive to React Router v6 in which we declare the route to our components as the path plus the layout. We set `home` `stuff` `contact` as child routes which are nested within the top level route which contains the path variable and element property. `}>` is an index route which is an index of the site relative to the path variable in the line above it. The `path` property defines the URL pattern that, when matched, will render the associated `element` and the `element` property applies the layout component to be rendered for any routes nested inside it. The path is set to the environment variable `REACT_APP_PUBLIC_URL` which is stored in the .env file. (The environment variable in react is prepended with `REACT_APP_` in order to be recognized by Create-React-App.) We also leave the value as an empty string because the build script will set the BaseURL for us. Without this structure Pages will not be able to render or route to our different layout components and will result in 404s. +We imported `RouterProvider` to serve as the mechanism/component for rendering the app itself. We declare this outside of the React tree and set the `router` to the route tree that we previously defined. This is then passed into the `RouterProvider` component. +We also imported our 4 components individually from their respective root paths. In our last block of code we call the `createRoot` function and select the DOM element with the ID “root”. `render` is a method called to render everything that is in the DOM. We wrapped our router in `Strict Mode` which runs our app basically twice to ensure that any potential issues in the app are brought to our attention in an extremely obvious way. There may be instances where no errors appear in the console or lints errors so this acts as an extra more thorough safeguard. It is not required but can be useful in certain situations. + +##### Layout.js +We start off by importing the React module and some different classes from the react/react-router-dom library. We again assign the value of our publicURL environment variable to the path variable.In `class Layout extends Component` here `class` is used to define a new class in javascript which is named `Layout` and `extends Component` specifies that the `Layout` class is extending the `Component` class. We have our parent and child routes set within the scope of the `router`. For users to be able to access our page and the different components all the `NavLink` need to point to the path that was defined in the index.js file along with the specified component. In the JSX there are some html tags to define the structure of the UI. We also pass the string as a ‘className' property to apply styling and CSS changes. `Outlet` is a component used to render the child routes/paths which are nested in our application as part of the React Router configuration. When a user navigates to any path then the content of the matching root/child routes/path will be displayed within `Outlet` as it indicates where the content of nested routes/paths should be displayed. It will always contain the header above it +{insert code block layout.s line 9-16}. Lastly `export default Layout` is used to export the `Layout` component as the default export of the Layout.js file. Now when another module imports `Layout`(as in the index.js file) without specifying a particular named import, it will receive the `Layout` component as the default export. + +## .env + +Environments variables here are embedded at build time and never read at runtime hence Pages being a static site generator/hosting platform. These are created by our shell script in `build.sh`. + +## Build.sh + +This is an #!/bin/bash shell script that will create 3 environment variables into the .env file. To take `echo “Public_URL=$BASEURL” >> .env` as an example this prints out the key=value pair specified (setting the public URL as the base URL we get from Pages) and then use the redirection operator `>>` to store the output in the `.env` file. 3 separate scripts are run at build time each storing their outputs (env vars) in `.env`. From b2b11bc8e4b8a692db784cb3e5d8e244e7c42998 Mon Sep 17 00:00:00 2001 From: Ephraim-G <103453764+Ephraim-G@users.noreply.github.com> Date: Thu, 14 Sep 2023 11:23:10 -0400 Subject: [PATCH 02/17] Update single-page-application.md --- _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 dd5f6c5ec..62872e5cc 100644 --- a/_kbarticlespages/single-page-application.md +++ b/_kbarticlespages/single-page-application.md @@ -1,7 +1,7 @@ --- layout: post title: "Single-Page Application" -date: TBD, 2023 +date: September 14, 2023 excerpt: Single-Page Application with React library --- From 4f6d9e475281ae5996bd7f05bfb79020ecc5f700 Mon Sep 17 00:00:00 2001 From: Ephraim-G Date: Thu, 14 Sep 2023 11:44:32 -0400 Subject: [PATCH 03/17] add links --- _kbarticlespages/single-page-application.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/_kbarticlespages/single-page-application.md b/_kbarticlespages/single-page-application.md index dd5f6c5ec..9dedd22b3 100644 --- a/_kbarticlespages/single-page-application.md +++ b/_kbarticlespages/single-page-application.md @@ -1,36 +1,36 @@ --- layout: post title: "Single-Page Application" -date: TBD, 2023 +date: September 14, 2023 excerpt: Single-Page Application with React library --- ## Preamble -This will serve as an informative article regarding hosting a single-page application on the Pages platform using the React library and React Router v6, not as an instructional step by step creation guideline. For more detailed instructions on how to run this locally please refer to the repositories’ README.md. The folders/files referenced in this article will only be the ones where significant changes were made in construction of the application and enabled compatibility with Pages. It is recommended to view the full repository here {insert repo link} in conjunction with working your way through the article. This article is written top-down in correlation to the lines of code in each file of the repository. You can also view the single-page application here {enter preview URL}! +This will serve as an informative article regarding hosting a single-page application on the Pages platform using the React library and React Router v6, not as an instructional step by step creation guideline. For more detailed instructions on how to run this locally please refer to the repository [README.md](https://github.com/Ephraim-G/react_spa4#react_spa4) The folders/files referenced in this article will only be the ones where significant changes were made in construction of the application and enabled compatibility with Pages. It is recommended to view the full repository here {insert repo link} in conjunction with working your way through the article. This article is written top-down in correlation to the lines of code in each file of the repository. You can also view the single-page application [here](https://federalist-4026336f-aa19-4bbd-ba4e-719be8956f03.sites.pages.cloud.gov/site/ephraim-g/react_spa4/)! ## .vscode/build/node_modules/public/src These folders are all created initially in the repository when you create-react-app. For the purpose of this example the src and public folders were cleared out and files were implemented from scratch. Additionally when you run `npm build` all the optimized javascript will be placed into the “`build`” folder. ## Src -#### Contact.js/Home.js/Stuff.js +### Contact.js/Home.js/Stuff.js Each of the class components were created in their own javascript files respectively by declaring `class extends Component`. In React class components typically extend the `Component` class to inherit functionality and methods for creating and managing component state. We then define the method `render()` as a subclass. `render` is the only method which must be defined in a `class component`. Everything we incorporate in the `render` method is what users will see when they navigate to our single-page application. Class components require a `rendor()` method and in this case it returns HTML which will be shown on the page in our web application. Each component is then exported as a default value to be called in other parts of the application. -#### Index.css +## Index.css This file contains all the CSS rules and styling that apply to all the components and elements. This is imported into the index.js file to apply globally styling rules throughout the whole application. -#### Index.js +## Index.js -##### Importing functions/components +### Importing functions/components We imported the `{ createRoot }` function via the react-dom/client module to create a root which will enable us to display React components inside a browser DOM node. We import the React library and CSS. We then import 4 different functions from react-router-dom which are essentially for enabling dynamic routing on the page itself. This is accomplished by creating a DOM History API to manage the history stack of the application. We are essentially manipulating the browser's history to navigate between different states of our application without reloading the page which makes this a Single-Page application. We imported the `createRoutesFromElements` and `Route` components which are exclusive to React Router v6 in which we declare the route to our components as the path plus the layout. We set `home` `stuff` `contact` as child routes which are nested within the top level route which contains the path variable and element property. `}>` is an index route which is an index of the site relative to the path variable in the line above it. The `path` property defines the URL pattern that, when matched, will render the associated `element` and the `element` property applies the layout component to be rendered for any routes nested inside it. The path is set to the environment variable `REACT_APP_PUBLIC_URL` which is stored in the .env file. (The environment variable in react is prepended with `REACT_APP_` in order to be recognized by Create-React-App.) We also leave the value as an empty string because the build script will set the BaseURL for us. Without this structure Pages will not be able to render or route to our different layout components and will result in 404s. We imported `RouterProvider` to serve as the mechanism/component for rendering the app itself. We declare this outside of the React tree and set the `router` to the route tree that we previously defined. This is then passed into the `RouterProvider` component. We also imported our 4 components individually from their respective root paths. In our last block of code we call the `createRoot` function and select the DOM element with the ID “root”. `render` is a method called to render everything that is in the DOM. We wrapped our router in `Strict Mode` which runs our app basically twice to ensure that any potential issues in the app are brought to our attention in an extremely obvious way. There may be instances where no errors appear in the console or lints errors so this acts as an extra more thorough safeguard. It is not required but can be useful in certain situations. -##### Layout.js +### Layout.js We start off by importing the React module and some different classes from the react/react-router-dom library. We again assign the value of our publicURL environment variable to the path variable.In `class Layout extends Component` here `class` is used to define a new class in javascript which is named `Layout` and `extends Component` specifies that the `Layout` class is extending the `Component` class. We have our parent and child routes set within the scope of the `router`. For users to be able to access our page and the different components all the `NavLink` need to point to the path that was defined in the index.js file along with the specified component. In the JSX there are some html tags to define the structure of the UI. We also pass the string as a ‘className' property to apply styling and CSS changes. `Outlet` is a component used to render the child routes/paths which are nested in our application as part of the React Router configuration. When a user navigates to any path then the content of the matching root/child routes/path will be displayed within `Outlet` as it indicates where the content of nested routes/paths should be displayed. It will always contain the header above it {insert code block layout.s line 9-16}. Lastly `export default Layout` is used to export the `Layout` component as the default export of the Layout.js file. Now when another module imports `Layout`(as in the index.js file) without specifying a particular named import, it will receive the `Layout` component as the default export. From 5a3c27c635a91c09ceabc818696fab92f0cce748 Mon Sep 17 00:00:00 2001 From: Ephraim-G Date: Thu, 14 Sep 2023 12:06:34 -0400 Subject: [PATCH 04/17] add link --- _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 9dedd22b3..cd7ce83f6 100644 --- a/_kbarticlespages/single-page-application.md +++ b/_kbarticlespages/single-page-application.md @@ -7,7 +7,7 @@ excerpt: Single-Page Application with React library ## Preamble -This will serve as an informative article regarding hosting a single-page application on the Pages platform using the React library and React Router v6, not as an instructional step by step creation guideline. For more detailed instructions on how to run this locally please refer to the repository [README.md](https://github.com/Ephraim-G/react_spa4#react_spa4) The folders/files referenced in this article will only be the ones where significant changes were made in construction of the application and enabled compatibility with Pages. It is recommended to view the full repository here {insert repo link} in conjunction with working your way through the article. This article is written top-down in correlation to the lines of code in each file of the repository. You can also view the single-page application [here](https://federalist-4026336f-aa19-4bbd-ba4e-719be8956f03.sites.pages.cloud.gov/site/ephraim-g/react_spa4/)! +This will serve as an informative article regarding hosting a single-page application on the Pages platform using the React library and React Router v6, not as an instructional step by step creation guideline. For more detailed instructions on how to run this locally please refer to the repository [README.md](https://github.com/Ephraim-G/react_spa4#react_spa4) The folders/files referenced in this article will only be the ones where significant changes were made in construction of the application and enabled compatibility with Pages. It is recommended to view the full repository [here](https://github.com/Ephraim-G/react_spa4) in conjunction with working your way through the article. This article is written top-down in correlation to the lines of code in each file of the repository. You can also view the single-page application [here](https://federalist-4026336f-aa19-4bbd-ba4e-719be8956f03.sites.pages.cloud.gov/site/ephraim-g/react_spa4/)! ## .vscode/build/node_modules/public/src From a52a30a8d39f7a35e9d10ddb9f643c9bd876a86c Mon Sep 17 00:00:00 2001 From: Ephraim-G Date: Thu, 14 Sep 2023 12:16:54 -0400 Subject: [PATCH 05/17] add code block/formatting --- _kbarticlespages/single-page-application.md | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/_kbarticlespages/single-page-application.md b/_kbarticlespages/single-page-application.md index cd7ce83f6..25ae6a0ca 100644 --- a/_kbarticlespages/single-page-application.md +++ b/_kbarticlespages/single-page-application.md @@ -31,8 +31,20 @@ We imported `RouterProvider` to serve as the mechanism/component for rendering t We also imported our 4 components individually from their respective root paths. In our last block of code we call the `createRoot` function and select the DOM element with the ID “root”. `render` is a method called to render everything that is in the DOM. We wrapped our router in `Strict Mode` which runs our app basically twice to ensure that any potential issues in the app are brought to our attention in an extremely obvious way. There may be instances where no errors appear in the console or lints errors so this acts as an extra more thorough safeguard. It is not required but can be useful in certain situations. ### Layout.js -We start off by importing the React module and some different classes from the react/react-router-dom library. We again assign the value of our publicURL environment variable to the path variable.In `class Layout extends Component` here `class` is used to define a new class in javascript which is named `Layout` and `extends Component` specifies that the `Layout` class is extending the `Component` class. We have our parent and child routes set within the scope of the `router`. For users to be able to access our page and the different components all the `NavLink` need to point to the path that was defined in the index.js file along with the specified component. In the JSX there are some html tags to define the structure of the UI. We also pass the string as a ‘className' property to apply styling and CSS changes. `Outlet` is a component used to render the child routes/paths which are nested in our application as part of the React Router configuration. When a user navigates to any path then the content of the matching root/child routes/path will be displayed within `Outlet` as it indicates where the content of nested routes/paths should be displayed. It will always contain the header above it -{insert code block layout.s line 9-16}. Lastly `export default Layout` is used to export the `Layout` component as the default export of the Layout.js file. Now when another module imports `Layout`(as in the index.js file) without specifying a particular named import, it will receive the `Layout` component as the default export. +We start off by importing the React module and some different classes from the react/react-router-dom library. We again assign the value of our publicURL environment variable to the path variable.In `class Layout extends Component` here `class` is used to define a new class in javascript which is named `Layout` and `extends Component` specifies that the `Layout` class is extending the `Component` class. We have our parent and child routes set within the scope of the `router`. For users to be able to access our page and the different components all the `NavLink` need to point to the path that was defined in the index.js file along with the specified component. In the JSX there are some html tags to define the structure of the UI. We also pass the string as a ‘className' property to apply styling and CSS changes. `Outlet` is a component used to render the child routes/paths which are nested in our application as part of the React Router configuration. When a user navigates to any path then the content of the matching root/child routes/path will be displayed within `Outlet` as it indicates where the content of nested routes/paths should be displayed. It will always contain the header above it as such. + +``` +
+

Simple SPA

+
    + {/* All nav links need to go to {path} */} +
  • Home
    • +
  • Stuff
    • +
  • Contact
    • +
+
+``` +Lastly `export default Layout` is used to export the `Layout` component as the default export of the Layout.js file. Now when another module imports `Layout` (as in the index.js file) without specifying a particular named import, it will receive the `Layout` component as the default export. ## .env From 60b588e6148ecff192839e8fd9a5761f8f05540d Mon Sep 17 00:00:00 2001 From: Ephraim-G Date: Fri, 15 Sep 2023 12:04:13 -0400 Subject: [PATCH 06/17] add link --- _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 25ae6a0ca..f564d737a 100644 --- a/_kbarticlespages/single-page-application.md +++ b/_kbarticlespages/single-page-application.md @@ -7,7 +7,7 @@ excerpt: Single-Page Application with React library ## Preamble -This will serve as an informative article regarding hosting a single-page application on the Pages platform using the React library and React Router v6, not as an instructional step by step creation guideline. For more detailed instructions on how to run this locally please refer to the repository [README.md](https://github.com/Ephraim-G/react_spa4#react_spa4) The folders/files referenced in this article will only be the ones where significant changes were made in construction of the application and enabled compatibility with Pages. It is recommended to view the full repository [here](https://github.com/Ephraim-G/react_spa4) in conjunction with working your way through the article. This article is written top-down in correlation to the lines of code in each file of the repository. You can also view the single-page application [here](https://federalist-4026336f-aa19-4bbd-ba4e-719be8956f03.sites.pages.cloud.gov/site/ephraim-g/react_spa4/)! +This will serve as an informative article regarding hosting a single-page application on the Pages platform using the [React library](https://react.dev/learn/installation) and [React Router v6](https://reactrouter.com/en/main), not as an instructional step by step creation guideline. For more detailed instructions on how to run this locally please refer to the repository [README.md](https://github.com/Ephraim-G/react_spa4#react_spa4) The folders/files referenced in this article will only be the ones where significant changes were made in construction of the application and enabled compatibility with Pages. It is recommended to view the [full repository on GitHub](https://github.com/Ephraim-G/react_spa4) in conjunction with working your way through the article. This article is written top-down in correlation to the lines of code in each file of the repository. Additionally an [article glossary](https://github.com/Ephraim-G/react_spa4#knowledge-base-article-glossary) is available to improve the reading experience You can also view the single-page application [here](https://federalist-01aa8660-8aca-452d-a270-5e58ffa18645.sites.pages.cloud.gov/site/ephraim-g/react_spa4/)! ## .vscode/build/node_modules/public/src From 7667c7fb1f7a9224353c0719e7cbd252d1ad47bf Mon Sep 17 00:00:00 2001 From: Ephraim-G Date: Fri, 15 Sep 2023 15:30:07 -0400 Subject: [PATCH 07/17] fix --- _kbarticlespages/single-page-application.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/_kbarticlespages/single-page-application.md b/_kbarticlespages/single-page-application.md index f564d737a..b00afb13d 100644 --- a/_kbarticlespages/single-page-application.md +++ b/_kbarticlespages/single-page-application.md @@ -7,16 +7,16 @@ excerpt: Single-Page Application with React library ## Preamble -This will serve as an informative article regarding hosting a single-page application on the Pages platform using the [React library](https://react.dev/learn/installation) and [React Router v6](https://reactrouter.com/en/main), not as an instructional step by step creation guideline. For more detailed instructions on how to run this locally please refer to the repository [README.md](https://github.com/Ephraim-G/react_spa4#react_spa4) The folders/files referenced in this article will only be the ones where significant changes were made in construction of the application and enabled compatibility with Pages. It is recommended to view the [full repository on GitHub](https://github.com/Ephraim-G/react_spa4) in conjunction with working your way through the article. This article is written top-down in correlation to the lines of code in each file of the repository. Additionally an [article glossary](https://github.com/Ephraim-G/react_spa4#knowledge-base-article-glossary) is available to improve the reading experience You can also view the single-page application [here](https://federalist-01aa8660-8aca-452d-a270-5e58ffa18645.sites.pages.cloud.gov/site/ephraim-g/react_spa4/)! +This will serve as an informative article regarding hosting a single-page application on the Pages platform using the [React library](https://react.dev/learn/installation) and [React Router v6](https://reactrouter.com/en/main), not as an instructional step by step creation guideline. For more detailed instructions on how to run this locally please refer to the repository [README.md](https://github.com/Ephraim-G/react_spa4#react_spa4) file. The folders/files referenced in this article will only be the ones where significant changes were made in construction of the application and enabled compatibility with Pages. It is recommended to view the [full repository on GitHub](https://github.com/Ephraim-G/react_spa4) in conjunction with working your way through the article. This article is written top-down in correlation to the lines of code in each file of the repository. Additionally an [article glossary](https://github.com/Ephraim-G/react_spa4#knowledge-base-article-glossary) is available to improve the reading experience You can also view the single-page application [here](https://federalist-01aa8660-8aca-452d-a270-5e58ffa18645.sites.pages.cloud.gov/site/ephraim-g/react_spa4/)! ## .vscode/build/node_modules/public/src -These folders are all created initially in the repository when you create-react-app. For the purpose of this example the src and public folders were cleared out and files were implemented from scratch. Additionally when you run `npm build` all the optimized javascript will be placed into the “`build`” folder. +These folders are all created initially in the repository when you `create-react-app`. For the purpose of this example the src and public folders were cleared out and files were implemented from scratch. Additionally when you run `npm build` all the optimized javascript will be placed into the “`build`” folder. ## Src ### Contact.js/Home.js/Stuff.js -Each of the class components were created in their own javascript files respectively by declaring `class extends Component`. In React class components typically extend the `Component` class to inherit functionality and methods for creating and managing component state. We then define the method `render()` as a subclass. `render` is the only method which must be defined in a `class component`. Everything we incorporate in the `render` method is what users will see when they navigate to our single-page application. Class components require a `rendor()` method and in this case it returns HTML which will be shown on the page in our web application. Each component is then exported as a default value to be called in other parts of the application. +Each of the class components were created in their own javascript files respectively by declaring `class extends Component`. In React class components typically extend the `Component` class to inherit functionality and methods for creating and managing component state. The method `render()` is then defined as a subclass. `render` is the only method which must be defined in a `class component`. Everything that is incorporated in the `render` method is what users will see when they navigate to our single-page application. Class components require a `rendor()` method and in this case it returns HTML which will be shown on the page in our web application. Each component is then exported as a default value to be called in other parts of the application. ## Index.css This file contains all the CSS rules and styling that apply to all the components and elements. This is imported into the index.js file to apply globally styling rules throughout the whole application. @@ -25,8 +25,8 @@ This file contains all the CSS rules and styling that apply to all the component ### Importing functions/components -We imported the `{ createRoot }` function via the react-dom/client module to create a root which will enable us to display React components inside a browser DOM node. We import the React library and CSS. We then import 4 different functions from react-router-dom which are essentially for enabling dynamic routing on the page itself. This is accomplished by creating a DOM History API to manage the history stack of the application. We are essentially manipulating the browser's history to navigate between different states of our application without reloading the page which makes this a Single-Page application. -We imported the `createRoutesFromElements` and `Route` components which are exclusive to React Router v6 in which we declare the route to our components as the path plus the layout. We set `home` `stuff` `contact` as child routes which are nested within the top level route which contains the path variable and element property. `}>` is an index route which is an index of the site relative to the path variable in the line above it. The `path` property defines the URL pattern that, when matched, will render the associated `element` and the `element` property applies the layout component to be rendered for any routes nested inside it. The path is set to the environment variable `REACT_APP_PUBLIC_URL` which is stored in the .env file. (The environment variable in react is prepended with `REACT_APP_` in order to be recognized by Create-React-App.) We also leave the value as an empty string because the build script will set the BaseURL for us. Without this structure Pages will not be able to render or route to our different layout components and will result in 404s. +The `{ createRoot }` function is imported via the react-dom/client module to create a root which will enable us to display React components inside a browser DOM node. We import the React library and CSS. We then import 4 different functions from react-router-dom which are essentially for enabling dynamic routing on the page itself. This is accomplished by creating a DOM History API to manage the history stack of the application. We are essentially manipulating the browser's history to navigate between different states of our application without reloading the page which makes this a Single-Page application. +The `createRoutesFromElements` and `Route` components are then imported, which are exclusive to React Router v6, in which we declare the route to our components as the path plus the layout. We set `home` `stuff` `contact` as child routes which are nested within the top level route which contains the path variable and element property. `}>` is an index route which is an index of the site relative to the path variable in the line above it. The `path` property defines the URL pattern that, when matched, will render the associated `element` and the `element` property applies the layout component to be rendered for any routes nested inside it. The path is set to the environment variable `REACT_APP_PUBLIC_URL` which is stored in the .env file. (The environment variable in react is prepended with `REACT_APP_` in order to be recognized by Create-React-App.) We also leave the value as an empty string because the build script will set the BaseURL for us. Without this structure Pages will not be able to render or route to our different layout components and will result in 404s. We imported `RouterProvider` to serve as the mechanism/component for rendering the app itself. We declare this outside of the React tree and set the `router` to the route tree that we previously defined. This is then passed into the `RouterProvider` component. We also imported our 4 components individually from their respective root paths. In our last block of code we call the `createRoot` function and select the DOM element with the ID “root”. `render` is a method called to render everything that is in the DOM. We wrapped our router in `Strict Mode` which runs our app basically twice to ensure that any potential issues in the app are brought to our attention in an extremely obvious way. There may be instances where no errors appear in the console or lints errors so this acts as an extra more thorough safeguard. It is not required but can be useful in certain situations. From cea33c37e5b2e6e1add38136cb07e354d14a8211 Mon Sep 17 00:00:00 2001 From: Ephraim-G Date: Tue, 19 Sep 2023 11:38:30 -0400 Subject: [PATCH 08/17] spell check/formatting --- _kbarticlespages/single-page-application.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/_kbarticlespages/single-page-application.md b/_kbarticlespages/single-page-application.md index b00afb13d..cc16db67b 100644 --- a/_kbarticlespages/single-page-application.md +++ b/_kbarticlespages/single-page-application.md @@ -1,13 +1,13 @@ --- layout: post title: "Single-Page Application" -date: September 14, 2023 +date: September 20, 2023 excerpt: Single-Page Application with React library --- ## Preamble -This will serve as an informative article regarding hosting a single-page application on the Pages platform using the [React library](https://react.dev/learn/installation) and [React Router v6](https://reactrouter.com/en/main), not as an instructional step by step creation guideline. For more detailed instructions on how to run this locally please refer to the repository [README.md](https://github.com/Ephraim-G/react_spa4#react_spa4) file. The folders/files referenced in this article will only be the ones where significant changes were made in construction of the application and enabled compatibility with Pages. It is recommended to view the [full repository on GitHub](https://github.com/Ephraim-G/react_spa4) in conjunction with working your way through the article. This article is written top-down in correlation to the lines of code in each file of the repository. Additionally an [article glossary](https://github.com/Ephraim-G/react_spa4#knowledge-base-article-glossary) is available to improve the reading experience You can also view the single-page application [here](https://federalist-01aa8660-8aca-452d-a270-5e58ffa18645.sites.pages.cloud.gov/site/ephraim-g/react_spa4/)! +This will serve as an informative article regarding hosting a single-page application on the Pages platform using the [React library](https://react.dev/learn/installation) and [React Router v6](https://reactrouter.com/en/main), not as an instructional step by step creation guideline. For more detailed instructions on how to run this locally please refer to the repository [README.md](https://github.com/Ephraim-G/react_spa4#react_spa4). The folders/files referenced in this article will only be the ones where significant changes were made in construction of the application and enabled compatibility with Pages. It is highly recommended to view the [full repository on GitHub](https://github.com/Ephraim-G/react_spa4) in conjunction with working your way through the article. This article is written top-down in correlation to the lines of code in each file of the repository. Additionally an [article glossary](https://github.com/Ephraim-G/react_spa4#knowledge-base-article-glossary) is available to improve the reading experience You can also view the [single-page application](https://federalist-01aa8660-8aca-452d-a270-5e58ffa18645.sites.pages.cloud.gov/site/ephraim-g/react_spa4/)! ## .vscode/build/node_modules/public/src @@ -25,13 +25,13 @@ This file contains all the CSS rules and styling that apply to all the component ### Importing functions/components -The `{ createRoot }` function is imported via the react-dom/client module to create a root which will enable us to display React components inside a browser DOM node. We import the React library and CSS. We then import 4 different functions from react-router-dom which are essentially for enabling dynamic routing on the page itself. This is accomplished by creating a DOM History API to manage the history stack of the application. We are essentially manipulating the browser's history to navigate between different states of our application without reloading the page which makes this a Single-Page application. -The `createRoutesFromElements` and `Route` components are then imported, which are exclusive to React Router v6, in which we declare the route to our components as the path plus the layout. We set `home` `stuff` `contact` as child routes which are nested within the top level route which contains the path variable and element property. `}>` is an index route which is an index of the site relative to the path variable in the line above it. The `path` property defines the URL pattern that, when matched, will render the associated `element` and the `element` property applies the layout component to be rendered for any routes nested inside it. The path is set to the environment variable `REACT_APP_PUBLIC_URL` which is stored in the .env file. (The environment variable in react is prepended with `REACT_APP_` in order to be recognized by Create-React-App.) We also leave the value as an empty string because the build script will set the BaseURL for us. Without this structure Pages will not be able to render or route to our different layout components and will result in 404s. +The `createRoot` function is imported via the `react-dom/client` module to create a root which will enable us to display React components inside a browser DOM node. We import the React library and CSS. We then import 4 different functions from `react-router-dom` which are essentially for enabling dynamic routing on the page itself. This is accomplished by creating a DOM History API to manage the history stack of the application. We are essentially manipulating the browser's history to navigate between different states of our application without reloading the page which makes this a Single-Page application. +The `createRoutesFromElements` and `Route` components are then imported, which are exclusive to React Router v6, in which we declare the route to our components as the path plus the layout. We set `home` `stuff` `contact` as child routes which are nested within the top level route which contains the path variable and element property. `}>` is an index route which is an index of the site relative to the path variable in the line above it. The `path` property defines the URL pattern that, when matched, will render the associated `element` and the `element` property applies the layout component to be rendered for any routes nested inside it. The path is set to the environment variable `REACT_APP_PUBLIC_URL` which is stored in the `.env` file. (The environment variable in react is prepended with `REACT_APP_` in order to be recognized by Create-React-App.) We also leave the value as an empty string because the build script will set the Base URL for us. Without this structure Pages will not be able to render or route to our different layout components and will result in 404s. We imported `RouterProvider` to serve as the mechanism/component for rendering the app itself. We declare this outside of the React tree and set the `router` to the route tree that we previously defined. This is then passed into the `RouterProvider` component. We also imported our 4 components individually from their respective root paths. In our last block of code we call the `createRoot` function and select the DOM element with the ID “root”. `render` is a method called to render everything that is in the DOM. We wrapped our router in `Strict Mode` which runs our app basically twice to ensure that any potential issues in the app are brought to our attention in an extremely obvious way. There may be instances where no errors appear in the console or lints errors so this acts as an extra more thorough safeguard. It is not required but can be useful in certain situations. ### Layout.js -We start off by importing the React module and some different classes from the react/react-router-dom library. We again assign the value of our publicURL environment variable to the path variable.In `class Layout extends Component` here `class` is used to define a new class in javascript which is named `Layout` and `extends Component` specifies that the `Layout` class is extending the `Component` class. We have our parent and child routes set within the scope of the `router`. For users to be able to access our page and the different components all the `NavLink` need to point to the path that was defined in the index.js file along with the specified component. In the JSX there are some html tags to define the structure of the UI. We also pass the string as a ‘className' property to apply styling and CSS changes. `Outlet` is a component used to render the child routes/paths which are nested in our application as part of the React Router configuration. When a user navigates to any path then the content of the matching root/child routes/path will be displayed within `Outlet` as it indicates where the content of nested routes/paths should be displayed. It will always contain the header above it as such. +We start off by importing the React module and some different classes from the `react/react-router-dom` library. We again assign the value of our public URL environment variable to the path variable. In `class Layout extends Component` here `class` is used to define a new class in javascript which is named `Layout` and `extends Component` specifies that the `Layout` class is extending the `Component` class. We have our parent and child routes set within the scope of the `router`. For users to be able to access our page and the different components all the `NavLink` need to point to the path that was defined in the `index.js` file along with the specified component. In the JSX there are some html tags to define the structure of the UI. We also pass the string as a `className` property to apply styling and CSS changes. `Outlet` is an component used to render the child routes/paths which are nested in our application as part of the React Router configuration. When a user navigates to any path then the content of the matching root/child routes/path will be displayed within `Outlet` as it indicates where the content of nested routes/paths should be displayed. It will always contain the header above it as such. ```
@@ -52,4 +52,4 @@ Environments variables here are embedded at build time and never read at runtime ## Build.sh -This is an #!/bin/bash shell script that will create 3 environment variables into the .env file. To take `echo “Public_URL=$BASEURL” >> .env` as an example this prints out the key=value pair specified (setting the public URL as the base URL we get from Pages) and then use the redirection operator `>>` to store the output in the `.env` file. 3 separate scripts are run at build time each storing their outputs (env vars) in `.env`. +This is an #!/bin/bash shell script that will create 3 environment variables into the ``.env`` file. To take `echo “Public_URL=$BASEURL” >> .env` as an example this prints out the key=value pair specified (setting the public URL as the base URL we get from Pages) and then use the redirection operator `>>` to store the output in the `.env` file. 3 separate scripts are run at build time each storing their outputs (env vars) in `.env`. From cba41ffa51f60a6f7565dab5082a6a4951f7d455 Mon Sep 17 00:00:00 2001 From: Ephraim-G <103453764+Ephraim-G@users.noreply.github.com> Date: Tue, 19 Sep 2023 14:03:25 -0400 Subject: [PATCH 09/17] 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 cc16db67b..b1d8690f8 100644 --- a/_kbarticlespages/single-page-application.md +++ b/_kbarticlespages/single-page-application.md @@ -11,7 +11,7 @@ This will serve as an informative article regarding hosting a single-page applic ## .vscode/build/node_modules/public/src -These folders are all created initially in the repository when you `create-react-app`. For the purpose of this example the src and public folders were cleared out and files were implemented from scratch. Additionally when you run `npm build` all the optimized javascript will be placed into the “`build`” folder. +These folders are all created initially in the repository when you `create-react-app`. For the purpose of this example the src and public folders were cleared out and files were implemented from scratch. Additionally when you run `npm build` all the optimized Javascript will be placed into the “`build`” folder. ## Src ### Contact.js/Home.js/Stuff.js From cd1eba9832499ea226b679728c1aebf59309ce24 Mon Sep 17 00:00:00 2001 From: Ephraim-G <103453764+Ephraim-G@users.noreply.github.com> Date: Tue, 19 Sep 2023 14:03:42 -0400 Subject: [PATCH 10/17] 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 b1d8690f8..21b6d35f2 100644 --- a/_kbarticlespages/single-page-application.md +++ b/_kbarticlespages/single-page-application.md @@ -16,7 +16,7 @@ These folders are all created initially in the repository when you `create-react ## Src ### Contact.js/Home.js/Stuff.js -Each of the class components were created in their own javascript files respectively by declaring `class extends Component`. In React class components typically extend the `Component` class to inherit functionality and methods for creating and managing component state. The method `render()` is then defined as a subclass. `render` is the only method which must be defined in a `class component`. Everything that is incorporated in the `render` method is what users will see when they navigate to our single-page application. Class components require a `rendor()` method and in this case it returns HTML which will be shown on the page in our web application. Each component is then exported as a default value to be called in other parts of the application. +Each of the class components were created in their own Javascript files respectively by declaring `class extends Component`. In React class components typically extend the `Component` class to inherit functionality and methods for creating and managing component state. The method `render()` is then defined as a subclass. `render` is the only method which must be defined in a `class component`. Everything that is incorporated in the `render` method is what users will see when they navigate to our single-page application. Class components require a `render()` method and in this case it returns HTML which will be shown on the page in our web application. Each component is then exported as a default value to be called in other parts of the application. ## Index.css This file contains all the CSS rules and styling that apply to all the components and elements. This is imported into the index.js file to apply globally styling rules throughout the whole application. From e1704bb9027ad7f01b7da998cd3e92deee36d2f9 Mon Sep 17 00:00:00 2001 From: Ephraim-G <103453764+Ephraim-G@users.noreply.github.com> Date: Tue, 19 Sep 2023 14:03:57 -0400 Subject: [PATCH 11/17] 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 21b6d35f2..721ffd8d7 100644 --- a/_kbarticlespages/single-page-application.md +++ b/_kbarticlespages/single-page-application.md @@ -19,7 +19,7 @@ These folders are all created initially in the repository when you `create-react Each of the class components were created in their own Javascript files respectively by declaring `class extends Component`. In React class components typically extend the `Component` class to inherit functionality and methods for creating and managing component state. The method `render()` is then defined as a subclass. `render` is the only method which must be defined in a `class component`. Everything that is incorporated in the `render` method is what users will see when they navigate to our single-page application. Class components require a `render()` method and in this case it returns HTML which will be shown on the page in our web application. Each component is then exported as a default value to be called in other parts of the application. ## Index.css -This file contains all the CSS rules and styling that apply to all the components and elements. This is imported into the index.js file to apply globally styling rules throughout the whole application. +This file contains all the CSS rules and styling that apply to all the components and elements. This is imported into the `index.js` file to apply globally styling rules throughout the whole application. ## Index.js From f6b9935906a4e8930cbfbd9f62909d514616e18a Mon Sep 17 00:00:00 2001 From: Ephraim-G <103453764+Ephraim-G@users.noreply.github.com> Date: Tue, 19 Sep 2023 14:04:11 -0400 Subject: [PATCH 12/17] 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 721ffd8d7..8d5748af8 100644 --- a/_kbarticlespages/single-page-application.md +++ b/_kbarticlespages/single-page-application.md @@ -44,7 +44,7 @@ We start off by importing the React module and some different classes from the `
``` -Lastly `export default Layout` is used to export the `Layout` component as the default export of the Layout.js file. Now when another module imports `Layout` (as in the index.js file) without specifying a particular named import, it will receive the `Layout` component as the default export. +Lastly `export default Layout` is used to export the `Layout` component as the default export of the `Layout.js` file. Now when another module imports `Layout` (as in the `index.js` file) without specifying a particular named import, it will receive the `Layout` component as the default export. ## .env From 2b576164acba618a7c0444c1ca7b2ac8a4d345ac Mon Sep 17 00:00:00 2001 From: Ephraim-G <103453764+Ephraim-G@users.noreply.github.com> Date: Tue, 19 Sep 2023 14:04:21 -0400 Subject: [PATCH 13/17] 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 8d5748af8..c900907b4 100644 --- a/_kbarticlespages/single-page-application.md +++ b/_kbarticlespages/single-page-application.md @@ -48,7 +48,7 @@ Lastly `export default Layout` is used to export the `Layout` component as the d ## .env -Environments variables here are embedded at build time and never read at runtime hence Pages being a static site generator/hosting platform. These are created by our shell script in `build.sh`. +Environment variables here are embedded at build time and never read at runtime hence Pages being a static site generator/hosting platform. These are created by our shell script in `build.sh`. ## Build.sh From 56da81661ae167cfb75476d3797aa0e46164c921 Mon Sep 17 00:00:00 2001 From: Ephraim-G <103453764+Ephraim-G@users.noreply.github.com> Date: Tue, 19 Sep 2023 14:04:35 -0400 Subject: [PATCH 14/17] 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 c900907b4..6f7838745 100644 --- a/_kbarticlespages/single-page-application.md +++ b/_kbarticlespages/single-page-application.md @@ -52,4 +52,4 @@ Environment variables here are embedded at build time and never read at runtime ## Build.sh -This is an #!/bin/bash shell script that will create 3 environment variables into the ``.env`` file. To take `echo “Public_URL=$BASEURL” >> .env` as an example this prints out the key=value pair specified (setting the public URL as the base URL we get from Pages) and then use the redirection operator `>>` to store the output in the `.env` file. 3 separate scripts are run at build time each storing their outputs (env vars) in `.env`. +This is an `#!/bin/bash` shell script that will create 3 environment variables into the ``.env`` file. To take `echo “Public_URL=$BASEURL” >> .env` as an example this prints out the key=value pair specified (setting the public URL as the base URL we get from Pages) and then use the redirection operator `>>` to store the output in the `.env` file. 3 separate scripts are run at build time each storing their outputs (env vars) in `.env`. From 8c134a00251762404e407e818f04776f6c14c282 Mon Sep 17 00:00:00 2001 From: Ephraim-G <103453764+Ephraim-G@users.noreply.github.com> Date: Tue, 19 Sep 2023 14:05:32 -0400 Subject: [PATCH 15/17] 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 6f7838745..17822e6ca 100644 --- a/_kbarticlespages/single-page-application.md +++ b/_kbarticlespages/single-page-application.md @@ -28,7 +28,7 @@ This file contains all the CSS rules and styling that apply to all the component The `createRoot` function is imported via the `react-dom/client` module to create a root which will enable us to display React components inside a browser DOM node. We import the React library and CSS. We then import 4 different functions from `react-router-dom` which are essentially for enabling dynamic routing on the page itself. This is accomplished by creating a DOM History API to manage the history stack of the application. We are essentially manipulating the browser's history to navigate between different states of our application without reloading the page which makes this a Single-Page application. The `createRoutesFromElements` and `Route` components are then imported, which are exclusive to React Router v6, in which we declare the route to our components as the path plus the layout. We set `home` `stuff` `contact` as child routes which are nested within the top level route which contains the path variable and element property. `}>` is an index route which is an index of the site relative to the path variable in the line above it. The `path` property defines the URL pattern that, when matched, will render the associated `element` and the `element` property applies the layout component to be rendered for any routes nested inside it. The path is set to the environment variable `REACT_APP_PUBLIC_URL` which is stored in the `.env` file. (The environment variable in react is prepended with `REACT_APP_` in order to be recognized by Create-React-App.) We also leave the value as an empty string because the build script will set the Base URL for us. Without this structure Pages will not be able to render or route to our different layout components and will result in 404s. We imported `RouterProvider` to serve as the mechanism/component for rendering the app itself. We declare this outside of the React tree and set the `router` to the route tree that we previously defined. This is then passed into the `RouterProvider` component. -We also imported our 4 components individually from their respective root paths. In our last block of code we call the `createRoot` function and select the DOM element with the ID “root”. `render` is a method called to render everything that is in the DOM. We wrapped our router in `Strict Mode` which runs our app basically twice to ensure that any potential issues in the app are brought to our attention in an extremely obvious way. There may be instances where no errors appear in the console or lints errors so this acts as an extra more thorough safeguard. It is not required but can be useful in certain situations. +We also imported our 4 components individually from their respective root paths. In our last block of code we call the `createRoot` function and select the DOM element with the ID “root”. `render` is a method called to render everything that is in the DOM. We wrapped our router in `Strict Mode` which runs our app basically twice to ensure that any potential issues in the app are brought to our attention in an extremely obvious way. There may be instances where no errors appear in the console or lint errors so this acts as an extra more thorough safeguard. It is not required but can be useful in certain situations. ### Layout.js We start off by importing the React module and some different classes from the `react/react-router-dom` library. We again assign the value of our public URL environment variable to the path variable. In `class Layout extends Component` here `class` is used to define a new class in javascript which is named `Layout` and `extends Component` specifies that the `Layout` class is extending the `Component` class. We have our parent and child routes set within the scope of the `router`. For users to be able to access our page and the different components all the `NavLink` need to point to the path that was defined in the `index.js` file along with the specified component. In the JSX there are some html tags to define the structure of the UI. We also pass the string as a `className` property to apply styling and CSS changes. `Outlet` is an component used to render the child routes/paths which are nested in our application as part of the React Router configuration. When a user navigates to any path then the content of the matching root/child routes/path will be displayed within `Outlet` as it indicates where the content of nested routes/paths should be displayed. It will always contain the header above it as such. From 343282d3c39c768b04058ee42aca29954616442e Mon Sep 17 00:00:00 2001 From: Ephraim-G <103453764+Ephraim-G@users.noreply.github.com> Date: Tue, 19 Sep 2023 14:09:12 -0400 Subject: [PATCH 16/17] 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 17822e6ca..42f0a0a83 100644 --- a/_kbarticlespages/single-page-application.md +++ b/_kbarticlespages/single-page-application.md @@ -7,7 +7,7 @@ excerpt: Single-Page Application with React library ## Preamble -This will serve as an informative article regarding hosting a single-page application on the Pages platform using the [React library](https://react.dev/learn/installation) and [React Router v6](https://reactrouter.com/en/main), not as an instructional step by step creation guideline. For more detailed instructions on how to run this locally please refer to the repository [README.md](https://github.com/Ephraim-G/react_spa4#react_spa4). The folders/files referenced in this article will only be the ones where significant changes were made in construction of the application and enabled compatibility with Pages. It is highly recommended to view the [full repository on GitHub](https://github.com/Ephraim-G/react_spa4) in conjunction with working your way through the article. This article is written top-down in correlation to the lines of code in each file of the repository. Additionally an [article glossary](https://github.com/Ephraim-G/react_spa4#knowledge-base-article-glossary) is available to improve the reading experience You can also view the [single-page application](https://federalist-01aa8660-8aca-452d-a270-5e58ffa18645.sites.pages.cloud.gov/site/ephraim-g/react_spa4/)! +This will serve as an informative article regarding hosting a single-page application on the Pages platform using the [React library](https://react.dev/learn/installation) and [React Router v6](https://reactrouter.com/en/main), not as an instructional step by step creation guideline. For more detailed instructions on how to run this locally please refer to the repository [README.md](https://github.com/Ephraim-G/react_spa4#react_spa4). The folders/files referenced in this article will only be the ones where significant changes were made in construction of the application and enabling compatibility with Pages. It is highly recommended to view the [full repository on GitHub](https://github.com/Ephraim-G/react_spa4) in conjunction with working your way through the article. This article is written top-down in correlation to the lines of code in each file of the repository. Additionally an [article glossary](https://github.com/Ephraim-G/react_spa4#knowledge-base-article-glossary) is available to improve the reading experience You can also view the [single-page application](https://federalist-01aa8660-8aca-452d-a270-5e58ffa18645.sites.pages.cloud.gov/site/ephraim-g/react_spa4/)! ## .vscode/build/node_modules/public/src From ddb2cb8097a10d89257823cbfe460ca060ef9a87 Mon Sep 17 00:00:00 2001 From: Ephraim-G Date: Tue, 19 Sep 2023 14:11:30 -0400 Subject: [PATCH 17/17] formatting --- _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 cc16db67b..e2a0d6402 100644 --- a/_kbarticlespages/single-page-application.md +++ b/_kbarticlespages/single-page-application.md @@ -52,4 +52,4 @@ Environments variables here are embedded at build time and never read at runtime ## Build.sh -This is an #!/bin/bash shell script that will create 3 environment variables into the ``.env`` file. To take `echo “Public_URL=$BASEURL” >> .env` as an example this prints out the key=value pair specified (setting the public URL as the base URL we get from Pages) and then use the redirection operator `>>` to store the output in the `.env` file. 3 separate scripts are run at build time each storing their outputs (env vars) in `.env`. +This is an #!/bin/bash shell script that will create 3 environment variables into the `.env` file. To take `echo “Public_URL=$BASEURL” >> .env` as an example this prints out the key=value pair specified (setting the public URL as the base URL we get from Pages) and then use the redirection operator `>>` to store the output in the `.env` file. 3 separate scripts are run at build time each storing their outputs (env vars) in `.env`.