FastStore WebOps - Dashboard
Once you create your FastStore project or are already working on customizing it, you can use the WebOps dashboard to see an overview of website deployments and performance.
The WebOps dashboard provides a comprehensive overview of website builds and deploy previews and offers suggestions on how to improve storefront performance based on Lighthouse scores.
To access the WebOps dashboard, go to Storefront > FastStore WebOps in the VTEX Admin. The dashboard has four tabs: Overview, Deploys, Integrations, and Settings.
Overview
The Overview tab provides a quick snapshot of key website details, including the live store URL, CMS information, and latest deploy.
Production overview
The Production overview section provides the following information about the latest live store deploy:
| Field | Description |
|---|---|
| Live Store | URL of your production environment, accessible to shoppers. |
| Repository | GitHub repository associated with the project. |
| Source | Commit for the current deployment, including date, time, and author. |
| CMS Provider | Link to Headless CMS. |
| CMS Project | Link to the FastStore project in 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. You can find more details by clicking the link below the
Deploybutton.
Lighthouse scores
When your store goes live (in production), ensuring optimal performance and a good user experience is crucial. The Lighthouse scores section offers insights into four key areas measured by Lighthouse, helping you understand their impact on store 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 the recent deploys to your production store. Each item on the list is composed of the following:
For a complete list of all store deployments and details about them, see the Deploys tab.
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 in its corresponding branch.
Deploys
The Deploys tab provides insights into store deployments, including their status (success, failed, etc.). The table below summarizes the key features of the Deploys page.
| Feature | Description |
|---|---|
| 1 - Search bar | Allows you to search by deploy ID, commit, message, or author. |
| 2 - Pagination | Allows you to navigate through pages of deployment data. |
| 3 - Enviroment | Filters deployments by environment:
|
| 4 - Branch | Filters deployments by GitHub branches. |
| 5 - Status | Filters deploy status:
|
| 6 - Sort by | Filters deployments by Latest first or Oldest First. |
| 7 - Deployments table | Lists all store deployments with the following information:
|
Deployment details
For more information, click any entry in the deploy table.
In the Deploy Steps section, select a step (example: Build - Discovery) to view logs. The logs show on the right and help diagnose failed deployments.
Integrations
The Integrations tab allows you to configure store pages for Lighthouse tests. 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, ensuring a consistent testing experience.
Configuring pages for Lighthouse testing
To set the pages you want to test with Lighthouse, follow these steps:
- In the Path for a PLP field, enter the category slug defined in Catalog.
- In the Path for a PDP field, 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 deployment, go to the Overview tab and access the Lighthouse Scores section to check the scores for those pages.
Settings
The Settings tab is where you configure the production domain of the store as part of the go-live process. You can add your primary production domain to make sure it's properly set up for customer access. Before adding the domain, make sure the external DNS settings are correctly configured in your VTEX account settings.
Production domain
In the Production domain section, choose the store domain from the dropdown list in the Host field and click
Add to set up the primary domain of your store.Current domains
The Current Domains section displays the default and primary domains that have been configured for your store. This section serves as a reference point to ensure that your domains are correctly set up in WebOps. By checking this list, you can confirm whether your domains have been successfully added and are ready for use in the FastStore environment.
If your domain isn't listed, it may indicate an issue with the configuration or DNS settings that need to be addressed before proceeding with the go-live.
Deleting the project
To delete your FastStore project, click the More actions menu (
⋮). Then, click Delete Project.A modal to confirm your action will open.
Proceed with caution. Deleting the project can't be undone and will permanently remove all deployments and domains associated with it.