These are the high-level steps to take when you upgrade to the latest template.
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.
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 .
Download the State Web Template from GitHub
Download the latest Template release for your framework:
This is also a good time to have your security office perform a scan of the files.
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
Replace older library files with the updated ones
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.
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.
- CDN route
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.
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.
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.