Skip to content

Commit

Permalink
fix: setting-up
Browse files Browse the repository at this point in the history
  • Loading branch information
@carolinamenezes
carolinamenezes committed Jan 13, 2024
1 parent 65fc0eb commit 9efbf0d
Showing 1 changed file with 144 additions and 154 deletions.
298 changes: 144 additions & 154 deletions docs/faststore/docs/getting-started/2-setting-up-the-project.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,67 +23,57 @@ In this guide, you will:
Before cloning your store's repository, ensure that you have the following tools on your machine:

<details>
<summary>
<b>Node.js</b>
</summary>
<p>
<p>To run your FastStore project, you must have the latest <b><a href="">Node.js</a></b> version or a version higher than `15.0.0`.</p>
<ul>
<li>- <b><a href="https://nodejs.org/tr/download/package-manager#macos">Install Node.js on macOS using Homebrew</a></b></li>
<li>- <b><a href="https://nodejs.org/tr/download/package-manager#windows-1">Install Node.js on Windows</a></b> </li>
<li>- <b><a href="https://nodejs.org/tr/download/package-manager#debian-and-ubuntu-based-linux-distributions">Install Node.js on Linux</a></b></li>
</ul>
</p>
<summary>Node.js</summary>

To run your FastStore project, you must have the latest Node.js version or a version higher than `15.0.0`.</p>
- [Install Node.js on macOS using Homebrew](https://nodejs.org/tr/download/package-manager#macos)
- [Install Node.js on Windows](https://nodejs.org/tr/download/package-manager#windows-1)
- [Install Node.js on Linux](https://nodejs.org/tr/download/package-manager#debian-and-ubuntu-based-linux-distributions)

</details>

<details>
<summary>
<b>Yarn</b>
</summary>
<p>
We will use the <strong><a href="https://yarnpkg.com/">yarn</a></strong> command-line interface to add functionalities to the store and also run tasks, such as starting a development server.
</p>
<details>
<summary>Install Yarn on macOS by running the following:</summary>
```bash
brew install yarn
```
</details>

<details>
<summary>Install Yarn on Windows by running the following:</summary>
```bash
npm install -g yarn
```
</details>
<summary>Yarn</summary>

We will use the [yarn](https://yarnpkg.com/) command-line interface to add functionalities to the store and also run tasks, such as starting a development server.

<details>
<summary>Install Yarn on macOS by running the following:</summary>

```bash
brew install yarn
```

</details>

<details>
<summary>
<b>Git</b>
</summary>
<p>
When developing your store's website, you will use [Git](https://git-scm.com/) to push your code to the cloud. You will also use Git to download and install the required files for your project.
</p>
<ul>
<li>- <strong><a href="https://git-scm.com/download/mac">Install Git on macOS using Homebrew</a></strong></li>
<li>- <strong><a href="https://git-scm.com/download/win">Install Git on Windows</a></strong> </li>
<li>- <strong><a href="https://git-scm.com/download/linux">Install Git on Linux</a></strong></li>
</ul>
<summary>Install Yarn on Windows by running the following:</summary>

```bash
npm install -g yarn
```
</details>
</details>

<details>
<summary>Git</summary>

When developing your store's website, you will use [Git](https://git-scm.com/) to push your code to the cloud. You will also use Git to download and install the required files for your project.

- [Install Git on macOS using Homebrew](https://git-scm.com/download/mac)
- [Install Git on Windows](https://git-scm.com/download/win)
- [Install Git on Linux](https://git-scm.com/download/linux)

</details>

<details>
<summary>
<b>Visual Studio Code - Code Editor</b>
</summary>
<p>
When developing your store's website, you will need a code editor to write the code for your project, such as <strong><a href="https://code.visualstudio.com/">Visual Studio Code</a></strong> (a.k.a., VS Code). Visit the <strong><a href="https://code.visualstudio.com/">VS Code</a></strong> website, download and install the version appropriate to your operating system.
</p>
<summary>Visual Studio Code - Code Editor</summary>

When developing your store's website, you will need a code editor to write the code for your project, such as [Visual Studio Code](https://code.visualstudio.com/) (a.k.a., VS Code). Visit the [VS Code](https://code.visualstudio.com/) website, download and install the version appropriate to your operating system.

</details>

> ℹ️ Although you might opt to use an alternative code editor,
note that [Visual Studio Code](https://code.visualstudio.com/) might help you follow along with the FastStore documentation
since our documentation may include screenshots from VS Code.
> ℹ️ Although you might opt to use an alternative code editor, note that [Visual Studio Code](https://code.visualstudio.com/) might help you follow along with the FastStore documentation since our documentation may include screenshots from VS Code.
### Enabling Developer Mode (Windows users)

Expand All @@ -101,32 +91,33 @@ To activate Developer Mode, refer to Microsoft's official guide on [Enabling you

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](/docs/getting-started/2-setting-up-the-project#developer-mode-for-windows-users) to run the terminal.
> ℹ️ For Windowns users we highly recommend to enable the [Developer mode](/docs/getting-started/2-setting-up-the-project#developer-mode-for-windows-users) to run the terminal.
2. Clone the repository created during the [FastStore Onboarding](/docs/guides/faststore/getting-started-1-faststore-onboarding-onboarding#repository-and-live-store-created) by running the following command in the terminal:

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

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

```bash
cd {storeName}
```
```bash
cd {storeName}
```

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

```bash
yarn install
```
```bash
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](/docs/guides/faststore/getting-started-1-faststore-onboarding-onboarding#repository-and-live-store-created). 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.
If you want to review these configurations, you can access the `faststore.config.js` file in the root directory of your project's repository.

---

Expand All @@ -136,22 +127,22 @@ Let's check what the project looks like in a web browser so far.

1. Start a local development server to serve your website:

```bash
yarn dev
```
```bash
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:

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

> ℹ️ The `dev` command is part of the [FastStore CLI](/docs/getting-started/4-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](/docs/getting-started/3-project-structure).
> ℹ️ The `dev` command is part of the [FastStore CLI](/docs/getting-started/4-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](/docs/getting-started/3-project-structure).
2. Now, open your favorite web browser and navigate to the localhost served, for example, [http://localhost:3000](http://localhost:3000).

![localhost-example](https://vtexhelp.vtexassets.com/assets/docs/src/starter-gif___42003e72ece61064991a34c3f14e398f.gif)
![localhost-example](https://vtexhelp.vtexassets.com/assets/docs/src/starter-gif___42003e72ece61064991a34c3f14e398f.gif)

*Congratulations!* You have just created your very first FastStore store website! 🎉

Expand All @@ -169,95 +160,94 @@ Let's make the first level of customization which updates the store's [theme](/d

2. Add the following styles to `src/themes/soft-blue.scss`:

```scss filename="src/themes/soft-blue.scss" copy
// ----------------------------------------------------------
// GLOBAL TOKENS
// Theme Soft Blue
// ----------------------------------------------------------

@layer theme {
.theme {
// --------------------------------------------------------
// Colors (Branding Core)
// --------------------------------------------------------

// PALETTE
--fs-color-main-0: #ecf0ff;
--fs-color-main-1: #d8e2ff;
--fs-color-main-2: #00419e;
--fs-color-main-3: #002c71;
--fs-color-main-4: #001947;

--fs-color-accent-0: #ebdcff;
--fs-color-accent-1: #8d50fd;
--fs-color-accent-2: #732fe2;
--fs-color-accent-3: #5900c8;
--fs-color-accent-4: #4700a0;

// HIERARCHY
--fs-color-primary-bkg: var(--fs-color-main-4);
--fs-color-primary-bkg-active: var(--fs-color-main-2);
--fs-color-primary-bkg-light: var(--fs-color-main-0);
--fs-color-primary-bkg-light-active: var(--fs-color-main-1);

// SITUATIONS
--fs-color-success-bkg: #cee8de;
--fs-color-warning-bkg: #f6e0ba;

// COMPONENTS & STATES
--fs-color-text-display: var(--fs-color-main-4);

--fs-color-action-bkg: var(--fs-color-accent-3);
--fs-color-action-bkg-hover: var(--fs-color-accent-2);
--fs-color-action-bkg-active: var(--fs-color-accent-1);

// --------------------------------------------------------
// Typography (Branding Core)
// --------------------------------------------------------

// FACE
--fs-text-face-body: 'Lato', -apple-system, system-ui, BlinkMacSystemFont, sans-serif;

// --------------------------------------------------------
// Refinements
// --------------------------------------------------------

// BORDERS
--fs-border-radius: 0.25rem;

// SHADOW
--fs-shadow: none;
--fs-shadow-darker: 0 0 10px rgb(0 0 0 / 20%);
--fs-shadow-hover: 0 1px 4px rgb(0 0 0 / 10%), 0 6px 8px rgb(0 0 0 / 10%);

// --------------------------------------------------------
// FS UI Components
// --------------------------------------------------------
// Add here the customizations for FastStore UI components.

--fs-logo-width: 8rem;

[data-fs-product-card] {
--fs-product-card-border-color: transparent;
--fs-product-card-border-color-hover: var(--fs-border-color-light);

&[data-fs-product-card-bordered='true'] {
--fs-product-card-border-color: var(--fs-border-color-light);
```scss src/themes/soft-blue.scss
// ----------------------------------------------------------
// GLOBAL TOKENS
// Theme Soft Blue
// ----------------------------------------------------------

@layer theme {
.theme {
// --------------------------------------------------------
// Colors (Branding Core)
// --------------------------------------------------------

// PALETTE
--fs-color-main-0: #ecf0ff;
--fs-color-main-1: #d8e2ff;
--fs-color-main-2: #00419e;
--fs-color-main-3: #002c71;
--fs-color-main-4: #001947;

--fs-color-accent-0: #ebdcff;
--fs-color-accent-1: #8d50fd;
--fs-color-accent-2: #732fe2;
--fs-color-accent-3: #5900c8;
--fs-color-accent-4: #4700a0;

// HIERARCHY
--fs-color-primary-bkg: var(--fs-color-main-4);
--fs-color-primary-bkg-active: var(--fs-color-main-2);
--fs-color-primary-bkg-light: var(--fs-color-main-0);
--fs-color-primary-bkg-light-active: var(--fs-color-main-1);

// SITUATIONS
--fs-color-success-bkg: #cee8de;
--fs-color-warning-bkg: #f6e0ba;

// COMPONENTS & STATES
--fs-color-text-display: var(--fs-color-main-4);

--fs-color-action-bkg: var(--fs-color-accent-3);
--fs-color-action-bkg-hover: var(--fs-color-accent-2);
--fs-color-action-bkg-active: var(--fs-color-accent-1);

// --------------------------------------------------------
// Typography (Branding Core)
// --------------------------------------------------------

// FACE
--fs-text-face-body: 'Lato', -apple-system, system-ui, BlinkMacSystemFont, sans-serif;

// --------------------------------------------------------
// Refinements
// --------------------------------------------------------

// BORDERS
--fs-border-radius: 0.25rem;

// SHADOW
--fs-shadow: none;
--fs-shadow-darker: 0 0 10px rgb(0 0 0 / 20%);
--fs-shadow-hover: 0 1px 4px rgb(0 0 0 / 10%), 0 6px 8px rgb(0 0 0 / 10%);

// --------------------------------------------------------
// FS UI Components
// --------------------------------------------------------
// Add here the customizations for FastStore UI components.

--fs-logo-width: 8rem;

[data-fs-product-card] {
--fs-product-card-border-color: transparent;
--fs-product-card-border-color-hover: var(--fs-border-color-light);

&[data-fs-product-card-bordered='true'] {
--fs-product-card-border-color: var(--fs-border-color-light);
}
}
}
}
}
}

```
```

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

```js filename="faststore.config.js" copy
theme: 'soft-blue',
```
```js faststore.config.js"
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.

![theme-soft-blue](https://vtexhelp.vtexassets.com/assets/docs/src/soft-blue___9eb9e3e506de6396df954598739be8f8.png)
![theme-soft-blue](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](/docs/headless-cms-overview).
> ℹ️ It is important to highlight that the store's logo is set through the [Headless CMS](/docs/headless-cms-overview).

0 comments on commit 9efbf0d

Please sign in to comment.