CraftCMS and NextJS hosted on Digital Ocean

Disclaimer: This is not the only way to handle this. I have struggled to compile a start-> finish list, and now that I believe things are all buttoned up, I figured I’d share (7/26/24)

Tips

• Ensure you have VSCode, WSL2 (ubuntu), Digital Ocean account, Runcloud is helpful, Node v18, probably more I’m forgetting….

Backend

mkdir [FOLDER_NAME]

cd [FOLDER_NAME]

git clone git@github.com:drivebrandstudio/craft5-starter.git ./

rm -r -f .git

git init .

git add .

git remote add origin <URL_OF_EMPTY_GITHUB_REPO>

git commit -m 'First Commit'

git push origin main

UI

mkdir [FOLDER_NAME]

cd [FOLDER_NAME]

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

rm -r -f .git

it init .

git add .

git remote add origin <URL_OF_EMPTY_GITHUB_REPO>

git commit -m 'First Commit'

git push origin main

Hosting the 2 projects

• Purchase a Digital Ocean droplet
• Connect the droplet to RunCloud
• Create 2 system users and generate a password. Store password for use later
• Create a DB user, then a DB in runcloud.
• Create 2 webapps, one for the ui and one for the db
• — The DB project has a public file of /public
• — UI project has no public file
• — DB project :/home/web_app_user to open_basedir
• In the DB project, add :/home/app_user_name to the end of open_basedir
• In both, Prefer www version
• In both, Put the deploy keys from each runcloud project in the respective github repo
• Using the Digital Ocean console or SSH (vscode or other) into the DB server
• Follow setup instructions here for CraftCMS https://github.com/drivebrandstudio/Craft4-Scaffolding?tab=readme-ov-file#steps
• Add “headlessMode” => true to config > general.php
• Add “api” => “graphql/api” to config > routes.php
• run gunzip db.sql.gz to unzip the db backup from https://github.com/CreateSean/craft-starter
• run mysql -u <db_user_name> -p <db_name> < db.sql to import the DB
• Add to DNS records like outlined below, either for the domain or for the subdomain
• 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

RewriteEngine On
<IfModule mod_rewrite.c>
# Send would-be 404 requests to Craft
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteCond %{REQUEST_FILENAME} !-d
 RewriteCond %{REQUEST_URI} !^/(favicon\.ico|apple-touch-icon.*\.png)$ [NC]
 RewriteRule (.+) index.php?p=$1 [QSA,L]
 
</IfModule>
RewriteCond %{HTTP:Authorization} ^(.*)
RewriteRule .* - [e=HTTP_AUTHORIZATION:%1]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

add_header Content-Security-Policy "frame-ancestors 'self' https://yourbackendwebsite.com";

• Fill in the .env file in the server ui project
• Navigate to your hosted CraftCMS project (/access, u: cc_admin p:letmein) and Graphql > schemas > create new > label Private
• Graphql > tokens > create new > apply to Private schema and copy the token to notepad (will need later)
• Update filesystem and assets
• local folder
• switch on files in this filesystem have public URLs
• Base URL = @web/assets/[name_of_desired_folder_output]
• Base Path = assets/[name_of_desired_folder_output]
• In the UI runcloud webapp, run pm2 start npm --name "<give_reasonable_name>" -- start

Environment Variables

To run this project, you will need to add the following environment variables to your .env file

Get Daniel’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

CRAFT_CMS_GRAPHQL_ENDPOINT

CRAFT_CMS_GRAPHQL_TOKEN