Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ttttonyhe/ouorz-mono
:rocket: A Monorepo for My Personal Website and Related Projects
https://github.com/ttttonyhe/ouorz-mono
blog command-palette cypress frontend monorepo nextjs nodejs openai-api personal-website php portfolio-website react reactjs redux redux-saga storybook tailwindcss turborepo typescript wordpress
Last synced: 27 days ago
JSON representation
:rocket: A Monorepo for My Personal Website and Related Projects
- Host: GitHub
- URL: https://github.com/ttttonyhe/ouorz-mono
- Owner: ttttonyhe
- License: gpl-3.0
- Created: 2020-12-21T10:02:35.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-05-01T06:19:01.000Z (6 months ago)
- Last Synced: 2024-05-02T04:13:27.394Z (6 months ago)
- Topics: blog, command-palette, cypress, frontend, monorepo, nextjs, nodejs, openai-api, personal-website, php, portfolio-website, react, reactjs, redux, redux-saga, storybook, tailwindcss, turborepo, typescript, wordpress
- Language: TypeScript
- Homepage: https://www.ouorz.com
- Size: 17.8 MB
- Stars: 821
- Watchers: 1
- Forks: 22
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
## Main App
### Past Iterations
- Antony-Nuxt (Nuxt.js / Vue.js v2) [https://github.com/ttttonyhe/antony-nuxt →](https://github.com/ttttonyhe/antony-nuxt)
- Antony (Vue.js v2) [https://github.com/ttttonyhe/antony →](https://github.com/ttttonyhe/antony)
- Tony (Vue.js v2 / PHP) [https://github.com/ttttonyhe/tony →](https://github.com/ttttonyhe/tony)
### Feature Highlights
- SSR/SSG/On-demand ISR
- Command palette
- Redux + Redux Saga state management
- [Nexment](https://github.com/ttttonyhe/nexment) comment system
- Dynamic table of contents sidebar
- Personal dashboard
- Dark mode
### Summary of Tech Stacks
Super opinionated, completely overkill.
- TypeScript
- Framework
- React (Next.js)
- Foundation/Adaptor implementation *coming soon*
- Storybook
- Turborepo
- Data Fetching
- swr
- Infinite Loading
- Revalidation
- Suspense
- fetch (API Routes)
- State Management
- Redux Toolkit
- Redux Saga
- Styling:
- styled-components
- Tailwind CSS
- Content Management:
- WordPress (Qiniu - Static file storage)
- WP REST API (GraphQL implementation coming soon)
- Tencent Cloud CVM (CentOS/Nginx/MySQL/PHP)
- [Nexment](https://github.com/ttttonyhe/nexment) (LeanCloud)
- Newsletter (Buttondown)
- Error Logging & Web Vitals Metric
- Sentry
- Linters
- ESLint
- Prettier
- CommitLint
- CI/CD
- Github Actions
- Vercel
### Project Setup
```bash
git clone [email protected]:ttttonyhe/ouorz-mono.git
pnpm install
cd apps/main
```
Create a `.env` file with your configuration, see below for a list of environment variables used in this project:
- LeanCloud:
- NEXT_PUBLIC_LC_KEY
- NEXT_PUBLIC_LC_ID
- Buttondown:
- NEXT_PUBLIC_BUTTONDOWN_TOKEN
- Sentry:
- NEXT_PUBLIC_SENTRY_DSN
- SENTRY_AUTH_TOKEN
- SENTRY_PROJECT
- SENTRY_ORG
- On-demand ISR:
- REVALIDATION_REQUEST_TOKEN
```
pnpm run dev:main
```
## WordPress App
> **Warning**
>
> Running WordPress in a Docker container is extremely slow on lower-spec machines
>
> \>=1 GB of RAM without MySQL 8, or >=2 GB of RAM with MySQL 8 is recommended
This project is wrapped up in a Docker container built based on the official WordPress Docker image: [wordpress:php8.0-apache](https://hub.docker.com/layers/library/wordpress/php8.0-apache/images/sha256-121ce32b1837fa372989ae498eee6c7ff49e022715e035e00d65c8d07592a5d9).
### Static Image
Each build outputs a static Docker image (similar to a typical containerized application) which means updating WordPress itself or adding new themes/plugins requires redeployment.
### Persistent Storage
All uploads are stored in an external store (Qiniu, similar to AWS S3), therefore `wp-content/uploads` can be treated as temporary data.
### Custom Themes
`main` app uses WordPress REST API to fetch data, `wordpress` app functions as a headless CMS. The theme `peg` is used to customize the behaviour of the REST API endpoints, therefore `peg/functions.php` should be the main focus when it comes to the development of `wordpress` app.
### Environment Variables
- MySQL Database:
- WORDPRESS_DB_HOST
- WORDPRESS_DB_NAME
- WORDPRESS_DB_PASSWORD
- WORDPRESS_DB_USER
- WORDPRESS_TABLE_PREFIX
- Settings:
- WORDPRESS_DEBUG
Optionally, `WORDPRESS_CONFIG_EXTRA` can be set to include other configurations:
- MySQL SSL Connection:
- `define("MYSQL_CLIENT_FLAGS", MYSQLI_CLIENT_SSL);`
- Turn Off PHP Warnings & Notices:
- `ini_set("error_reporting", E_ALL & ~E_NOTICE);`
- `ini_set("display_errors","Off")`
- Redis Object Cache:
- `define("WP_REDIS_HOST", "redis_database_host");`
- `define("WP_REDIS_PASSWORD", "redis_database_pwd");"`
- `define("WP_REDIS_PORT", "redis_database_port")`
### Local Development
```bash
docker build --tag ouorz-wordpress .
docker run -p 8080:80 \
-e WORDPRESS_DB_HOST=[dev_database_host] \
-e WORDPRESS_DB_USER=[dev_database_user] \
-e WORDPRESS_DB_PASSWORD=[dev_database_pwd] \
-e WORDPRESS_DB_NAME=[dev_database_name] \
-e WORDPRESS_DEBUG=true \
-e WORDPRESS_CONFIG_EXTRA="define('MYSQL_CLIENT_FLAGS', MYSQLI_CLIENT_SSL);" \
-e WORDPRESS_TABLE_PREFIX=[dev_database_prefix] \
ouorz-wordpress
```
## Analytics App
This project is based on [Umami](https://umami.is)
### Geolocation Data Access
Follow the instructions [here →](https://dev.maxmind.com/geoip/geolite2-free-geolocation-data) to sign up for Maxmind GeoLite2, and retrieve a license key
### Project Setup
```bash
git clone [email protected]:ttttonyhe/ouorz-mono.git
pnpm install
cd apps/analytics
```
Create a `.env` file with your configuration, see below for a list of environment variables used in this project:
- DATABASE_URL
- HASH_SALT
- MAXMIND_LICENSE_KEY
```
pnpm --filter @ouorz/analytics run build-postgresql-client
pnpm run dev:analytics
```
## Twilight Toolkit
A super opinionated front-end toolkit library
### UI
Storybook: [https://ui.twilight-toolkit.ouorz.com →](https://ui.twilight-toolkit.ouorz.com)
Currently only available in React, Foundation/Adaptor implementation is coming soon.
### Utilities
Work in progress
## Monorepo
### Tooling
Build system: [Turborepo](https://turborepo.org) with Remote Caching
Monorepo Manager: [PNpm](https://pnpm.io/workspaces)
### Practices
#### Running Scripts
+ Use project aliases to run commands in different packages more easily:
```bash
pnpm --filter @ouorz/main run upgrade
```
+ Use pre-defined Turborepo scripts whenever content awareness (i.e. caching) is needed:
```bash
pnpm run build:main
```
#### Managing Dependencies
+ Root `package.json` should only contain development dependencies
> WIP
### Statistics
## Development
### Gitflow
Not really following this though...
### E2E Testing
Test runner: [Cypress](https://www.cypress.io)
Start server:
```bash
pnpm run build:main
pnpm run start:main
# or
cd apps/main
pnpm run dev:test
```
Run tests:
```bash
pnpm run test:main
```
`apps/main` uses Cypress Dashboard, disable it by changing the configuration file accordingly.
## Deployment
### apps/wordpress
Build then deploy the Docker image via `apps/wordpress/Dockerfile`.
> Note: by default, the image listens on port 80, rather than the more common 8080
### apps/main
This project utilizes a combination of Server-side Rendering (SSR) and (On-demand) Incremental Static Generation (ISG):
```bash
pnpm run build:main
pnpm run start:main
```
### apps/analytics
```bash
pnpm run build:analytics
pnpm run start:analytics
```
### packages/twilight-ui
To deploy the storybook, export it as a static web app:
```bash
pnpm run build:twilight:ui:storybook
```
### Deploy with Fly.io
Configuration file `fly.toml` can be found under `apps/wordpress`. Persistent storage should mount to `/var/www/html/wp-content`.
```bash
fly launch
fly secrets set \
WORDPRESS_DB_HOST=[dev_database_host] \
WORDPRESS_DB_USER=[dev_database_user] \
WORDPRESS_DB_PASSWORD=[dev_database_pwd] \
WORDPRESS_DB_NAME=[dev_database_name] \
WORDPRESS_DEBUG=false \
WORDPRESS_TABLE_PREFIX=[dev_database_prefix] \
fly deploy
```
Optionally, volumes with the same name can be created in multiple Fly.io regions which allows Fly to run one or more instances of the app in multiple regions:
```bash
fly volumes create ouorz_wordpress_wp_content --region yyz --size 1 --no-encryption
fly volumes create ouorz_wordpress_wp_content --region fra --size 1 --no-encryption
fly volumes create ouorz_wordpress_wp_content --region hkg --size 1 --no-encryption
```
```bash
fly scale count 3
```
Optionally, Fly.io offers full-managed Redis databases which can be created using the following commands:
```bash
fly redis create
```
Traffic is automatically routed through a private IPv6 address restricted to your Fly organization.
### Deploy with Vercel / Netlify
Make sure to set root directory path to `apps/`, then update build command to the following:
```bash
cd ../.. && pnpm run build:
```
[](https://vercel.com/new/clone?repository-url=https://github.com/ttttonyhe/ouorz-mono)
[](https://app.netlify.com/start/deploy?repository=https://github.com/ttttonyhe/ouorz-mono)
Enabling diff-based deployment is highly recommended:
```bash
git diff --quiet HEAD^ HEAD ./
```
## License
[GPL-3.0](https://github.com/ttttonyhe/ouorz-mono/blob/main/LICENSE)
[](https://app.fossa.com/projects/git%2Bgithub.com%2Fttttonyhe%2Fouorz-mono?ref=badge_large)
