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, 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 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. |
| Source | 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 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 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 for a corresponding branch.
Deploys
The Deploys tab provides insights into your store's deployments, including their status (success, failed, etc.). The table below summarizes the key features of the Deploys page.
| Feature | Description |
|---|---|
| 1 - Search bar | Searches by deploy ID, commit, message, or author. |
| 2 - Pagination | Navigates 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 each store deployment 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. These logs appear on the right and help diagnose failed deployments.
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, 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 the Catalog.
- In the Path for a PDP field, enter the slug for the specific product detail page (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 your store’s production domain as part of the go-live process. Here, you can add your primary production domain to ensure 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.
This feature also supports multiple domains, allowing you to configure and enable each domain individually in the corresponding subaccount.
To learn more about domain configuration, including rules for main hosts, see the guide Configuring the store domain.
WebOps domain configuration always takes priority over any settings indiscovery.config.jsfile. It’s recommended that you manage all domain configurations through WebOps to centralize all domain settings into a single source.
Production domain
In the Production domain section, choose your store’s domain from the dropdown list within the Host field and then click
Add to set up the primary domain of your store.After adding your domain to WebOps, a new deployment will be triggered automatically. You can monitor the deployment's progress in the Deploy tab until it's fully completed and has the status
Success. If the domain setting is incorrect, the deployment will receive the status Failed, and you can check the build logs by following the instructions in Deployment details.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 is not listed, it may indicate an issue with the configuration or DNS settings that need to be addressed before proceeding with the go-live process.
To remove a domain that is no longer needed, click the trash icon alongside the current domain you want to remove.
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.