/Craft5-UI

NextJS headless UI for CraftCMS v5 template

Primary LanguageTypeScript

Last reviewed 8/21/2024

Drive Brand Studio CraftCMS v5 template

Requirements

  1. Computer with MINIMUM 8gb RAM, modern OS (so Windows, Linux or Mac)
  2. NodeJS v18+
  3. Ubuntu v22.04
  4. PHP 8.1+
  5. DDEV
  6. Docker

Local Hosting (Dev)

  1. Add empty .env file to the root of the project (next to .env.example)
  2. Add CRAFT_ENVIRONMENT=dev to the .env
  3. Change web > .htaccess_dev into .htaccess (or prod if you are putting this on your production server)
  4. Configure the project 
    ddev config
  5. Start the DB server 
    ddev start
  6. Install necessary packages 
    ddev composer install
  7. Install craft 
    ddev --import-db --file=starter.sql.gz
  8. Configure craft 
    ddev craft setup
  9. Launch craft 
    ddev launch
  10. In the GraphQL tab:
    • Select Schemas and in the Private Schema, make sure all checkboxes are checked.
    • Then, select the Tokens tab and create a new token. Name it something like 'Private' and copy only the token value after Bearer.
  11. Create a FileSystem for asset uploads and Assets, but make sure to name the path ANYTHING OTHER THAN ASSETS

(For example, if you have an assets/ folder, that would conflict with the /assets page in the control panel.) image image

Cloud Hosting (Staging / Production)

  1. Purchase a Digital Ocean droplet
  2. Connect the droplet to RunCloud.io
  3. Create a system user and generate a password. -----Store passwords for SSH connection to server later-------
  4. Create a DB user, then a DB in runcloud.
  5. Create a webapp or your CMS
  • From a GH repo
  • Prefer www version
  • Generate and put the deploy key in your GH repo
  • Add :/home/app_user_name to the end of open_basedir
  1. 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
  1. 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
  1. Add SSL record
  2. Add .htaccess file to the web directory
  3. Create the graphql schema and token
  4. In CraftCMS, check Utilities > System Report > scroll to Requirements and make sure these are all removed from the list in RunCloud.io Webapp settings.

RunCloud sets up webhooks into our github repos, so the deployment of changes should be done through that webhook. When you git push to main or merge a PR to main, the production site will auto-magically update.

Acknowledgments

Features

  • Live preview
  • Revalidate Front End data on save of Entries / Categories / Globals
  • SEO optimization

Contributor & Developer Resources & Guides