castopod/docs/src/ru/contributing/setup-development.md

424 lines
10 KiB
Markdown

---
title: Development setup
sidebarDepth: 3
---
# Setup your development environment
## Introduction
Castopod is a web app based on the `php` framework
[CodeIgniter 4](https://codeigniter.com).
We use [Docker](https://www.docker.com/) quickly setup a dev environment. A
`docker-compose.yml` and `Dockerfile` are included in the project's root folder
to help you kickstart your contribution.
> You don't need any prior knowledge of Docker to follow the next steps.
> However, if you wish to use your own environment, feel free to do so!
## Setup instructions
### 1. Pre-requisites
0. Install [docker](https://docs.docker.com/get-docker).
1. Clone Castopod project by running:
```bash
git clone https://code.castopod.org/adaures/castopod.git
```
2. Create a `.env` file with the minimum required config to connect the app to
the database and use redis as a cache handler:
```ini
CI_ENVIRONMENT="development"
# If set to development, you must run `npm run dev` to start the static assets server
vite.environment="development"
# By default, this is set to true in the app config.
# For development, this must be set to false as it is
# on a local environment
app.forceGlobalSecureRequests=false
app.baseURL="http://localhost:8080/"
media.baseURL="http://localhost:8080/"
admin.gateway="cp-admin"
auth.gateway="cp-auth"
database.default.hostname="mariadb"
database.default.database="castopod"
database.default.username="castopod"
database.default.password="castopod"
cache.handler="redis"
cache.redis.host = "redis"
# You may not want to use redis as your cache handler
# Comment/remove the two lines above and uncomment
# the next line for file caching.
#cache.handler="file"
```
> _NB._ You can tweak your environment by setting more environment variables
> in your custom `.env` file. See the `env` for examples or the
> [CodeIgniter4 User Guide](https://codeigniter.com/user_guide/index.html)
> for more info.
3. (for docker desktop) Add the repository you've cloned to docker desktop's
`Settings` > `Resources` > `File Sharing`
### 2. (recommended) Develop inside the app Container with VSCode
If you're working in VSCode, you can take advantage of the `.devcontainer/`
folder. It defines a development environment (dev container) with preinstalled
requirements and VSCode extensions so you don't have to worry about them. All
required services will be loaded automagically! 🪄
1. Install the VSCode extension
[Remote - Containers](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers)
2. `Ctrl/Cmd + Shift + P` > `Open in container`
> The VSCode window will reload inside the dev container. Expect several
> minutes during first load as it is building all necessary services.
**Note**: The dev container will start by running Castopod's php server.
During development, you will have to start [Vite](https://vitejs.dev)'s dev
server for compiling the typescript code and styles:
```bash
# run Vite dev server
npm run dev
```
If there is any issue with the php server not running, you can restart them
using the following commands:
```bash
# run Castopod server
php spark serve - 0.0.0.0
```
3. You're all set! 🎉
You're now **inside the dev container**, you may use the VSCode console
(`Terminal` > `New Terminal`) to run any command:
```bash
# PHP is installed
php -v
# Composer is installed
composer -V
# npm is installed
npm -v
# git is installed
git version
```
For more info, see
[VSCode Remote Containers](https://code.visualstudio.com/docs/remote/containers)
### 3. Start hacking
You're all set! Start working your magic by updating the project's files! Help
yourself to the
[CodeIgniter4 User Guide](https://codeigniter.com/user_guide/index.html) for
more insights.
To see your changes, go to:
- `http://localhost:8080/` for the Castopod app
- `http://localhost:8888/` for the phpmyadmin interface:
- username: **castopod**
- password: **castopod**
### 2-alt. Develop outside the app container
You do not wish to use the VSCode devcontainer? No problem!
1. Start docker containers manually:
Go to project's root folder and run:
```bash
# starts all services declared in docker-compose.yml file
# -d option starts the containers in the background
docker-compose up -d
# See all running processes (you should see 3 processes running)
docker-compose ps
# Alternatively, you can check all docker processes
docker ps -a
```
> The `docker-compose up -d` command will boot 4 containers in the
> background:
>
> - `castopod_app`: a php based container with Castopod requirements
> installed
> - `castopod_redis`: a [redis](https://redis.io/) database to handle queries
> and pages caching
> - `castopod_mariadb`: a [mariadb](https://mariadb.org/) server for
> persistent data
> - `castopod_phpmyadmin`: a phpmyadmin server to visualize the mariadb
> database.
2. Run any command inside the containers by prefixing them with
`docker-compose run --rm app`:
```bash
# use PHP
docker-compose run --rm app php -v
# use Composer
docker-compose run --rm app composer -V
# use npm
docker-compose run --rm app npm -v
# use git
docker-compose run --rm app git version
```
---
## Going Further
### Install Castopod's dependencies
1. Install php dependencies with [Composer](https://getcomposer.org/)
```bash
composer install
```
::: info Note
The php dependencies aren't included in the repository. Composer will check
the `composer.json` and `composer.lock` files to download the packages with
the right versions. The dependencies will live under the `vendor/` folder.
For more info, check out the
[Composer documentation](https://getcomposer.org/doc/).
:::
2. Install javascript dependencies with [npm](https://www.npmjs.com/)
```bash
npm install
```
::: info Note
The javascript dependencies aren't included in the repository. Npm will check
the `package.json` and `package.lock` files to download the packages with the
right versions. The dependencies will live under the `node_module` folder.
For more info, check out the [NPM documentation](https://docs.npmjs.com/).
:::
3. Generate static assets:
```bash
# build all static assets at once
npm run build:static
# build specific assets
npm run build:icons
npm run build:svg
```
::: info Note
The static assets generated live under the `public/assets` folder, it
includes javascript, styles, images, fonts, icons and svg files.
:::
### Initialize and populate database
::: tip Tip
You may skip this section if you go through the install wizard (go to
`/cp-install`).
:::
1. Build the database with the migrate command:
```bash
# loads the database schema during first migration
php spark migrate -all
```
You may need to undo the migration (rollback):
```bash
# rolls back database schema (deletes all tables and their content)
php spark migrate:rollback
```
2. Populate the database with the required data:
```bash
# Populates all required data
php spark db:seed AppSeeder
```
You may choose to add data separately:
```bash
# Populates all categories
php spark db:seed CategorySeeder
# Populates all Languages
php spark db:seed LanguageSeeder
# Populates all podcasts platforms
php spark db:seed PlatformSeeder
# Populates all Authentication data (roles definition…)
php spark db:seed AuthSeeder
```
3. (optionnal) Populate the database with test data:
- Populate test data (login: admin / password: AGUehL3P)
```bash
php spark db:seed TestSeeder
```
- Populate with fake podcast analytics:
```bash
php spark db:seed FakePodcastsAnalyticsSeeder
```
- Populate with fake website analytics:
```bash
php spark db:seed FakeWebsiteAnalyticsSeeder
```
TestSeeder will add an active superadmin user with the following credentials:
- username: **admin**
- password: **AGUehL3P**
### Useful docker / docker-compose commands
- Monitor the app container:
```bash
docker-compose logs --tail 50 --follow --timestamps app
```
- Interact with redis server using included redis-cli command:
```bash
docker exec -it castopod_redis redis-cli
```
- Monitor the redis container:
```bash
docker-compose logs --tail 50 --follow --timestamps redis
```
- Monitor the mariadb container:
```bash
docker-compose logs --tail 50 --follow --timestamps mariadb
```
- Monitor the phpmyadmin container:
```bash
docker-compose logs --tail 50 --follow --timestamps phpmyadmin
```
- Restart docker containers:
```bash
docker-compose restart
```
- Destroy all containers, opposite of `up` command:
```bash
docker-compose down
```
- Rebuild app container:
```bash
docker-compose build app
```
Check [docker](https://docs.docker.com/engine/reference/commandline/docker/) and
[docker-compose](https://docs.docker.com/compose/reference/) documentations for
more insights.
## Known issues
### Allocation failed - JavaScript heap out of memory
This happens when running `npm install`.
👉 By default, docker might not have access to enough RAM. Allocate more memory
and run `npm install` again.
### (Linux) Files created inside container are attributed to root locally
You may use Linux user namespaces to fix this on your machine:
::: info Note
Replace "username" with your local username
:::
1. Go to `/etc/docker/daemon.json` and add:
```json
{
"userns-remap": "username"
}
```
2. Configure the subordinate uid/guid:
```bash
# in /etc/subuid
username:1000:1
username:100000:65536
```
```bash
# in /etc/subgid
username:1000:1
username:100000:65536
```
3. Restart docker:
```bash
sudo systemctl restart docker
```
4. That's it! Now, the root user in the container will be mapped to the user on
your local machine, no more permission issues! 🎉
You can check
[this great article](https://www.jujens.eu/posts/en/2017/Jul/02/docker-userns-remap/)
to know more about how it works.