diff --git a/DEVELOPMENT.md b/DEVELOPMENT.md index 88db816..21a0250 100644 --- a/DEVELOPMENT.md +++ b/DEVELOPMENT.md @@ -2,7 +2,7 @@ This is probably outdated. -Welcome to the TomodachiShare development guide! This project uses [pnpm](https://pnpm.io/) for package management, [Next.js](https://nextjs.org/) with the app router for the front-end and back-end, [Prisma](https://prisma.io) for the database, [TailwindCSS](https://tailwindcss.com/) for styling, and [TypeScript](https://www.typescriptlang.org/) for type safety. +Welcome to the TomodachiShare development guide! This project uses [pnpm](https://pnpm.io/) for package management, [Next.js](https://nextjs.org/) with the app router for the backend, [Vite with React](https://vite.dev/) for the frontend, [Prisma](https://prisma.io) for the database, [TailwindCSS](https://tailwindcss.com/) for styling, and [TypeScript](https://www.typescriptlang.org/) for type safety. ## Getting started @@ -14,21 +14,21 @@ $ cd tomodachi-share $ pnpm install ``` -Prisma types are generated automatically, however, sometimes you might need to: +Prisma types are generated automatically, however, if you changed the schema or need to trigger a manual refresh: ```bash # Generate Prisma client types -$ pnpm prisma generate +$ pnpm --filter backend prisma generate # Or, if you've added new database properties -$ pnpm prisma migrate dev -$ pnpm prisma generate +$ pnpm --filter backend prisma migrate dev +$ pnpm --filter backend prisma generate ``` I recommend opting out of Next.js' telemetry program but it is not a requirement. ```bash -$ pnpm exec next telemetry disable +$ pnpm --filter backend exec next telemetry disable ``` ## Environment variables @@ -62,10 +62,11 @@ services: After starting the docker applications, apply TomodachiShare's database schema migrations. ```bash -$ pnpm prisma migrate dev +$ pnpm --filter backend prisma migrate dev ``` -After, make a copy of the `.env.example` file and rename it to `.env`. The database variables should be pre-configured, but you'll need to fill in the rest of the variables. +After, in both the backend and frontend, make a copy of the `.env.example` file and rename it to `.env`. +For the backend, the database variables should be pre-configured, but you'll need to fill in the rest of the variables. For the `AUTH_SECRET`, run the following in the command line: @@ -74,7 +75,7 @@ $ pnpx auth secret ``` > [!NOTE] -> This command may put the secret in a file named `.env.local`, if that happens copy it and paste it into `.env` +> This command may put the secret in a file named `.env.local`, if that happens copy it and paste it into `backend/.env` Now, let's get the Discord and GitHub authentication set up. If you don't plan on editing any code associated with authentication, you likely only need to setup one of these services. @@ -84,10 +85,16 @@ For GitHub, navigate to your profile settings, then 'Developer Settings', and cr Google is annoying so I'm not explaining it. -After configuring the environment variables, you can run a development server. +## Development Server + +The frontend and backend need to be ran simulatenously, therefore you need two separate terminals. ```bash -$ pnpm dev +# Terminal 1 +$ pnpm --filter backend dev + +# Terminal 2 +$ pnpm --filter frontend dev ``` ## Building @@ -96,8 +103,10 @@ It's a good idea to build the project locally before submitting a pull request. ```bash # Build the project -$ pnpm build +$ pnpm --filter backend build +$ pnpm --filter frontend build -# Run the built version -$ pnpm start +# Run the built version (Vite likes to change the port when this happens, so you probably need to change both .env files) +$ pnpm --filter backend start +$ pnpm --filter frontend build ``` diff --git a/frontend/.env.example b/frontend/.env.example new file mode 100644 index 0000000..71b32ca --- /dev/null +++ b/frontend/.env.example @@ -0,0 +1,4 @@ +VITE_BASE_URL="http://localhost:5173" +VITE_API_URL="http://localhost:3000" +VITE_ADMIN_USER_ID=1 +VITE_CONTRIBUTORS_USER_IDS=1