Documentation
Feedback
Guides
Storefront Development

Storefront Development
2. Setting Up the Project
Now that your store is up and running after FastStore Onboarding, you're ready to set up your development environment and create a unique storefront that reflects your brand. Let's get started!
In this guide, you will:
  • Clone your store repository to your local machine.
  • Run a local development server, usually at http://localhost:3000/.
  • Make your first change in your storefront.

Before you begin

Required tooling

Before cloning your store's repository, ensure that you have the following tools on your machine:
Node.js
To run your FastStore project, you must have the latest Node.js version or a version higher than 15.0.0.
Yarn
We will use the yarn command-line interface to add functionalities to the store and also run tasks, such as starting a development server.
Install Yarn on macOS by running the following:

_10
brew install yarn

Install Yarn on Windows by running the following:

_10
npm install -g yarn

Git
When developing your store's website, you will use Git to push your code to the cloud. You will also use Git to download and install the required files for your project.
Visual Studio Code - Code Editor
When developing your store's website, you will need a code editor to write the code for your project, such as Visual Studio Code (a.k.a., VS Code). Visit the VS Code website, download and install the version appropriate to your operating system.
Although you might opt to use an alternative code editor, note that Visual Studio Code might help you follow along with the FastStore documentation since our documentation may include screenshots from VS Code.

Enabling Developer Mode (Windows users)

We strongly recommend enabling Developer Mode when using the terminal for FastStore projects. Since FastStore projects rely on creating symlinks, this mode grants the necessary permissions and privileges, reducing the chance of errors during development. To activate Developer Mode, refer to Microsoft's official guide on Enabling your device for development.
Running the FastStore project as an Administrator is not recommended.

Step 1: Cloning the Store's Repository

  1. Open the terminal and navigate to the directory where you want to store your project.
    For Windowns users we highly recommend to enable the Developer mode to run the terminal.
  2. Clone the repository created during the FastStore Onboarding by running the following command in the terminal:

    _10
    git clone https://github.com/vtex-sites/{storeName}

    Replace {storeName} for your store's repository.
  3. Change into the working directory by running the following command:

    _10
    cd {storeName}

  4. Install all the dependencies listed within the package.json file by running the following command:

    _10
    yarn install

  5. Open up your FastStore project in any code editor of your choice.
Note that your store configuration was already set during the FastStore Onboarding. Therefore, there is no need to connect your project to your VTEX account.
If you want to review these configurations, you can access the faststore.config.js file in the root directory of your project's repository.

Step 2: Running a local server

Let's check what the project looks like in a web browser so far.
  1. Start a local development server to serve your website:

    _10
    yarn dev

    This may take a few minutes. Once your development server is ready, the command line will output a similar message as the following:

    _10
    ready - started server on 0.0.0.0:3000, url: http://localhost:3000
    _10
    event - compiled client and server successfully in 333 ms (951 modules)

    The dev command is part of the FastStore CLI, a pre-configured command line interface in your starter project. Using the CLI, this command enables you to execute code to keep your store's project up-to-date with the @faststore/core package.
  2. Now, open your favorite web browser and navigate to the localhost served, for example, http://localhost:3000.
    {"base64":"  ","img":{"width":1887,"height":851,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":18865483,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/starter-gif___42003e72ece61064991a34c3f14e398f.gif"}}
Congratulations! You have just created your very first FastStore store website! 🎉
While your local development server is running, you can preview any changes you make to your files, and saved changes will hot reload in the browser. To stop the development server, return to the terminal and press Ctrl + C. To restart it, run yarn dev again.

Step 3: Making the first change in your store frontend

