Basic Vite setup #4
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
joshuapease
force-pushed
the
jp/vite-setup
branch
from
6789ba8 to
e968831
Compare
joshuapease
commented
May 14, 2024
Comment on lines
+11
to
+16
| $host = Craft::$app->getRequest()->getIsConsoleRequest() | ||
| ? App::env('PRIMARY_SITE_URL') | ||
| : Craft::$app->getRequest()->getHostInfo(); | ||
| $httpPort = 3000; | ||
| $httpsPort = 3001; | ||
| $devServerPort = str_starts_with($host, 'https') ? $httpsPort : $httpPort; |
There was a problem hiding this comment.
For a while I was having difficulty getting https working with DDEV (I've got it working great now).
Figured it wasn't too much extra code to accommodate other's who might hit that issue.
joshuapease
commented
May 14, 2024
| font-family: 'Source Sans Pro'; | ||
| font-style: normal; | ||
| font-weight: 300; | ||
| src: url('../fonts/sourcesanspro-light-webfont.woff2') format('woff2'); |
There was a problem hiding this comment.
Vite can automatically copy & hash filenames for fonts. It just has to be a relative path from the css file to the font file.
joshuapease
commented
May 14, 2024
Comment on lines
+10
to
+13
| <link rel="preload" href="{{ craft.vite.asset("src/fonts/sourcesanspro-bold-webfont.woff2") }}" as="font" type="font/woff2" crossorigin> | ||
| <link rel="preload" href="{{ craft.vite.asset("src/fonts/sourcesanspro-light-webfont.woff2") }}" as="font" type="font/woff2" crossorigin> | ||
| <link rel="preload" href="{{ craft.vite.asset("src/fonts/sourcesanspro-regular-webfont.woff2") }}" as="font" type="font/woff2" crossorigin> | ||
| <link rel="preload" href="{{ craft.vite.asset("src/fonts/sourcesanspro-semibold-webfont.woff2") }}" as="font" type="font/woff2" crossorigin> |
There was a problem hiding this comment.
Figured this would be a nice example/reminder to preload your fonts.
joshuapease
commented
May 14, 2024
| host: '0.0.0.0', | ||
| strictPort: true, | ||
| port: HTTP_PORT, | ||
| origin: env.PRIMARY_SITE_URL + ':' + originPort, |
There was a problem hiding this comment.
This line is also needed to get webfonts, images, etc to work properly in dev mode.
You have to tell Vite the precise URL to use for any files referenced in your CSS & JS files.
joshuapease
requested review from
ten1seven,
maxdmyers,
maxfenton and
JJimmyFlynn
JJimmyFlynn
approved these changes
May 14, 2024
ten1seven
approved these changes
May 14, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Overview
What this PR does.
What this PR (intentionally) doesn't do
How to test
Create a directory for your new Craft project
Run the following
composer create-projectcommand.It uses this branch as the starter project.
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.
What you should see:
ℹ️ You may need a
ddev restartto get rid of 404s around webfonts. The Vite config is looking for thePRIMARY_SITE_URLenvironment variable. It might not be fully loaded by DDEV.