Implementation roadmap

These are the high-level steps to take when you upgrade to the latest template.

1. Prepare for your upgrade
   

   Before you start, save a copy of your current site.

   Then, identify a framework. Current frameworks include HTML, Eleventy, .NET Core MVC, and React. You’ll usually pick the framework you’re currently on.

2. Review template updates
   

   To understand the changes in the code, perform a code comparison in your framework repository. This helps you understand the work you need to do. You can also learn how to do a code comparison in GitHub .

3. Download the State Web Template from GitHub
   

   Download the latest Template release for your framework:

   • HTML
   • Eleventy
   • ASP.NET Core MVC
   • React

   This is also a good time to have your security office perform a scan of the files.

4. Look for structural changes
   

   Sometimes with the new releases the State Web Template structural components might have some changes. Each structural component is identified with the HTML comments in the source code of every sample page.

   Look for changes in the following State Web Template structural components:

   • Utility header
   • Site header
   • Mobile controls
   • Search (optional)
   • Main navigation
   • Global footer

   Also you can examine the sample components’ source code for any changes. All sample components are inside of the /samples/ folder.

5. Replace older library files with the updated ones
   

   The web template has CSS and JavaScript (JS) code base. Most new release changes are made in those CSS and JS files. There are two options how you can update them:

   • CDN route
     You can replace CSS and JS source files with newer ones by pointing to the corresponding CDN links found on the State Web Template CDN page.
   • NPM route
     You can install the core State Web Template NPM package on your project (if your project is supporting node.js setup). You can find NPM guidance and more Information on the State Web Template NPM page.

   Custom CSS and JS code may be impacted when you update these files. Keep your customizations separate from the core template source code for an easier update process.

6. Integrate the new template into your environment
   

   From your code comparison, make the necessary changes and updates to your code. Usually, incremental versions will not require any structural template adjustments. You only need to replace core CSS ( /src/scss/ ) and JS ( /src/js/ ) files via NPM install or update the CDN links.

7. Perform necessary tests and reviews
   

   After core source code has been updated, you should thoroughly review and test your website or web application before pushing to production. This includes QA, code and heuristic reviews, and accessibility testing. Do not forget to inspect for code level errors or conflicts.

8. Release to production
   

   You’re now ready to follow your organization's change management and release process. You may want to perform another QA and verify that everything works as expected in the production environment.