Yii3 - How to start

Tutorials

3.0

# Intro

In Yii3 it is not as easy to start as it was with Yii2. You have to install and configure basic things on your own. Yii3 uses the modern approach based on independent packages and dependency injection, but it makes it harder for newcomers. I am here to show all how I did it.

> ## Git
 
 
All themy code is available in my new [GitHub repositoryies:
 
- [Yii3 API demo](https://github.com/rackycz/yii3api). (yii3api) - May be dropped in the future as `yii3web` offers more)
 
- [Yii3 WEB demo](https://github.com/rackycz/yii3web) (yii3web) - I think I will use this one more
 
 
I will be using it as a boiler-plate for my future projects so it should be always up-to-date and working. ## Docker
 
 
Instead of installing local WAMP- or XAMPP-server I will be using Docker. Do not forget about a modern IDE like PhpStorm, which comes bundled with all you will ever need.Next we also need an algorithm that will enforce these tokens in each request, will validate and refresh them and will restrict access only to endpoints that the user can use. This is a bigger topic for later. It may be covered by the package https://github.com/yiisoft/auth/ which offers "HTTP bearer authentication".

## UI
 
 
**Pjax**
 
 
Pjax does not exist any more, but you can use [HTMX](https://htmx.org/docs/#introduction) instead:
 
 
```
 
<script src="htmx.min.js"></script>
 
```
 
 
Your action:
 
 
 
```
 
<?php
 
declare(strict_types=1);
 
namespace App\Web\HomePage;
 
use Psr\Http\Message\ResponseFactoryInterface;
 
use Psr\Http\Message\ResponseInterface;
 
final readonly class Htmx
 
{
 
    public function __invoke(
 
        ResponseFactoryInterface $responseFactory
 
    ): ResponseInterface
 
    {
 
        $response = $responseFactory->createResponse();
 
        $response
 
            ->getBody()
 
            ->write('You are at homepage.<div id="id2">Welcome</div>');
 
        return $response;
 
    }
 
}
 
```
 
 
And then a simple HTML
 
 
```
 
<h2>HTMX test</h2>
 
<div id="htmx">
 
    <p>This is the original text</p>
 
</div>
 
<button data-hx-get="/htmx"
 
        data-hx-trigger="click"
 
        data-hx-target="#htmx"
 
        data-hx-select="#id2"
 
        data-hx-swap="innerHTML">
 
    Click me (and watch the traffic in devtools)
 
</button>
 
```
 
 
**JS client - Installable Vuejs3 PWA** If you create a REST API you may be interested in a JS frontend that will communicate with it using Ajax. Below you can peek into my very simple VueJS3 attempt. It is an installable PWA application that works in offline mode (=1 data transfer per day, not on every mouse click) and is meant for situations when customer does not have wifi everywhere. See my [Gitlab](https://gitlab.com/radin.cerny/vuejs3-pwa-demo-plus).