TL;DR

CraftCMS is built using a php framework, Yii for its frontend/backend and uses MariaDB or MySQL for the database.
Our custom frontend will utilize this CraftCMS webapp as our backend, NextJS as our middleware, and React as our frontend.
Stand up 2 webapps, purchase 1 domain, enjoy the ability to create websites with the newest JS libraries and communities. Comes with preview mode in the CMS, auto-revalidation on save within the CMS, and many of the custom components from popular Framer Motion + TailwindCSS libraries.

Common mistakes:

Create a server in runcloud, then add 2 webapp users to that server (each user gets a deploy key, can only be used once per github)
Updated the .env files in both projects
Update .htaccess file in the CraftCMS project
Update Runcloud NginX config in the NextJS project
Allow proc_open in the Runcloud php setup
Add :/home/app_user_name to the end of open_basedir

Craft 5 UI and Back End setup instructions

React + NextJS Front End, Back End CraftCMS project.

Authors

- [@dancrump1](https://www.github.com/dancrum...)

Tech Stack

*Client:* React v18, TailwindCSS, Framer Motion

*UI Server:* Node, NextJS, NginX

*DB Server:* CraftCMS, NginX, Apache

## Features

- Light/dark mode toggle

- Live previews (🏗🚧)

Steps (start with the backend)

1. ```bash

mkdir [FOLDER_NAME]

```

1. ```bash

cd [FOLDER_NAME]

```

1. ```bash

git clone git@github.com:drivebrandstudio/Craft5-UI.git ./

```

1. ```bash

rm -r -f .git

```

1. ```bash

git init .

```

1. ```bash

git add .

```

1. ```bash

git remote add origin <URL_OF_EMPTY_GITHUB_REPO>

```

1. ```bash

git commit -m 'First Commit'

```

1. ```bash

git push origin main

```

> [!TIP]

> You can skip to the UI section if you don't care about local stanup.

10. Remove .example from the .env file

1. ```bash

composer install

```

1. ```bash

ddev start

```

1. ```bash

ddev exec php craft setup/security-key

```

1. ```bash

ddev exec php craft setup/app-id

```

1. ```bash

ddev import-db --file=db.sql.gz

```

1. Add "headlessMode" => true to config > general.php

1. Add "api" => "graphql/api" to config > routes.php

1. Navigate to https://craft-starter.ddev.sit...

- u: cc_admin

- p: letmein

19. Graphql > schemas > create new > label Private

1. Graphql > tokens > create new > apply to Private schema and copy the token to notepad (will need later)

Steps (Front End)

```bash

mkdir [FOLDER_NAME]

```

```bash

cd [FOLDER_NAME]

```

```bash

git clone git@github.com:drivebrandstudio/Craft5-UI.git ./

```

```bash

rm -r -f .git

```

```bash

git init .

```

```bash

git add .

```

```bash

git remote add origin <URL_OF_EMPTY_GITHUB_REPO>

```

```bash

git commit -m 'First Commit'

```

```bash

git push origin main

```

> [!TIP]

> You can skip to the Hosting section if you don't care about local stanup.

- Remove .example from .env

- Paste in the db URL and CMS token (remove "Authorization: Bearer")

- NPM install

- Use TODOTree or Search for TODO and finish all

- npm run dev

Hosting the 2 projects

- Purchase a Digital Ocean droplet

- Connect the droplet to RunCloud

- Create 2 system users and generate a password. Store in hosting&domains

- Create a DB user, then a DB in runcloud.

- Create 2 webapps, one for the ui and one for the db

- Prefer www version

- Put the deploy keys in each runcloud project

- Using the Digital Ocean console or SSH (vscode or other) into the DB server

- run `gunzip db.sql.gz`

- run `mysql -u <db_user_name> -p <db_name> < db.sql`

- Set up the DB application

- After setup, ensure the Preview Target in the Section settings has `http://localhost:3000/{slug}?entryUid={canonicalUid}` and `https://<url_for_ui>.com...{slug}?entryUid={cannonicalUid}`

- Add to DNS records

- if domain

- A record @ server_ip 600s

- CName www url_name.com. 1hour

- if subdomain

- A record url_name server_ip 1hour

- CName *.url_name url_name.com. 1hour

- Add SSL record

- Add .htaccess file do server DB project

- Add NGINX config to server ui runcloud webapp settings

- Add a proxy config and uncomment the proxy_redirect and the last 3 lines

- Create a custom root definition