• Front end in twig
• Back end in CraftCMS

/.ddev/ — We utilize DDEV to handle self-hosting of the dev environment.
/config/ — CraftCMS config. This should be mostly left alone.
/src/ — Un-minified JS and CSS files
/templates/ — Source code for our front-end, written in Twig.
/web/ — the folder containing the generated minified documents for the website, as well as local assets (images, videos, etc) that are stored on the webserver (preferably, store them somewhere where storage is cheaper and make a network request to fetch I.E. put a video on youtube instead of in here)

• Docker to containerize shizz 🐳 — Docker Installation
• DDEV to build our Docker servers for us 🤓 — DDEV Installation
• Vite to bundle up our code ⚡ — VITE
• Twig as our templating engine 🏎️ — Twig PHP
• Sass — SCSS
• Javascript 🤮 — Mozilla's Excellent JavaScript documentation
• NPM for managing Node packages 📦 — NPM
• Composer to manage php packages 🎼 — Composer
• MakeFile for easily running bulk scripts 🚚 — MakeFile
• CraftCMS for managing content 📝 — CraftCMS
• .env 🦺 — .env
• Prettier... But be warned 🧹 — prettier
• Prettier Plugin by Melody — prettier-plugin-twig-melody
• Node V14+, I recommend using NVM to install and manage — NVM

• DBS Twig template folder structuring is inspired by the Atomic Design. We rename these primatives to fit into the CraftCMS /templates/ folder structer of:

         templates
         ├── 404.twig
         ├── _components  -- ATOMS
         ├── _includes   -- MOLECULES
         │   ├── background.twig
         │   ├── bodyEnd.twig
         │   ├── footer.twig
         │   ├── head.twig
         │   ├── header.twig
         │   └── socials.twig
         ├── _layouts   -- TEMPLATES/PAGES
         │   ├── _entrytype
         │   │   ├── [some_entry_type].twig
         │   │   ├── .....
         │   ├── base.twig
         │   └── ....
         ├── error.twig  -- Craft Error Boundary
         └── index.twig  -- App entry point
     

  Aligning Designers and Developers is a good way to make groovy stuff quickly :D
• Prettier works (most of the time), so format on save
• We have no linter yet 😬
• Follow 'prior art' by referencing existing code within the codebase

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

1. Clone the scaffolding code OR use the scaffold to start a templated github repo:

   Creating folder on local computer

   SSH (preferred):

      git clone [email protected]:drivebrandstudio/Craft4-Scaffolding.git ./

   OR

   HTTPS:

   git clone https://github.com/drivebrandstudio/Craft4-Scaffolding.git ./

   Templated github repo

   Create a github repo using the template and clone that to your pc

2. Add empty .env file to the root of the project (next to .env.example)

3. Change web > .htaccess_dev into .htaccess (or prod if you are putting this on your production server)

4. Update package.json, make this project truly your own

   • Project name — must adhere to the rules of npm
   • author
   • description

5. Configure the project with DDEV

   make setup

6. Run the project with

    make dev

   If successful, your terminal should be taken over by the vite server. Split your terminal window, or open a new terminal to continue. Must leave Vite server running to view the local dev site

   Problem?

   This may take a few minutes. Let the terminal run.

   If nothing is happening after 5 minutes (which feels like a very long time...), CTRL+C in the terminal that is locked up, then try running

   ddev poweroff

   and re-running

   make setup

7. Allow DDEV to open the browser, so split your vscode terminal

   ddev launch

8. Navigate to /admin in the new web browser. 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)

1. 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...
2. Uninstall Ubuntu (all programs related to Ubuntu: Ubuntu, 'install REALEASE (Ubuntu)', .... )

1. 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

1. to be explored more.....