Blankeos / ac-research-journal

📚 Research Journal for Assumption Iloilo
0 stars 0 forks source link

AC Research Journal Project

📒 Notes


🛠️ 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: 'dev@payloadcms.com',
    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


🚀 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