Documentation
Feedback
Guides
Storefront Development

Storefront Development
FastStore

title: '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.
An error occurred while loading the image https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@EDU-14723-faststore-dashboard/images/dashboard-overview.png
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:
FieldDescription
Live StoreURL of your production environment, accessible to shoppers.
RepositoryGitHub repository associated with the project.
SourceCommit for the current deployment, including date, time, and author.
CMS ProviderLink to Headless CMS.
CMS ProjectLink 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 Deploy button.

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:
{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAIAAADwyuo0AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIklEQVR4nGPw8vYSFhZesWJFQkICQ0xMjJKS0omTJ+rq6wBrvgl/wzpdeQAAAABJRU5ErkJggg==","img":{"src":"https://vtexhelp.vtexassets.com/assets/docs/src/dashboard-production-deploys___840fcb7b30bc2c7a1e4e5d1d255a58f9.png","width":644,"height":247,"type":"png"}}
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.
An error occurred while loading the image https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@EDU-14723-faststore-dashboard/images/deploys-webops.png
FeatureDescription
1 - Search barAllows you to search by deploy ID, commit, message, or author.
2 - PaginationAllows you to navigate through pages of deployment data.
3 - EnviromentFilters deployments by environment:
  1. Production: The live store customers can interact with.
  2. Preview: Test environment for new features, design changes, and code modifications before releasing them to production.
4 - BranchFilters deployments by GitHub branches.
5 - StatusFilters deploy status:
  1. Queued: The deployment is next in line to be executed.
  2. In progress: The deployment is being executed.
  3. Success: The deployment has completed successfully.
  4. Failed: The deployment process encountered an error and didn't complete as expected.
6 - Sort byFilters deployments by Latest first or Oldest First.
7 - Deployments tableLists all store deployments with the following information:
  1. Score: Lighthouse score for the deployment.
  2. Source: Commit ID and branch.
  3. Author: Deploy author and the date and time of the deployment.
  4. Environment: The environment that was changed, Production or Preview.
  5. Deploy ID: The ID of the specific deployment.
  6. Status: The deploy status.

Deployment details

For more information, click any entry in the deploy table.
{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAIAAADwyuo0AAAACXBIWXMAAAPoAAAD6AG1e1JrAAAAI0lEQVR4nGPQ0db5/fv3x08fP376yBAWHrp79243N7eJU/oBy54O1rs5BWYAAAAASUVORK5CYII=","img":{"src":"https://vtexhelp.vtexassets.com/assets/docs/src/deployment-details___011bb7391157ad21eb965d8bcfc75b03.gif","width":1401,"height":745,"type":"gif"}}
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.
An error occurred while loading the image https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@EDU-14723-faststore-dashboard/images/integrations-webops.png

Configuring pages for Lighthouse testing

To set the pages you want to test with Lighthouse, follow these steps:
  1. In the Path for a PLP field, enter the category slug defined in Catalog.
  2. In the Path for a PDP field, enter the slug for the specific PDP you want to test.
  3. 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.
An error occurred while loading the image https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@EDU-14723-faststore-dashboard/images/settings-webops.png

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.
Contributors
2
Photo of the contributor
Photo of the contributor
Was this helpful?
Yes
No
Suggest Edits (GitHub)
Contributors
2
Photo of the contributor
Photo of the contributor
On this page