Skip to content

Latest commit

 

History

History
273 lines (185 loc) · 6.29 KB

start.md

File metadata and controls

273 lines (185 loc) · 6.29 KB
Raw

Start

Let's get started.

Project Structure

The main structure of the project is mostly like this:

├── apps/
│   ├── web/
│   └── api/
├── packages/
│   ├── config/
│   ├── database/
│   ├── ui/
│   └── utils/
├── docs/
├── docker-compose.yml
└── README.md

The possiblity of the project structure is endless.

├── apps/
│   ├── web/
│   ├── admin/
│   ├── graphql/
│   └── rest-api/

Prerequisites

moon & proto

Install proto for toolchain versioning:

curl -fsSL https://moonrepo.dev/install/proto.sh | bash

Install moonrepo for monorepo project management:

curl -fsSL https://moonrepo.dev/install/moon.sh | bash
# or
proto plugin add moon "https://raw.githubusercontent.com/moonrepo/moon/master/proto-plugin.toml"
proto install moon

Note: moon & proto are not required for the project to run, but they are recommended for efficient project management and toolchain versioning.

Bun

Use Bun, a fast JavaScript all-in-one toolkit that replace Node.js and npm/yarn/pnpm.

Install Bun with either methods:

curl -fsSL https://bun.sh/install | bash
npm i -g bun
brew install oven-sh/bun/bun
proto install bun

Docker

Use Docker for setting up the container, especially for the database.

Install Docker with either methods:

Clone repo

bunx degit dogokit/dogokit-akita

or

git clone --depth 1 https://github.com/dogokit/dogokit-akita.git <your-project-name>

Install Dependencies

To run the app locally, make sure the project's local packages/dependencies are installed:

bun install

Check and Fix Code Quality

Log, format, lint to check if the setup is fine:

bun check
# env typecheck prettier eslint stylelint
bun fix
# prettier eslint stylelint

Note: Can ignore non-critical warning from ESLint and TypeScript

Setup Environment Variables

Create the .env.local file from .env.example. This is the one for local development, not production

cp -i .env.example .env.local

Configure the required environment variables if on local, otherwise in the project settings on other environments.

If necessary, create the .env.production for production access. Adjust accordingly if need for staging, test, etc. Be careful to change the APP_MAIN_URL on different domains and subdomains.

cp -i .env.example .env.production

Or run the script:

make setup-env
# cp -i .env.example .env.local
# cp -i .env.example .env.production

Client/Frontend/Application:

  • MAIN_CLIENT_URL: For example, http://localhost:3000
  • ADMIN_CLIENT_URL is also possible

Server/Backend/API:

  • MAIN_SERVER_URL: For example, http://localhost:4000

Database:

  • DATABASE_URL: For example, postgres://user:password@localhost:5432/dogokit-akita. Continue to read the Database Setup.

Auth:

  • SESSION_SECRET: For example, the_secret_text. Anything goes, but better to generate a random string using openssl rand -base64 32 on the terminal or put any long random text.

OAuth:

  • *_CLIENT_ID
  • *_CLIENT_SECRET

Check the OAuth Guide

Database Setup

Drizzle ORM is used to communicate with the database easily. Can replace with query builder such as Kysely if needed or even raw database query.

For the database system itself, either choose to use PostgreSQL or MySQL from local system, Docker container, or hosted services.

If prefer using Docker and Docker Compose for local development, check the database guide.

The app is configured primarily to be deployed using PlanetScale. Because of that, the migration files are not needed. Therefore, push the schema directly there. The migration process will be handled through its deploy requests.

PostgresQL Database

To start quickly, create a PostgresQL database with either of these:

  • Vercel Postgres
  • Supabase
  • Neon.tech
  • Xata.io

Database Operations

Sync between Drizzle schema and the database directly:

bun db:push
# drizzle-kit push

Note: Only need to push the schema in development. No need for migration files.

Create users.ts in the credentials folder with the format below. Can focus on certain users who want to be able to access in development, so it doesn't have to be everyone.

export const dataUsers = [
  {
    username: "example",
    fullname: "Example User",
    nickname: "Sample",
    email: "example@example.com",
    password: "exampleexample",
    roleSymbol: "ROOT",
  },
];

Then seed the initial data when needed:

bun db:seed

Build

Check if the build is fine. This als be used to build the app for production.

bun build

Then try to run the app in production mode:

bun start

Then pick a host to deploy it to, such as:

  • Vercel
  • Netlify
  • Fly.io
  • Render.com
  • Railway.app
  • Google Cloud
  • Amazon Web Services
  • Microsoft Azure

Development

Finally, develop the app while running the development server:

bun dev

Change the Contents

  • Arrange and remove components as needed.
  • Find and replace various texts, especially the word "Dogokit" and "Dogokit Akita".

Change Theme Colors

Use kiliman/shadcn-custom-theme to generate shadcn/ui CSS variables with Tailwind CSS colors.

For example:

bunx shadcn-custom-theme primary=indigo secondary=blue accent=violet gray=neutral

Setup some services

  • Image upload with Uploadcare
    • UPLOADCARE_PUBLIC_KEY, UPLOADCARE_SECRET_KEY
  • Transactional email with Resend
    • RESEND_API_KEY
  • Product analytics with Posthog
    • POSTHOG_KEY

Subscribe for the status of the services