Spike: local development environments for Next-Build

[timcosgrove]

Description

As a replacement for Content Build, Next Build will need to be a local development environment for both engineers creating a front end for CMS content as well as people currently working on vets-website and potentially vets-api. We need to understand how Next Build will need to be engineered to meet all current development scenarios.

Recommended avenues of exploration:

• Examine the ·https://depo-platform-documentation.scrollhelp.site/developer-docs/creating-a-new-application for development scenarios that involve using Content Build
• Simple group discussion
• Slack research
  • Search content build mentions
  • Solicit discussion in #all-vfs-teams, #platform-cop-frontend

Acceptance Criteria

• [ ] A comprehensive set of local development scenarios for Content Build is identified and described
• [ ] For each scenario, document what considerations there are for implementation

Team

Please check the team(s) that will do this work.

• [ ] CMS Team
• [ ] Public Websites
• [ ] Facilities
• [ ] User support
• [x] Accelerated Publishing

[timcosgrove]

This will roll over to the next sprint.

[JeffKeeneVAGov]

Please include me in reviewing the results of this Spike. Thanks!

[mreed101]

Applications

To mimic the behavior of content-build, next-build will need the ability to build static pages that inject react applications inside of a template.

Currently this is achieved in content-build by adding the application to registry.json Content-build will inject this application into a file called page-react.html which is the template for all applications. Page-react has a loader called react-loader that checks to see if there is a loading message to give the user. It also checks to see if the application is in maintenance.

Once the application has loaded successfully the loading message is removed from the page.

All applications look for a div with an ID of react-root. This is where the application will be loaded into. <div id="react-root">

The meta data and the actual application .css and .js files are loaded into header.html

Header is responsible for loading in vendor.entry.js

Header also loads the [appName].entry.js file by doing the following. <script nonce="**CSP_NONCE**" defer data-entry-name="{{ entryname | default: 'static-pages' }}.js"></script> The source is later added by a file called process-entry-names.js Apparently there are some applications that have files that are hashed and that requires being able to read webpacks file-manifest.json from vets-website and properly mapping the files from registry.json to their updated files .js files.

An example might be similar to the below

const teamSiteInjectionBundles = { 'proxy-rewrite.js': 'generated/proxy-rewrite.entry.js', 'vendor.js': 'generated/vendor.entry.js', 'polyfills.js': 'generated/polyfills.entry.js', 'styleConsolidated.css': 'generated/styleConsolidated.css', 'static-pages.css': 'generated/static-pages.css', };

The following is the current makeup of an application as laid out in registry.json { "appName": "COVID-19 screener", "entryName": "covid19screen", "rootUrl": "/covid19screen", "template": { "title": "COVID-19 screening tool", "layout": "page-react.html", "private": true, "vagovprod": true } },

The meaning of the fields can be found inside of the new application documentation.

As a note, all applications use the layout of "page-react.html". This field may not be needed moving forward.

Some form of linking will need to be done with the vets-website repo that will allow a developer to test changes to their applications. This page shows how this scenario is handled in CB.

Markdown Templates

As a result of conversations held during our onsite meetings on 6/11/24, it is best to get rid of markdown pages and bring them over as static files. This will require those pages to be migrated over from the vagov-content repo. There are markdown to html converters that can help with this effort https://markdowntohtml.com/ These pages will need to be setup and added to the Next Build src -> pages directory

[mreed101]

@timcosgrove Think I can get your eyes on this ticket? Want to make sure that all of the information tracks