./..
)@/
) is okay../..
)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.
Installation Requirements:
v18.18.0^
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
Install dependencies and run the server
pnpm install
pnpm dev
Do this if you want to fiddle around PayloadCMS.
Installation Requirements:
v18.18.0^
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>
Install dependencies
pnpm install
Create the Mongo database (If you installed Docker)
pnpm db:create
Initialize Data (Optional. Assumes you have MONGODB_URI_REMOTE
in .env)
pnpm db:clone
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
media/
folder.Generate Types to generate payload-types.ts
(ctrl + shift + b) or (cmd +
shift + b)
Run the server
pnpm dev
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',
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.`
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
}
}
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,
},
});
Create migrations
pnpm payload migrate:create name_of_migration
Run migrations
pnpm payload migrate
To improve workflow, when creating new things, we have snippets located in
.vscode/snippets.code-snippets
. Extend this overtime!
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