Basic Vite setup

[joshuapease]

Overview

• 1

What this PR does.

• Bare bones Vite config
• DDEV setup for ports & daemons
• Working webfonts
• Working JS
• Avoids flash of unstyled content while in dev mode.

What this PR (intentionally) doesn't do

• Set up Tailwind
• Set up Prettier & other coding standards
• Static asset copying (think icon SVGs, will address in future PR)

How to test

Create a directory for your new Craft project

mkdir my-craft-project

# Then move into your directory
cd my-craft-project

Run the following composer create-project command.

It uses this branch as the starter project.

docker run --rm -it -v "$PWD":/app -v ${COMPOSER_HOME:-$HOME/.composer}:/tmp composer create-project viget/craft-site-starter=dev-jp/vite-setup ./ --ignore-platform-reqs

After completing the setup steps (it prompts for your project's name), run the following commands.

👇 These will gradually become more automated as this project progresses.

# Start DDEV
ddev start

# Install Craft
ddev craft install

# Install Vite plugin
ddev craft plugin/install vite

# Launch the site!
ddev launch

What you should see:

• A styled page
• Webfonts being loaded in the network tab.
• A console log (and no errors)

ℹ️ You may need a ddev restart to get rid of 404s around webfonts. The Vite config is looking for the PRIMARY_SITE_URL environment variable. It might not be fully loaded by DDEV.