Skip to content

Public Template for a CraftCMS V4 project with Vite, DDEV, BarbaJS and GSAP

Notifications You must be signed in to change notification settings

drivebrandstudio/Craft4-Scaffolding

Repository files navigation

Drive Brand Studio CraftCMS V4 template

Last reviewed 4/1/2024

Check out the 'with-tailwind' branch for muuuuuch more than just tailwind! (React frontend, aceternity components, graphQL for middleware, still using Craftcms)

If you run into any issues while following these steps, please make an issue against this Template Repo :D

Front and Back ends

  • Front end in twig
  • Back end in CraftCMS

Repository Structure

/.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)

Contributor & Developer Resources & Guides

Style Guide

  • 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

Requirements

  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

Steps

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

    Creating folder on local computer

    SSH (preferred):

       git clone git@github.com: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)

FAQ/Tips

Errors during install

  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)', .... )

Prettier

  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

Known pitfalls

  1. to be explored more.....