CWA Logo

The CWA is in heavy development

The CWA is still in alpha and not ready for production - some code and implementations are likely to change. If you would like to try out the CWA, please enjoy what we have provided and feel free to provide feedback, or get involved on GitHub.
Getting Started

Installation

Get started with the Components Web App template.

Quick Start

1. Clone our skeleton template

You will add your own code and configuration inside this skeleton.

You can start a fresh new project with the GitHub command line tool:

Terminal
gh repo create my-website \
      --template="components-web-app/components-web-app" \
      --private --clone
or generate a GitHub repository from the template we provide
or by downloading the Components Web App skeleton template
Note: Avoid downloading the .zip archive, as it may cause potential permission issues, prefer the .tar.gz archive.

2. Start docker containers

Open a terminal, and navigate to the directory containing your project skeleton. Run the following command to start all services using Docker Compose:

The following command will build the images (when they do not exist) and start them up in detached mode:

Terminal
docker compose up --detach
Some other useful Docker Compose commands include:
  • To stop the containers you can run docker compose down
  • To view and follow logs you can run docker compose logs -f [optional:container-name]
  • If you need to rebuild in future without the cache you can run docker compose build --no-cache
See Docker documentation for more info.

3. Create data fixtures

To create some default routes and fixtures so your template resembles our playground you can load the pre-build fixtures.

Terminal
docker compose exec php bin/console doctrine:fixtures:load

4. Login page - Delete or modify

In the template, we have modified the login page to include a notice. You can simply delete the file at /app/pages/login.vue to use the default login page, or modify it to suit your needs using slots in our pre-built components, or using them as a guide.

5. Authentication Configuration

  1. You need to create keys for generating JWT tokens. First you can bash into the php container
    Terminal
    docker compose exec php sh
  2. Now you are writing in the command line within the php container. First create the JWT directory.
    Terminal
    mkdir -p config/jwt
  3. Copy api/.env to api/.env.local - this will be your private environment variables and will not be pushed to your git repository.
  4. Then find and change JWT_PASSPHRASE in your api/.env.local - this should always be a secret and you can use real environment variables in production. Note down the passphrase.
  5. Generate the private key - when prompted, enter/paste the passphrase you noted down above.
    Terminal
    openssl genpkey -out config/jwt/private.pem -aes256 -algorithm rsa -pkeyopt rsa_keygen_bits:4096
  6. Create the public key - again it will prompt you for the private key passphrase.
    Terminal
    openssl pkey -in config/jwt/private.pem -out config/jwt/public.pem -pubout

You have now created your JWT keys and will be able to login at https://localhost/login

We will be looking to provide support for other authentication systems in future. If you're interested, feel free to contribute.

6. Congratulations!

That's it! You can now start writing your components 🚀

Continue to read our usage documentation to find out how.

Introduction

Welcome to the CWA.

Pages and Layouts

You will first need to create layout and page UI components which a user can select to use.