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 manage the following configurations:
- Production domain: Sets the primary URL customers use to access the live store.
- Secrets: Store and securely manage sensitive information, such as API keys and passwords, required during FastStore deployment.
Production domain
As part of the go-live process, you must define your store's production domain, the main URL customers will use to access your store.
Before adding the domain, make sure the external DNS settings are correctly configured in your VTEX account settings.
In the Production domain section, select the store domain from the dropdown list in the Host field and click
Add to set up your store's primary domain.Current domains
The Current Domains section displays the default and primary domains configured for your store. This section is a reference point to ensure 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. If you follow the external DNS settings guide correctly and the problem persists, open a ticket to VTEX support.
Secrets
Secrets are encrypted credentials, like API keys and passwords, that require secure management during FastStore deployment. Standardizing secrets management via WebOps enhances security and consistency across deployment providers.
In the Secrets section, define the Key and Value in their respective fields and click
Add to set up the secret.Learn more about Secrets in Managing secrets.
Current keys
The Current keys section lists all secrets configured for your store. This list shows each secret’s key (the identifier), while the value is hidden by default for security reasons. You can toggle the visibility of a secret’s value if needed.
In this section, you can update or delete an existing secret by clicking
⋮ and choosing the corresponding option, Edit or Delete.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 all deployments and associated domains will be permanently removed.