# Setting Up Frontend {% embed url="" %} Setting Up ScandiPWA Frontend {% endembed %} Topics covered in this tutorial: * [How To Start The Development Set-Up?](https://docs.scandipwa.com/how-to-tutorials-introductory/setting-up-frontend#how-to-start-the-development-set-up) * [Working With The Front-End Container: Difference Between The Production And Development Set-Up](https://docs.scandipwa.com/how-to-tutorials-introductory/setting-up-frontend#working-with-the-front-end-container-difference-between-the-production-and-development-set-up) * [Overriding A Component: Step-By-Step Walkthrough](https://docs.scandipwa.com/how-to-tutorials-introductory/setting-up-frontend#overriding-a-component-step-by-step-walkthrough) ## What Is A Front-End Container? ScandiPWA Docker set-up comes with two options. You can either wither with or without front-end. A front-end container completely replaces the front-end for the application. So, instead of the Magento server providing you with the front-end, the `webpack` dev server does it. ## How To Start The Development Set-Up? You can check out one of our [Docker set-up tutorials](https://docs.scandipwa.com/start-and-upgrade/linux-docker-setup) to find out more about the recommended aliases. To start the development set-up use: ```bash docker-compose -f docker-compose.yml -f docker-compose.local.yml -f docker-compose.ssl.yml -f docker-compose.frontend.yml up -d --remove-orphans ``` Or, if you have this alias set up ```bash # docker-compose with front-end alias dcf="docker-compose -f docker-compose.yml -f docker-compose.local.yml -f docker-compose.ssl.yml -f docker-compose.frontend.yml" ``` use ```bash dcf up -d --remove-orphans ``` ## Working With The Front-End Container: Difference Between The Production And Development Set-Up | PRODUCTION SET-UP | DEVELOPMENT SET-UP | | -------------------------------------------------- | ------------------------------------------------ | | | `...-f frontend.compose.frontend.yml...` | |

M2
handles all requests

| `/graphql`, `/admin` —> M2 **back-end** server | | `npm run build` | `/category`, `/123` etc. —> `webpack` dev server | | Customization works | No customization | | URL rewrites work | No URL/rewrites/redirects | | | Dev server watches the files | | | In-memory caching - quick recompilation | ### The Development Set-Up * To start, use an additional file `docker-compose-frontend.yml` or the `dcf` alias. * `/graphql` and `/admin` will be handled by Magento. * `/category`, `/products` etc. will be handled by the `webpack` dev server * The `webpack` dev-server will be running in a container called `frontend`. * No customization abilities. * ScandiPWA supports color and content customization, however, it won’t function in development mode * No URL rewrites/redirects . * Magento router is not involved in the response generation, instead it is done by the `webpack` dev server. * What are the pluses of this approach? * Dev server watches the files from your theme directory `app/design/frontend/Scandiweb/pwa`. Recompiles after every change. * In-memory caching allows for quick recompilation of only the files which are changed or hot-reloading. ### The Production Set-Up * Every request is handled by Magento * Any change in the ScandiPWA folder will require for you to run the command `npm run build` from its directory. * Any change requires full recompilement unlike in the development mode, where only the changed files are recompiled. * URL rewrites work * Customization works * If you want to check out your customization, you need to switch into production mode and remove `-f docker-compose.frontend.yml` from the stack {% hint style="warning" %} **Note:** The first set-up must be done in production mode, without the front-end container {% endhint %} You can check out our docs for a [step-by-step guide](https://docs.scandipwa.com/start-and-upgrade/linux-docker-setup) on how to correctly set-up. ## Overriding A Component: Step-By-Step Walkthrough If you don’t want to debug, change the `.env` file’s `PROJECT-IMAGE = xdebug` to `PROJECT-IMAGE = latest`. Now, when force recreating with `dcf up -d --remove-orphans` we see that the front-end container gets set up. Use the alias `frontlogs` or `dcf logs -f frontend` to see what the state of the application is. If you see the following output, the front-end is ready. You can open a browser and go to `scandipwa.local` to make sure that, indeed, the front-end is ready and will hot-reload. ``` ℹ ｢wdm｣: Compiled successfully ``` Open the folder `scandipwa-base/src/app/design/frontend/Scandiweb/pwa/src` and create an `app` folder in it. You can check out the ScandiPWA [VSCode extension](https://github.com/scandipwa/scandipwa-development-toolkit) to improve the speed of your workflow. Assuming that you have the extension installed, search for `ScandiPWA: Extend source component` and select `Breadcrumbs` as a component to override. Press ok and then `Extend them!`. You’ll see the `Breadcrumbs.component.js` file. Here `eslint` is already configured, but feel free to read more [here](https://eslint.org/docs/2.0.0/user-guide/configuring) or [here](https://medium.com/progressivewebapps/scandipwa-updates-august-11-issue-58-f97853034ebe), and check out the ScandiPWA [`eslint` plug-in](https://github.com/scandipwa/eslint). Open the `Breadcrumbs.override.style.scss` file, it will be full of warnings due to the fact that [`stylelint`](https://stylelint.io/) is working. Let’s check-out where the breadcrumbs are displayed on the web app. Go to your browser and type `scandipwa.local`. Then go to “woman” > “dresses” for example, and right-click “Inspect element”. You’ll see the element class `Breadcrumbs` and all of its children who have `.Breadcrumbs-List` styles. This is called BEM or Block Element Modifier and you can read more about it [here](http://getbem.com/introduction/). For this example we’re interested in where the color of `Breadcrumbs` is and upon further inspection we can see that it happens in the `.Breadcrumbs` block. Return back to the `Breadcrumbs.override.style.scss` file and type the following. ```javascript :root{ --breadcrumbs-background: red; } ``` Go back to your browser to check if its working. You should see a red breadcrumb container. This happens because the front-end container immediately compiles the styles and anything else in the ScandiPWA front-end app. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://scandipwa.gitbook.io/docs/how-to-tutorials-introductory/setting-up-frontend.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.