Now that your store is up and running locally, let's make a simple change in the storefront.
Let's make the first level of customization which updates the store's theme. For this customization, we are going to use the Soft Blue theme.
  1. Create a new file named soft-blue.scss in src/themes. This is going to be the new theme of your store.
  2. Add the following styles to src/themes/soft-blue.scss:
    src/themes/soft-blue.scss

    _77
    // ----------------------------------------------------------
    _77
    // GLOBAL TOKENS
    _77
    // Theme Soft Blue
    _77
    // ----------------------------------------------------------
    _77
    _77
    @layer theme {
    _77
    .theme {
    _77
    // --------------------------------------------------------
    _77
    // Colors (Branding Core)
    _77
    // --------------------------------------------------------
    _77
    _77
    // PALETTE
    _77
    --fs-color-main-0: #ecf0ff;
    _77
    --fs-color-main-1: #d8e2ff;
    _77
    --fs-color-main-2: #00419e;
    _77
    --fs-color-main-3: #002c71;
    _77
    --fs-color-main-4: #001947;
    _77
    _77
    --fs-color-accent-0: #ebdcff;
    _77
    --fs-color-accent-1: #8d50fd;
    _77
    --fs-color-accent-2: #732fe2;
    _77
    --fs-color-accent-3: #5900c8;
    _77
    --fs-color-accent-4: #4700a0;
    _77
    _77
    // HIERARCHY
    _77
    --fs-color-primary-bkg: var(--fs-color-main-4);
    _77
    --fs-color-primary-bkg-active: var(--fs-color-main-2);
    _77
    --fs-color-primary-bkg-light: var(--fs-color-main-0);
    _77
    --fs-color-primary-bkg-light-active: var(--fs-color-main-1);
    _77
    _77
    // SITUATIONS
    _77
    --fs-color-success-bkg: #cee8de;
    _77
    --fs-color-warning-bkg: #f6e0ba;
    _77
    _77
    // COMPONENTS & STATES
    _77
    --fs-color-text-display: var(--fs-color-main-4);
    _77
    _77
    --fs-color-action-bkg: var(--fs-color-accent-3);
    _77
    --fs-color-action-bkg-hover: var(--fs-color-accent-2);
    _77
    --fs-color-action-bkg-active: var(--fs-color-accent-1);
    _77
    _77
    // --------------------------------------------------------
    _77
    // Typography (Branding Core)
    _77
    // --------------------------------------------------------
    _77
    _77
    // FACE
    _77
    --fs-text-face-body: 'Lato', -apple-system, system-ui, BlinkMacSystemFont, sans-serif;
    _77
    _77
    // --------------------------------------------------------
    _77
    // Refinements
    _77
    // --------------------------------------------------------
    _77
    _77
    // BORDERS
    _77
    --fs-border-radius: 0.25rem;
    _77
    _77
    // SHADOW
    _77
    --fs-shadow: none;
    _77
    --fs-shadow-darker: 0 0 10px rgb(0 0 0 / 20%);
    _77
    --fs-shadow-hover: 0 1px 4px rgb(0 0 0 / 10%), 0 6px 8px rgb(0 0 0 / 10%);
    _77
    _77
    // --------------------------------------------------------
    _77
    // FS UI Components
    _77
    // --------------------------------------------------------
    _77
    // Add here the customizations for FastStore UI components.
    _77
    _77
    --fs-logo-width: 8rem;
    _77
    _77
    [data-fs-product-card] {
    _77
    --fs-product-card-border-color: transparent;
    _77
    --fs-product-card-border-color-hover: var(--fs-border-color-light);
    _77
    _77
    &[data-fs-product-card-bordered='true'] {
    _77
    --fs-product-card-border-color: var(--fs-border-color-light);
    _77
    }
    _77
    }
    _77
    }
    _77
    }

  3. Open the faststore.config.js file and changes the theme from custom-theme to soft-blue.
    faststore.config.js

    _10
    theme: 'soft-blue',

  4. Restart the server and check in the browser the new theme applied to your store. You may need to refresh the page.
    {"base64":"  ","img":{"width":1900,"height":708,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":857356,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/soft-blue___9eb9e3e506de6396df954598739be8f8.png"}}
    It is important to highlight that the store's logo is set through the Headless CMS.
Contributors
3
Photo of the contributor
Photo of the contributor
Photo of the contributor
+ 3 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
3
Photo of the contributor
Photo of the contributor
Photo of the contributor
+ 3 contributors
On this page