payloadcms-website-template: A TypeScript repository from digitaledge-git

Payload CMS website template

A website builder template built with Payloadcms 3.0

View Tutorial »

View Demo · Report Bug · Request Feature · Contact Us

Table of Contents

About The Project
- Built With
Getting Started
Usage
Structure
Contributing
License
Contact

About The Project

Build your website with ease using our website builder template. Our block-based system makes making your website as easy as dragging and dropping a couple of blocks!

(back to top)

Built With

(back to top)

Getting Started

To get a local copy of our template up and running follow these simple steps.

Prerequisites

npm
```
npm install npm@latest -g
```

setup environment variables in your project's root directory

MONGO_DATABASE_URI=<your-database-url>
PAYLOAD_SECRET=<your-payload-secret>

Deploy to vercel

Installation

To spin up the project locally, follow these steps:

First clone the repo
Then cd YOUR_PROJECT_REPO
Next yarn && yarn dev (or docker-compose up, see Docker)
Now open http://localhost:3000/admin to access the admin panel
Create your first admin user using the form on the page

That's it! Changes made in ./src will be reflected in your app.

(back to top)

Docker

Alternatively, you can use Docker to spin up this project locally. To do so, follow these steps:

Follow steps 1 and 2 from above, the docker-compose file will automatically use the .env file in your project root
Next run docker-compose up
Follow steps 4 and 5 from above to login and create your first admin user

That's it! The Docker instance will help you get up and running quickly while also standardizing the development environment across your teams.

Production

To run Payload in production, you need to build and serve the Admin panel. To do so, follow these steps:

First invoke the payload build script by running yarn build or npm run build in your project root. This creates a ./build directory with a production-ready admin bundle.
Then run yarn serve or npm run serve to run Node in production and serve Payload from the ./build directory.

Deployment

The easiest way to deploy your project is to use Payload Cloud, a one-click hosting solution to deploy production-ready instances of your Payload apps directly from your GitHub repo. You can also deploy your app manually, check out the deployment documentation for full details.

Usage

Manage your backend with the admin dashboard

Build pages from your dashboard with layout and blocks from the pages collection.

Build your page with our pre-built blocks or create your own!

We leverage the powerful Form builder plugin to give you the best form creation and submission experience!

Simply create your form and add it as a block in your page. Form submissions will be sent straight to your dashboard!

What your forms will look like

(back to top)

Structure

This is the typical file structure of the project.

  src
  ├── access
  ├── app
  │   ├── (app)
  │   ├── (payload)
  │   │   ├── admin
  │   │   ├── api
  │   │   ├── Blocks
  │   │   └── fields
  │   ├── globals
  │   └── my-route
  ├── collections
  │   ├── Media
  │   ├── Pages
  │   └── Users
  ├── common
  │   ├── Blocks
  │   └── Components
  ├── utilities
  │── payload-types.ts
  └── payload.config.ts

payload.config.ts is the configuration file for the payload application. You can control the configuration for the entire application from here.

Whenever you create a collection or globals schema, you have to add it to the config file and generate types for it using the command:

yarn generate:types

This will generate payload-types.ts file in your root directory.

The app directory inside your /src folder contains all the backend files for payload collections, globals and your api end points.
Collections and Globals are schemas that are defined which will be converted into a database collection of your choice.
You can configure things like access control, fields shown in admin panel, custom hooks and so on from your collection configuration file.
Globals are similar to collections, but they contain app-wide data that your site or app might rely on like header and footer settings.

Collections:

Users - This collection will be automatically generated when you setup the application. First time login will automatically make you an admin user.
Media - This collection lets you upload photos that you can use anywhere in your application.
Pages - The pages collection will let you add and manage your pages. You can build your page with blocks that are pre-built by us or you can make your own blocks!

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

See the open issues for a full list of proposed features (and known issues).

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!