TL;DR:

I've already written most of this out in the Github public template, so feel free to just follow those instructions here or quickly follow the steps bellow:

NodeJS version 14+, I recommend using NVM if using Windows
Ubuntu (WSL2 distro for windows is what I use)
DDEV (or control Docker yourself if you're a real masochist)
Clone this repo
Get a server on Digital Ocean
Get a runcloud.io server
connect to DigitalOcean with Runcloud.io
upload your code to Runcloud (or make a Github repository and integrate with Runcloud)
Create Runcloud DB User and DB
run the setup (create a .env file, `npm install`, `composer install`, `./craft setup`, add /web to WebApplication/{project}/settings/Stack/Public Path in Runcloud, change max_execution_time in WebApplication/{project}/settings/ to 120, remove `disable_functions` that have an ⚠️ in www.{project}.com/admin/utilities/system-report )

Background about Dan

I've always enjoyed figuring out how things worked, so coding was a good path to choose (thanks mom!).

History with code

After a 6 month coding bootcamp through UNH (Professor + TA + others were _wonderful_, definitely a crash course on how the MERN stack worked), I got a job in my now wife's home town, which was a miracle. After working in an established coding environment (making a medical EHR application using React, Java (Spring boot & Hibernate; I did not work with this at all really), SQL, a lot of Redux, some Docker, and a middleware someone else built), I swapped to a small marketing firm in my new home town (changed jobs, bought a home, got married, and had a baby girl.... 2023 was the year to do it all!). Here, they utilized a few methods for hosting websites (Wix, Wordpress (no one liked), CMSMadeSimple, and CraftCMS, as well as others I'm sure I'm forgetting), and each had its own challenges. By far, however, was CraftCMS, as it was essentially the whole package. Utilizing PHP, we were directly returning HTML from the server, so no need for an API or middleware, its built into the language! Twig has been slow for me to pick up, but now that I have been in it for 6 months, I'm finally starting to get a grasp on things.

Stepping outside of the front end

The biggest thing was actually the infrastructure outside of the codebase and IDE. Purchasing a personal server from the same provider they used, DigitalOcean, took all the pressure off of me as I assumed I would need to host my server myself, exposing my home network to the WWW (scary). Runcloud, another service the company utilizes, makes it simple to integrate Github with DigitalOcean and make sure the appropriate scripts get run when there is an update. Learning about these extraneous things from my work was just the reason for making the change in jobs in the first place; it's outside my area of expertise and I wanted to expand my tool belt. Knowing things from tip-to-tail has been my goal for a while, so seeing things actually exist from my own (and many, many others) sweat and tears is crazy. Along the way, I wanted to look into a better local development environment than having the code hosted by DigitalOcean, so I initially started with XAMPP and some NGINX servers to host everything locally, which worked for a single project (and potentially up to what, 8... 9? IDK XAMPP is apparently weird, I didn't do too much digging), so one day while listening to Syntax, a coding podcast from my Bootcamp days, I heard about DDEV, a Docker script set that would host your site for you locally (and so, so much more...). I took a few weeks of prodding and begging into place, but once I got it working on my office PC, I ran home to set it up again following my instructions on my personal laptop. Once the kinks were ironed out, I gave the instructions to my coworker and had her set up everything on her pc. She hit some snags (expected), and those were added to the instructions list here!

Things work now.... but not well....

Now we both use VSCode, my scaffolding repo, DDEV, Ubuntu, and more tools to do our daily work. With VSCode being a non-php specific language IDE (like something like PHPStorm), I had to do some research on how to get code formatting with Prettier working to my coworkers standards. After many disappointing discoveries about extensions being deprecated and left behind by Devs, I think I mangled things into enough working shape to get by for now (just delete lines with arrow functions :badpokerface: ). Now we have a local environment to view the code changes we make near instantly with Vite's HMR (hot module reloading... I think?). Then, once we are happy, we 'git push' our code to GitHub which should trigger the Webhook we set up between Github and Runcloud. That hook triggers our build script, updating our production site! Making sure you have backups of the Production database is important too, so don't forget that.

Starting out a website

Requirements

NodeJS version 14+, I recommend using NVM if using Windows
Ubuntu
DDEV

Don't do what I do and just simply go step by step while reading this. Try reading through it first and then opening programs / running scripts. I never follow my own advice, so I expect a lot of questions/comments that are addressed in the steps :) I've already run into that a few times and have tried to update the instructions to be as succinct as possible, but sometimes a tip or clue will come AFTER the script you need to run, so take your time on the first run through in order to save yourself HOURS of troubleshooting headaches! I definitely haven't already gone through that and its definitely not why I'm writing this article in the first place :D

