Add dev steps
This commit is contained in:
WardPearce
@@ -105,3 +105,7 @@ Due to Google's policies on custom YouTube frontends, Materialious isn't availab
|
||||
- [Vidstack player](https://github.com/vidstack/player)
|
||||
- [Beer CSS](https://github.com/beercss/beercss) (Especially the [YouTube template](https://github.com/beercss/beercss/tree/main/src/youtube) what was used as the base for Materialious.)
|
||||
- Every dependency in [package.json](/materialious/package.json).
|
||||
|
||||
# Developers
|
||||
- [How Materialious is built](./docs/BUILDING.md)
|
||||
- [How to contribute to Materialious](./docs/DEV.md)
|
||||
@@ -0,0 +1,33 @@
|
||||
## Work in Progress
|
||||
This documentation is currently under development and subject to updates.
|
||||
|
||||
## Building
|
||||
### Web Deployment (via Docker)
|
||||
Materialious supports web deployment through Docker.
|
||||
|
||||
- The build process starts with the [Dockerfile](../materialious/Dockerfile).
|
||||
- Placeholder environment variables are injected into a `.env` file, which are later replaced by the [replace_env_vars.sh](../materialious/replace_env_vars.sh) script.
|
||||
- The application is served using NGINX, configured with [nginx.conf](../materialious/nginx.conf).
|
||||
- Deployment and building are handled via [docker/build-push-action@v5](https://github.com/docker/build-push-action/tree/v5) using the workflow defined in [prod-web.yml](../.github/workflows/prod-web.yml).
|
||||
|
||||
### Desktop Release (via GitHub Releases)
|
||||
Materialious desktop builds are handled through GitHub using [prod-desktop.yml](../.github/workflows/prod-desktop.yml).
|
||||
|
||||
- First, the typical build steps are run: `npm install` and `npm run build`.
|
||||
- We utilize [Capacitor](https://capacitorjs.com) with `@capacitor-community/electron` to integrate Electron into the project. The command `npx cap sync @capacitor-community/electron` is used to synchronize the latest build.
|
||||
- The [patch_capacitor_plugin.py](../materialious/electron/patch_capacitor_plugin.py) script removes the [Capacitor-NodeJS](https://github.com/hampoelz/Capacitor-NodeJS) plugin from the desktop build, as it's not required and currently has no better alternative.
|
||||
- From here, the process follows standard [electron-builder](https://www.electron.build/) steps to complete the build.
|
||||
|
||||
### Desktop Release (via Flatpak)
|
||||
Flatpak builds for desktop releases are managed via [us.materailio.app](../flatpak/us.materialio.app.json).
|
||||
|
||||
- We generate the necessary remote npm packages with `flatpak-node-generator npm -r ../materialious/package-lock.json -R ../materialious/electron/package-lock.json`, which creates [generated-sources.json](../flatpak/generated-sources.json).
|
||||
- The Linux x64 runtime is downloaded as part of the Flatpak build sources and placed in `main/materialious/electron/.electron-cache`. The [electron-builder.config.json](../materialious/electron/electron-builder.config.json) is configured to use this cache directory to avoid downloading the runtime again during the build.
|
||||
- The build process is similar to [prod-desktop.yml](../.github/workflows/prod-desktop.yml), following the guidelines for [Flatpak Electron](https://docs.flatpak.org/en/latest/electron.html).
|
||||
|
||||
### Android Release
|
||||
Android builds are handled using the workflow [prod-android.yml](../.github/workflows/prod-android.yml).
|
||||
|
||||
- After running the standard `npm install` and `npm run build` commands, we install the modules located in [nodejs-android/](../materialious/static/nodejs-android/) for [Capacitor-NodeJS](https://github.com/hampoelz/Capacitor-NodeJS).
|
||||
- The `npx cap sync` command is used to synchronize with [Capacitor](https://capacitorjs.com).
|
||||
- The Android build is processed using [setup-java](https://github.com/actions/setup-java/tree/v3/), followed by signing the APK with [sign-android-release](https://github.com/ilharp/sign-android-release/tree/v1.0.4).
|
||||
+134
@@ -0,0 +1,134 @@
|
||||
## Work in Progress
|
||||
This documentation is under active development and subject to change.
|
||||
|
||||
### Development Environment Setup
|
||||
|
||||
#### Invidious Deployment
|
||||
To deploy Invidious, use Docker Compose with the following configuration:
|
||||
|
||||
```yaml
|
||||
services:
|
||||
invidious:
|
||||
image: quay.io/invidious/invidious:latest
|
||||
# For ARM64/AArch64 devices, uncomment the line below:
|
||||
# image: quay.io/invidious/invidious:latest-arm64
|
||||
restart: unless-stopped
|
||||
ports:
|
||||
- "127.0.0.1:3000:3000"
|
||||
environment:
|
||||
# Refer to the official Invidious config for all available options:
|
||||
# https://github.com/iv-org/invidious/blob/master/config/config.example.yml
|
||||
INVIDIOUS_CONFIG: |
|
||||
db:
|
||||
dbname: invidious
|
||||
user: kemal
|
||||
password: kemal
|
||||
host: invidious-db
|
||||
port: 5432
|
||||
check_tables: true
|
||||
https_only: true
|
||||
external_port: 443
|
||||
use_innertube_for_captions: true
|
||||
domain: invidious.localhost
|
||||
hmac_key: "some-insecure-or-secure-key-for-local-development"
|
||||
healthcheck:
|
||||
test: wget -nv --tries=1 --spider http://127.0.0.1:3000/api/v1/trending || exit 1
|
||||
interval: 30s
|
||||
timeout: 5s
|
||||
retries: 2
|
||||
logging:
|
||||
options:
|
||||
max-size: "1G"
|
||||
max-file: "4"
|
||||
depends_on:
|
||||
- invidious-db
|
||||
|
||||
invidious-db:
|
||||
image: docker.io/library/postgres:14
|
||||
restart: unless-stopped
|
||||
volumes:
|
||||
- postgresdata:/var/lib/postgresql/data
|
||||
- ./config/sql:/config/sql
|
||||
- ./docker/init-invidious-db.sh:/docker-entrypoint-initdb.d/init-invidious-db.sh
|
||||
ports:
|
||||
- 5432:5432
|
||||
environment:
|
||||
POSTGRES_DB: invidious
|
||||
POSTGRES_USER: kemal
|
||||
POSTGRES_PASSWORD: kemal
|
||||
healthcheck:
|
||||
test: ["CMD-SHELL", "pg_isready -U $$POSTGRES_USER -d $$POSTGRES_DB"]
|
||||
|
||||
volumes:
|
||||
postgresdata:
|
||||
```
|
||||
|
||||
#### Caddy Configuration
|
||||
|
||||
Configure Caddy for reverse proxying Invidious and Materialious with CORS headers:
|
||||
|
||||
```caddy
|
||||
invidious.localhost {
|
||||
@cors_preflight {
|
||||
method OPTIONS
|
||||
}
|
||||
respond @cors_preflight 204
|
||||
|
||||
header Access-Control-Allow-Credentials true
|
||||
header Access-Control-Allow-Origin "https://materialious.localhost" {
|
||||
defer
|
||||
}
|
||||
header Access-Control-Allow-Methods "GET,POST,OPTIONS,HEAD,PATCH,PUT,DELETE"
|
||||
header Access-Control-Allow-Headers "User-Agent,Authorization,Content-Type"
|
||||
|
||||
header /ggpht/* Cross-Origin-Resource-Policy cross-origin
|
||||
|
||||
reverse_proxy localhost:3000
|
||||
}
|
||||
|
||||
materialious.localhost {
|
||||
reverse_proxy localhost:5173
|
||||
|
||||
header {
|
||||
Cross-Origin-Opener-Policy "same-origin"
|
||||
Cross-Origin-Embedder-Policy "require-corp"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### Install Materialious
|
||||
|
||||
1. Clone the Materialious repository:
|
||||
|
||||
```bash
|
||||
git clone https://github.com/Materialious/Materialious.git
|
||||
```
|
||||
|
||||
2. Navigate into the project directory:
|
||||
|
||||
```bash
|
||||
cd Materialious/materialious
|
||||
```
|
||||
|
||||
3. Install dependencies:
|
||||
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
4. Create a `.env` file with the following content:
|
||||
|
||||
```bash
|
||||
VITE_DEFAULT_INVIDIOUS_INSTANCE="https://invidious.localhost"
|
||||
```
|
||||
|
||||
5. Start the development server:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
#### Access the Applications
|
||||
|
||||
- Visit `invidious.localhost` in your browser and click "Continue."
|
||||
- Visit `materialious.localhost` in your browser and click "Continue."
|
||||
@@ -1,38 +0,0 @@
|
||||
# create-svelte
|
||||
|
||||
Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
|
||||
|
||||
## Creating a project
|
||||
|
||||
If you're seeing this, you've probably already done this step. Congrats!
|
||||
|
||||
```bash
|
||||
# create a new project in the current directory
|
||||
npm create svelte@latest
|
||||
|
||||
# create a new project in my-app
|
||||
npm create svelte@latest my-app
|
||||
```
|
||||
|
||||
## Developing
|
||||
|
||||
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
|
||||
# or start the server and open the app in a new browser tab
|
||||
npm run dev -- --open
|
||||
```
|
||||
|
||||
## Building
|
||||
|
||||
To create a production version of your app:
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
You can preview the production build with `npm run preview`.
|
||||
|
||||
> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
|
||||
Reference in New Issue
Block a user