> For the complete documentation index, see [llms.txt](https://stack.sylius.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://stack.sylius.com/getting-started.md).
# Getting started
## Setup an admin panel
The Sylius Stack comes with a bunch of components that work great independently, but when they come together, that's when the stack's magic truly operates! Indeed, the highlight of this project is the ability to configure an admin panel UI within minutes.
### Create a new project
You can set up the Sylius Stack on existing Symfony projects, but in the case you are starting from scratch, here is what you need to do.
```bash
# With Composer:
composer create-project symfony/skeleton:"8.0.*" my_project_directory
cd my_project_directory
composer require webapp
# Or with Symfony CLI:
symfony new my_project_directory --version="8.0.*" --webapp
cd my_project_directory
```
### Allow Contrib Recipes
Sylius Stack recipes are hosted in the `symfony/recipes-contrib` repository. To ensure Symfony Flex installs them automatically, enable contrib recipes before requiring the packages:
```bash
composer config extra.symfony.allow-contrib true
```
### Install the package using Composer and Symfony Flex
Go to your project directory and run the following command:
```bash
composer require -W \
doctrine/orm \
doctrine/doctrine-bundle \
pagerfanta/doctrine-orm-adapter \
symfony/asset-mapper \
sylius/bootstrap-admin-ui \
sylius/ui-translations
```
Type "a" or "p" to configure the packages via Symfony Flex.
Do not forget to set your application secret environment variable:
{% code title=".env" %}
```dotenv
# ...
APP_SECRET=UseYourOwnSecretPlease
```
{% endcode %}
### Run your web server
```bash
docker compose up -d
symfony serve -d
```
The admin panel is ready to use. Now, it's your turn!
### Using AssetMapper
To prevent duplicate Ajax calls, disable the auto-initialized Stimulus app and Symfony UX stylesheets from the `sylius/bootstrap-admin-ui` package, so you can take control of Stimulus initialization in your own code.
#### Disabling Stimulus app & Symfony UX stylesheets from third party package
First, you need to disable the Stimulus App started by the `sylius/bootstrap-admin-ui` package and add a custom javascript app hook for the asset mapper.
{% tabs %}
{% tab title="YAML" %}
{% code lineNumbers="true" %}
```yaml
# config/packages/sylius_bootstrap_admin_ui.yaml
# ...
sylius_twig_hooks:
hooks:
# ...
# Disabling Symfony UX stylesheets
'sylius_admin.base#stylesheets':
symfony_ux:
enabled: false
'sylius_admin.base#javascripts':
app:
priority: 200
template: 'base/javascripts/app.html.twig'
# Disabling Stimulus App
symfony_ux:
enabled: false
```
{% endcode %}
{% endtab %}
{% tab title="PHP" %}
{% code title="config/packages/sylius\_bootstrap\_admin\_ui.php" lineNumbers="true" %}
```php
use Symfony\Component\DependencyInjection\Loader\Configurator\ContainerConfigurator;
return static function (ContainerConfigurator $containerConfigurator): void {
// ...
$containerConfigurator->extension('sylius_twig_hooks', [
'hooks' => [
'sylius_admin.base#stylesheets' => [
// Disabling Symfony UX stylesheets
'symfony_ux' => [
'enabled' => false,
],
],
'sylius_admin.base#javascripts' => [
// New hook
'app' => [
'priority' => 200,
'template' => 'base/javascripts/app.html.twig',
],
// Disabling Stimulus App
'symfony_ux' => [
'enabled' => false,
],
],
],
]);
};
```
{% endcode %}
{% endtab %}
{% endtabs %}
{% code title="base/javascripts/app.html.twig" lineNumbers="true" %}
```twig
{{ importmap('app') }}
```
{% endcode %}
#### Starting Stimulus App
```js
// assets/bootstrap.js
import { startStimulusApp } from '@symfony/stimulus-bundle';
const app = startStimulusApp();
// register any custom, 3rd party controllers here
// app.register('some_controller_name', SomeImportedController);
```
```js
// assets/app.js
import './bootstrap.js';
// ...
```
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.
Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:
```
GET https://stack.sylius.com/getting-started.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.
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.