Clone the scaffolding code OR use the scaffold to start a templated github repo:
Add .env file
Allow DDEV and makefile to configure the project
```
make install
```
This may take a few minutes. Let the terminal run. If nothing is happening after 5 minutes (which feels like a very long time...), try running
```
ddev poweroff
```
But seriously, start a timer once you feel like its been too long and wait for it to be at like 4 or 5 minutes.
Update package.json, make this project truly your own :D
- Project name
- author
- description
- etc
Start the dev servers
```
make dev
```
Allow DDEV to open the browser, so split your vscode terminal
```
ddev launch
```
Navigate to https://{the-project-name}.ddev.site/admin

If you land on a page with server errors or an if(!hasCraftInstalled) then you are on the right track. Now check your .htaccess file and .env (make sure you have your database hooked into ddev correctly)
Build the site on Runcloud

You have to take your code and run it through Vite in order to get your bundled output. To do this, from your runcloud server, run
```
git fetch
```
```
npm install
```
```
composer install
```
```
npm run build
```
I utilize VSCode to SSH into the Runcloud server with these extentions:
remote -ssh
remote -ssh:editting conf
remote explorer

FAQ/Tips

Errors during install

Follow the DDEV instructions slowly and carefully. Read each line all the way through, it's faster than skimming and hitting an error and having to debug...
Uninstall Ubuntu (all programs related to Ubuntu: Ubuntu, 'install REALEASE (Ubuntu)', .... )

Prettier

You will need to restart the vscode window from the Command Palette (ctrl+shift+p)

Developer: reload window

After the reload, let vscode finish loading and indexing, then attempt to use Prettier

Other Extentions

auto close tag (jun han)
auto complete tag (jun han)
auto rename tag (jun han)
easy snippet
git blome
git graph
open in browser
php intelephense (ben mewburn)
prettier
remote -ssh
remote -ssh:editting conf
remote explorer
twig language support (rholdos)
css peek
indent-rainbow
todo tree
todo+
twig pack (bajdizs)
broswer lite anthony fu
easy snippet inu1255
email leighlondon
microstof edge tools for vs code
night owl
open in browser
peacock
snazzy operator
theme
code spell checker
formatting toggle
git graph
gremlins tracker for vscode
tailwind css intellisense
vim
vite

VSCode settings

{
  "security.workspace.trust.untrustedFiles": "open",
  "php.validate.executablePath": "",
  "editor.accessibilitySupport": "off",
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "diffEditor.ignoreTrimWhitespace": false,
  "gitlens.codeLens.dateFormat": "",
  "gitlens.defaultDateFormat": "",
  "emmet.includeLanguages": {
    "twig": "html"
  },
  "auto-close-tag.activationOnLanguage": [
    "twig",
    "xml",
    "php",
    "blade",
    "ejs",
    "jinja",
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "plaintext",
    "markdown",
    "vue",
    "liquid",
    "erb",
    "lang-cfml",
    "cfml",
    "HTML (EEx)",
    "HTML (Eex)",
    "plist",
    "twig"
  ],
  "[markdown]": {
    "editor.defaultFormatter": "DavidAnson.vscode-markdownlint"
  },
  "[twig]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "files.associations": {
    "*.twig": "twig"
    // "*.scss": "tailwindcss"
  },
  "vscode-edge-devtools.defaultEntrypoint": "index.twig",
  "remote.SSH.remotePlatform": {
     },
  "workbench.colorTheme": "Night Owl",
  "workbench.startupEditor": "none",
  "prettier.prettierPath": "./node_modules/prettier",
  "todo-tree.general.tags": [
    "BUG",
    "HACK",
    "FIXME",
    "TODO",
    "XXX",
    "[ ]",
    "[x]",
    "CRIT"
  ],
  "todo-tree.highlights.customHighlight": {
    "CRIT": {
      "foreground": "red",
      "iconColour": "red",
      "gutterIcon": true
    },
    "BUG": {
      "icon": "bug"
    },
    "HACK": {
      "icon": "tools"
    },
    "FIXME": {
      "icon": "flame"
    },
    "XXX": {
      "icon": "x"
    },
    "[ ]": {
      "icon": "issue-draft"
    },
    "[x]": {
      "icon": "issue-closed"
    }
  },
  "remote.SSH.defaultForwardedPorts": [],
  "githubPullRequests.pullBranch": "never",
  "diffEditor.useInlineViewWhenSpaceIsLimited": false,
  "cSpell.enableFiletypes": ["twig"],
  "cSpell.userWords": [
    "barba",
    "endfor",
    "endswitch",
    "fullsize",
    "gsap",
    "labelledby",
    "noopener",
    "noreferrer",
    "olivemenus",
    "primarynav",
    "striptags",
    "stylesheet",
    "subnav",
    "tabindex",
    "vite",
    "webroot"
  ],
  "editor.formatOnPaste": false,
  "editor.formatOnSave": false,
  "editor.formatOnType": false,
  "workbench.editor.doubleClickTabToToggleEditorGroupSizes": "maximize"
}

Hosting a website