Spire CMS Front-End PDF

Get started with Spire CMS Updated 7 months ago FollowNot yet followed by anyone Optimizely Configured Commerce Spire CMS is both a CMS and a reference site. Optimizely created Spire with the following goals: Improved upgradability for the frontend. More c...

Get started with Spire CMS Updated 7 months ago FollowNot yet followed by anyone Optimizely Configured Commerce Spire CMS is both a CMS and a reference site. Optimizely created Spire with the following goals: Improved upgradability for the frontend. More composable commerce pages. Simple CMS data structure. Improved page editing experience. SEO/Server-side rendering. Lighter JavaScript payloads. More control over site development without developer intervention. Lower implementation costs compared to other platforms. While Classic is built on Angular.js, Spire is build on React/Redux. However, they both use widgets to construct pages and APIs to retrieve data with the CMS/JavaScript framework. See the Feature Comparison table below. Benefits of Spire Spire has several benefits that help you create and maintain your Configured Commerce site: An updated column design with flexibility for page layout and the ability to insert and organize widgets on all pages. Configurable widgets to support common uses for each widget type. o For example, table widgets have a multi-select option available for data elements in tables. An organized gallery of widgets you can select and search from using the Widget Selection Interface. This includes more out-of-the-box granular widgets for low- code/no code flexibility. An option to create Layouts for templates on frequently used page types such as News/Articles. More publishing options: o Page-specific content for languages and context. o Page Restoration that can compare and restore previous versions of a page.  Tags to make finding pages easier. Tags allow you to group and locate pages within the Page filter with greater flexibility. Pages can also have multiple tags that you can add and remove as desired. Device preview (mobile, tablet, and desktop) through quick links, giving you a quicker understanding of what the page will look like without having to resize the browser. The Style Guide, which allows you to make site-wide styling changes through configurations and revert to the blueprint's default when needed. This feature is protected by permissions and can be provided to users by the website administrator. Shared content in a centralized place to use widgets across pages and websites. You can apply filterable tags to help locate shared content. This feature replaces Website Hierarchy from Classic. A Compact Header to create a condensed version of your site’s header using configurations and the Style Guide that displays as users scroll down the page. A React-based framework for backwards compatibility, large JavaScript library for developers, a lower learning curve, and higher performance. Improved SEO – Crawlers from Google and other Search Providers will see the same content as users without requiring you to maintain multiple versions of the same page by following our Server-Side rendering guidelines Core Web Vital improvements to significantly increase the scores assigned by Google for pages and components out of the box. Accessibility improvements during development to make certification easier. o Optimizely uses WCAG 2.0 AA as a guide to develop Spire storefront pages and components. If you stay close to the base page design, you should obtain accessibility certification more easily. o Accessibility certification is project-specific because much of the certification relies on project-specific factors such as data population (image alt text), the design of the site (colors), extensions that are added on top of the platform, and so on. You must complete your own certification process to guarantee compliancy when needed. Support for Classic Because all customers can now use the Spire CMS, Optimizely has announced the end of life for Classic CMS. This announcement only impacts customers using the Classic CMS. It does not affect those using the Spire CMS. Configured Commerce customers can implement Spire-based sites on the same instance as their existing Classic-based sites. With the v5.1 SDK release in January 2022, on- premises customers can also utilize Spire. Learn more about migrating your Configured Commerce site from Classic to Spire For Cloud customers running Classic sites that want to start creating a Spire site, Optimizely first must migrate your instance from the Classic “Pod” infrastructure to the Spire “Container” infrastructure. Please contact your Customer Success Manager to schedule this migration. Because moving from Classic to Spire requires effort, Optimizely wanted to provide as much notice and support for this transition as possible and continue to add value to your existing sites. The following timeline outlines the three-year end-of-life plan: 2022 (Year One) – Continue to add new features to Classic, including new features and enhancements to existing features. 2023 & 2024 (Years Two & Three) – Make bug and security fixes to Classic. While Optimizely will add new features to Spire, Classic will only receive fixes for base code bugs and critical security issues. January 1, 2025 – End of life for Classic. There will be no more base code changes made to Classic after this date. Feature parity between Classic and Spire The sites have some differences in the way features are implemented, but they support the same Configured Commerce feature sets. If you already have a highly customized site, new features introduced in Classic must be manually worked into the site. Feature comparison: Classic and Spire Feature/Capability Classic CMS Spire CMS Technology Angular.js, React, Redux, TypeScript, Foundation, Node TypeScript Front end upgrade model Merge as desired Automated Styling approach Cascading Style Style Guide, user- Sheets, base.css configurable, styled- components Structure by website Themes Content Library Server/front-end load Heavy front end, API- Hybrid, some on front end only on back end mixed with some on back end Widget construction Custom created Built on Mobius and then customized Widget code C#/TypeScript TypeScript Widget extensibility New widgets New widgets, property injection or handler chain Widget sizing ? reference site Larger widgets Smaller, more granular widgets SPA (single-page application) Yes Yes Supports GTM, Chat, and other Yes Yes JavaScript-based extensions Build process Grunt Webpack Hot module replacement No Yes SEO page for bots Separate page No longer needed Accessibility By extension Reference site includes accessibility features  Responsive preview By resizing screen Toggle to change view Start a Spire project Describes how to start a Spire project. Suggest Edits Getting started with a Spire project is very similar to beginning an Optimizely Configured Commerce project with Classic CMS, with a few changes. See Understanding the development architecture for a front-end architecture diagram of Spire CMS. All development work is the responsibility of the Implementation Team. As a result, implementation teams need to initiate the request to provision Configured Commerce environments in the cloud for Optimizely customers. This document outlines the process, environments, and resources involved to ensure a smooth transition for implementation teams and Optimizely customers. Setup and configure There are multiple data points that are needed to initiate a Configured Commerce project. Optimizely uses Git source control and infrastructure tools to deploy Configured Commerce websites to the cloud environment. Additionally, the implementation team will authorize the GitHub account name insite-teamcity- build read-only access to the new repository for each Configured Commerce instance/project in the cloud. Important Be sure to review the README.md file when you complete your Developer Setup. You must add /contentadmin to the end of your site URL to access the Spire CMS. Front end setup (/FrontEnd) Install node/npm Run `npm install` from /FrontEnd. Follow the instructions below for use with Visual Studio Code and Rider/WebStorm. Visual Studio code Open the /FrontEnd directory. A launch configuration is already present so no additional steps are required to start the application. (Recommended) Install the ESLint extension from Microsoft to see ESLint errors in the editor. Rider/WebStorm make sure to enable tslint settings - languages & frames - typescript - tslint - pick proper tslint.json file turn on recompile on changes to see ts errors in rider a number of launch configurations are already present Launch Spire Run `npm run start` from /FrontEnd. This launches Spire with the default blueprint and port. Note: This step is already setup in Visual Studio Code and Rider as a launch configuration. Go to http://localhost:3000. By default, API requests are forwarded to http://commerce.local.com. You can change this URL in the /FrontEnd/config/settings.js file. Launch Spire with a custom blueprint In addition to launching Spire with the base blueprint, you can create a custom blueprint and launch spire using that blueprint. The steps to do that are below: Create new blueprints in Spire. Run `npm run start {customBlueprintName}` from /FrontEnd. Go to http://localhost:3000. You can also create a launch configuration in Visual Studio Code or Rider to launch spire using the custom blueprint. Site generation The pages for a site will automatically generate the first time a request is made to the server, if there are no pages present. You can force the regeneration of the site by running the following SQL statement in your Configured Commerce database: SQL ```` ```sql DELETE FROM content.Node ``` ```` Then load the site again. Project initiation form The following online form is used to capture the important data-points needed to provision the Configured Commerce in the Cloud environment. To submit the project initiation form, follow the same process you would to submit a ticket and select the Project Initiation Form from the Form drop-down list. Populate the fields that appear. If you want your site to have access to Spire, you will need to indicate this in the CMS Type field. You may select both Spire CMS and Classic CMS if necessary. Upgrade base code After you have wired up your Extensions repo to your Spire environment, you can update the base code version yourself by updating the versionInfo.yaml file in your Extensions repo. Note that versionInfo.yaml is only used in a containerized environment and its not just for Spire. Non containerized environments will require a ticket to upgrade the base code version. Deployment and environments Optimizely provisions and maintain two hosting environments: Sandbox and Production. Note that Production environments for Spire-enabled projects will not be available until mid-July; starting on June 15, users can request a production environment, which will be provided four weeks after the request is made. Code pushed to the Sandbox and Production branches are picked up by Optimizely's CI, which builds the Extensions, Classic Themes, and Spire Blueprints. For Sandbox environments, the deployment of the 'sandbox' branch artifacts are automatic. For Production environments, deployments are done by request.