FastStore WebOps - Dashboard
Once you have created your FastStore project or are already working on customizing it, you can use the WebOps Dashboard to have an overview of your website’s deployments and performance.
The WebOps Dashboard provides a comprehensive overview of website builds and deploy previews and offers suggestions on how to improve your storefront's performance based on Lighthouse scores.
To access the WebOps Dashboard, in the VTEX Admin, go to Storefront > FastStore WebOps. The Dashboard has two tabs: Overview and Integrations.
Overview
The Overview tab provides a quick snapshot of your website's key details, including the live store URL, CMS information, and latest deploy.
Production Overview
The Production Overview section provides the following information about the latest deploy of your live store:
| Field | Description |
|---|---|
| Live Store | URL for your production environment, accessible to shoppers. |
| Repository | GitHub repository associated with the project. |
| Deploy | Commit for the current deployment, including the date, time, and who made it. |
| CMS Provider | Link to Headless CMS. |
| CMS Project | Link to the FastStore project in Headless CMS. |
Live store ID
After onboarding with the WebOps app, you can access your store through a live store URL. To find the live store URL, access Storefront > FastStore WebOps in the VTEX Admin. In the Production Overview card, locate the Live Store URL.
The live store URL includes a
liveStoreId, a unique identifier for your store. It combines your store account name and a live store ID number, for example: https://mystore-clwjc7fw200ay9qau1smn8i4l-21vm59f3q.b.vtex.app. Let's break down the example to understand the liveStoreId:mystore-clwjc7fw200ay9qau1smn8i4l-21vm59f3q.b: theliveStoreId.mystore: the account name.clwjc7fw200ay9qau1smn8i4l-21vm59f3q.b: the live store ID number.
The live store ID also helps you set up the Preview URL in the Headless CMS, enabling you to preview changes to your pages via the Headless CMS.
Live deployment statuses
This section also displays the status of the live deployment:
- Success: The commit was deployed to the production environment and is live.
- Queued: The commit is next in line to be deployed.
- In progress: The commit is currently being deployed.
- Failed: The deployment failed. Further details can be found by clicking the link below the
Deploybutton.
Lighthouse Scores
When your store goes live (in production), ensuring optimal performance and a good user experience becomes crucial. The Lighthouse Scores section offers insights into four key areas measured by Lighthouse, helping you understand their impact on your store's performance.
- Performance: Indicates how fast your pages load.
- Accessibility: Reflects how usable your pages are for people with disabilities.
- Best practices: Indicates how well your pages adhere to coding best practices.
- SEO: Reflects how well your pages are optimized for search engines.
These scores are based on the pages defined for testing in the Integrations tab.
Production Deploys
This section lists all the recent deploys to your production store. Each item on the list is composed of the following:
Preview Deploys
This section lists all the deploy previews created for GitHub branches in your project repository. These previews are automatically available for each pull request opened for a corresponding branch.
Integrations
The Integrations tab allows you to configure store pages for Lighthouse Tests. Here, you can specify the URLs for a product listing page (PLP) and a product details page (PDP) to undergo automatic Lighthouse score testing during deployments. This ensures a consistent testing experience.
Configuring pages for Lighthouse testing
To set the pages you want to test with Lighthouse, follow these steps:
- In the Default Category for PLP field, enter the category slug defined in the Catalog.
- In the Default Product Slug for PDP, enter the slug for the specific PDP you want to test.
- Click
Save.
Once you've set the pages for testing and after a new deploy, go to the Overview tab and access the Lighthouse Scores section to check the scores for those pages.
Deleting the project
To delete your FastStore project, click the More actions menu (
⋮). Then, click Delete Project.A modal to confirm your choice will open.
Proceed with caution. Deleting the project is irreversible and will permanently remove all deployments and domains associated with it.