Fortifying Content Flow: A Cybersecurity CMS Transformation

Creating React components

To start this project, I took the Adobe Photoshop mockups that I worked on and broke them up by components. From there, I took each component and made a unique JSX file for it with React.

Each React component needed to be styled with Sass, and be able to support the props necessary to render all of the content.

When styling the components, I used Sass and created mixins to store variables for things like color, font size, and z-index. Since each product in the Tripwire portfolio was going to have a specific set of colors to support it, creating variables for gradients and colors was really helpful.

Integrating components with the CMS

Once the React components were built, I was able to demo the product pages to stakeholders. Once those pages were improved, the components within each page were ready for the next step in the process - creating Razor (.cshtml) files for all of the components.

By creating these files, Sitecore was then able to render the content necessary on the front end. The Razor files contained special syntax that provided space for the content and still supported all of the SCSS and styling done in React.

Creating the Razor files required a lot of debugging and learning, but was a fruitful process. I would create the content fields for specific components in Sitecore, then write the component file, and finally publish pages in a Sitecore development environment in order to test to make sure the components were rendering correctly.

Deployment

Once everything was tested in the development environment, I could then work with the IT department to deploy the working code to staging and then production. From there, I updated our production and staging Sitecore instances with all of the content models for the new pages and components, so that they would be ready for content.

After all the content models were ready to go with the new components, I worked with our copywriter to upload all of the new copy for the pages inside Sitecore.

Summary

Overall, creating a component library and fully-functioning CMS within Sitecore using React and Razor was a tall challenge. It helped me to learn how product pages for marketing websites are built - from choosing colors and fonts to writing copy. I also learned how to build reusable components in React and then convert them into a file format that Sitecore can read. It was fun to design and think through how the backend of the code would work from the CMS standpoint, because it required me to think from a content-editor's perspective as well as the end user's perspective. The content editors needed to be able to quickly and efficiently update copy, while the end user needs to be able to read and digest the copy on a myriad of devices, from mobile to desktop.