Blankeos / ac-research-journal

📚 Research Journal for Assumption Iloilo

AC Research Journal Project

• 📒 Notes
• 🛠️ Development (Recommended Setup in Next.JS)
• 🔧 Development (Recommended when developing the CMS)
• ⚛️ Making GraphQL queries
• 📅 Migrations
• 📐 Snippets
• 📌 Resource Links
• 🚀 Deployment

📒 Notes

• When developing utilities, make sure to use relative path (./..)
• For NextJS, absolute path alias (@/) is okay.
• For anything related to PayloadCMS always use relative path. (./..)

---

🛠️ Development (Recommended Setup in Next.JS)

For fast development of the Next.JS Frontend, I recommend using the production URL of the CMS right away. BUT you cannot use the /admin route here.

No need to run a local database, clone data, and maintain different secrets for environment variables.

1. Installation Requirements:

   • Node - v18.18.0^
   • PNPM - the package manage we're using.

2. Copy .env

   cp .env.example .env

   Change variables:

   MONGODB_URI=mongodb://<remotemongodb_url> # Use the production URL here
   PAYLOAD_PUBLIC_SERVER_URL=https://carloapps.xyz # Use the production URL
   PAYLOAD_SECRET=AC_RESEARCH_JOURNAL_SECRET_KEY # Use the production secret
   
   NEXT_PUBLIC_SERVER_URL=http://localhost:3000 # Use localhost

3. Install dependencies and run the server

   pnpm install
   
   pnpm dev

🔧 Development (Recommended when developing the CMS)

Do this if you want to fiddle around PayloadCMS.

1. Installation Requirements:

   • Docker - for easy MongoDB installation, not required if you can install MongoDB easily or already installed on your machine. (Only used for local development)
   • Node - v18.18.0^
   • PNPM - the package manage we're using.

2. Copy environment variables and make sure to replace the values.

   cp .env.example .env

   Change variables:

   + MONGODB_URI=mongodb://127.0.0.1/ac_research_journal
   # Used for dumping
   + MONGODB_URI_REMOTE=<THE REMOTE MONGODB_URI FOR CLONING>

3. Install dependencies

   pnpm install
   

4. Create the Mongo database (If you installed Docker)

   pnpm db:create
   

5. Initialize Data (Optional. Assumes you have MONGODB_URI_REMOTE in .env)

   pnpm db:clone
   

6. Initialize Media (These are uploaded assets that exist in media/ from this project's root)

   # Download it instantly (Don't spam since it gets rate limited publicly).
   pnpm media:clone

   • If that doesn't work, Download Here and unzip it and put the pictures in the media/ folder.

7. Generate Types to generate payload-types.ts (ctrl + shift + b) or (cmd + shift + b)

8. Run the server

   pnpm dev
   

9. Access PayloadCMS Admin on http://localhost:3000:/admin and NextJS on http://localhost:3000/. (Assumes PAYLOAD_SEED=true on .env.)

   🔑 Admin Credentials
   email: '[e-mail]',
   password: 'test',
   

---

⚛️ Making GraphQL queries

1. Run GraphQL Introspection

   This enables you to write in .graphql files with typesafety. Just make sure you're running the server (pnpm dev)

   pnpm codegen -w
   
   # you can also remove `-w` if you only want it to run once.`

2. Create a GraphQL query/mutation in a .graphql file. e.g.

   The code below will autogenerate files will autogenerate typescript objects and types in @/gql/graphql.

   query getVolumes($limit: Int = 10, $page: Int = 1) {
   Volumes(limit: $limit, page: $page, sort: "publishedDAte") {
      docs {
         id
         title
         volumeCover {
         alt
         url
         }
         slug
         publishedDate
      }
   }

3. Use your Queries/Mutations in .ts files. e.g.

   // ☁️ Server-Side Implementation
   
   import { GetVolumesDocument } from '@/gql/graphql';
   import { client, ssrCache } from '@/lib/urqlClient';
   
   export async function getServerSideProps(ctx: GetServerSidePropsContext) {
     const params = ctx?.params as
       | { page?: number; limit?: number }
       | undefined;
   
     const { data } = await client
       .query(GetVolumesDocument,
         { limit: params?.limit, page: params?.page },
         { requestPolicy: "network-only" } // <- to prevent `client` from caching our requests.
       )
       .toPromise();
   
     return {
       props: {
         pageInfo: {
           limit: params?.limit ?? null,
           page: params?.page ?? null,
         },
         urqlState: ssrCache.extractData(),
       },
     };
   }
   
   //  💻 Client-Side Implementation
   
   import { GetVolumesDocument } from '@/gql/graphql';
   import { client, ssrCache } from '@/lib/urqlClient';
   
   const ArchiveOverviewPage: NextPageWithLayout<
   InferGetServerSidePropsType<typeof getServerSideProps>
   > = (props) => {
   const [{ data }] = useQuery({
    query: GetVolumesDocument,
    variables: {
      limit: props?.pageInfo?.limit,
      page: props?.pageInfo?.page,
    },
   });

---

📅 Migrations

1. Create migrations

   pnpm payload migrate:create name_of_migration
   

2. Run migrations

   pnpm payload migrate
   

---

📐 Snippets

To improve workflow, when creating new things, we have snippets located in .vscode/snippets.code-snippets. Extend this overtime!

---

📌 Resource Links

• Figma
• tailwind-variants (Make sure to setup Intellisense here as well)
• payloadcms docs
• urql docs

---

🚀 Deployment

We're currently running this project on NGINX PM2 on a $6 VPS container on Vultr. Here's rough instructions on how to deploy from scratch

1. Start a Container
2. Linux Installations:
   • update packages.
   • install nginx
   • install node
   • install pm2
3. Clone this Repo
4. cd into this repo
5. pnpm install
6. pnpm build:safe