Vite and Our Assets
In this lesson, we'll learn how Vite is integrating into our EdgeJS views to serve our JavaScript and CSS files.
- Author
- Tom Gobich
- Published
- Jan 24
- Duration
- 6m 38s
Developer, dog lover, and burrito eater. Currently teaching AdonisJS, a fully featured NodeJS framework, and running Adocasts where I post new lessons weekly. Professionally, I work with JavaScript, .Net C#, and SQL Server.
Adocasts
Burlington, KY
Transcript
Vite and Our Assets
-
(upbeat music)
-
- So up till now, we've kind of just been ignoring
-
the @byte declaration that we've seen
-
within our home and our movie show page.
-
So let's take some time to actually figure out
-
what exactly that's doing.
-
So if we dive into either our home page
-
or our movie show page,
-
we'll see this @byte declaration
-
within the head of our HTML document.
-
And we can see that it's pointing to a path,
-
resources.js, app.js.
-
If we actually try to find that path,
-
so resources.js, open that up,
-
there is an app.js file.
-
Let's take a look at that.
-
And we see an import for CSS, app.css.
-
The dot dot slash means that it's going back directory.
-
So we're going out of the JS directory,
-
over into CSS, into there,
-
and looking for a file named app.css.
-
So let's go and give that an open as well.
-
We see some basic styling going on within this document.
-
Let's add a style of our own
-
to see if this is actually working.
-
So we'll come into here and let's add one for our h1
-
because we have one of those on each one of our pages so far.
-
And let's just set this h1's color to red.
-
It'll make it nice and obvious
-
that a change actually occurred.
-
So let's give this a save,
-
and we can jump back into our browser.
-
And sure enough, we can see our text turned red.
-
So, so far it seems like everything's rigged together.
-
We have our CSS file being imported
-
within our JavaScript file,
-
and we're informing Byte about our JavaScript file
-
within our HTML documents.
-
Furthermore, if we go ahead and right-click our page here,
-
go down to inspect,
-
let's jump into our network tab,
-
give the page a refresh
-
so that we get some network requests going on here,
-
and let's dive into the request for our document page.
-
Particularly, let's take a look
-
at that raw response once more.
-
Within the head of this raw response,
-
we see two additional scripts.
-
We have a script for byte client,
-
and we have a script for our app.js file
-
that we're specifying to that particular byte declaration
-
within our pages right here.
-
Well, the reason that there's two here
-
is because much like our AdonisJS server,
-
our assets actually have a server of their own
-
that's run by Byte.
-
Byte's communicating with that server
-
via their byte client here,
-
which allows it to use something called
-
hot module reloading to interject any changes
-
that it recognizes directly into our document.
-
For example, if we open our text editor backup
-
on top of our browser,
-
so that we can still kind of see that red text there
-
in the background,
-
let's jump back into our app.css file
-
and change the color from red to blue.
-
We can give this a save,
-
and when we do,
-
we'll see that's immediately reflected within our browser,
-
and the browser doesn't even need to refresh
-
to pick that up.
-
In fact, if we take a look at our network requests,
-
we'll see an additional request for app.css
-
with a brand new timestamp
-
that was initiated by a client script.
-
This client script is Byte's client script.
-
The Byte asset server picked up that we made a change
-
within one of our asset files.
-
It informed its script about that change,
-
which then reloaded the file
-
with a brand new timestamp inside of our active document.
-
Okay, let's go ahead and hide our browser back away,
-
and let's dive back into our homepage.
-
So this @byte declaration isn't the initiator point
-
for our resources.
-
Instead, that's within Byte's own configuration file.
-
So if we scroll down within our project structure,
-
we'll see at the very bottom a byte.config.js file.
-
Let's go ahead and open that up.
-
It's within this file that if we scroll up a little bit,
-
we're using an AdonisJS package
-
that incorporates with Byte to set up our client.
-
Within this AdonisJS package,
-
we're informing it about our entry points.
-
In particular, our current entry point
-
is resources.js/app.js.
-
And since our app.js file is also importing our CSS file,
-
it's including that within the changes as well.
-
Now it's at this point you might be wondering
-
why exactly is the CSS file being imported
-
inside of our JavaScript?
-
Well, during development, it doesn't really matter
-
because Byte's still gonna render everything out a-okay
-
anyway.
-
And whenever we build for production,
-
it doesn't really matter
-
because Byte's gonna split the two apart
-
into a separate CSS and JavaScript file.
-
So the fact that our CSS file is being imported
-
directly inside of our JavaScript file
-
doesn't really matter.
-
But if it does bother you, you can split them apart.
-
So let's go ahead and comment out our app.css import,
-
give this a save.
-
And now we need to inform Byte about it via an entry point.
-
So we'll scroll back down to our byte.config.js file
-
and let's add that CSS file as an entry point here.
-
So it's gonna be resources.css.app.css.
-
We can give this a save.
-
And now we need to inform our page
-
about that additional resource.
-
So we'll dive into our home.edge page
-
and we just need to add it to the array here as well.
-
So resources.css.app.css.
-
We'll only make this change on our home page
-
so that we can see that it's actually doing something
-
whenever we jump between our home and our movie show page.
-
So let's go and give this a save.
-
We can jump back into our browser.
-
Everything looks a-okay.
-
We saw a domino refresh,
-
but we'll do a sanity check here to refresh ourselves.
-
And indeed, we still have our blue text here.
-
However, if we jump into our movie show page
-
via one of our two movie links,
-
so we'll go and give that a click,
-
you'll see our H1's not blue.
-
Furthermore, if we dive down into our network requests,
-
we don't see our app.css anywhere within here.
-
Whereas if we jump back into our home page,
-
we have both an app.js and an app.css request.
-
So if you want your CSS and JavaScript files
-
completely separated during development,
-
you can absolutely do that.
-
However, the way that it's set up by default works a-okay
-
because at the end of the day,
-
whenever we actually build out our production files,
-
it will result in both a CSS and JavaScript file.
-
So we can go ahead and hide our browser by the way,
-
and I'm just gonna undo the change that we did here,
-
splitting them apart so that we can set it back
-
to how it was by default.
-
Jump back down to our Vite config.
-
We'll undo this change here.
-
And then lastly, we'll jump into our app.js file
-
and uncomment this.
-
We can give it a save.
-
And now if we jump back into our browser,
-
our H1 within our home page is still blue,
-
and we can verify that this is now on our movie show page
-
by jumping into one of those two links.
-
And whenever it comes to that production build
-
where we have our separate files split out
-
into individual files and bundles,
-
that's where Vite's going to use a manifest file
-
to keep track of which particular files ended up going out
-
into which individual bundles.
-
So within our project,
-
it's gonna house that manifest file
-
within our public directory.
-
If we dive into here right now,
-
it'll be within the assets file.
-
Currently we see a hot.json file.
-
This is what Vite will use during development
-
to keep track of what server our resources
-
are being served up on.
-
So if you happen to notice within the network panel
-
in our browser,
-
it's not actually making the path to our resources
-
to the same URL that we're using for our .js server.
-
That's because it's using that separate asset server
-
that we talked about earlier
-
to serve up and watch our asset files.
-
So it's just keeping track of what server it's running on
-
within this hot.json file.
-
But whenever we actually build out for production,
-
that's where this will be an actual manifest file,
-
keeping track of the different files
-
that we have within our final bundles.
-
And we'll use those along with a version hash
-
in place of the actual modules
-
that we see right here for our scripts.
-
Vite will then use that manifest file
-
to track back which individual bundles we need
-
within our page by tracking it back to the paths
-
that we provide within the resource array
-
for the Vite declaration here.
-
And at the end of the day,
-
you're really not gonna need to worry about any of that
-
because all that you need to do
-
is point Vite to the uncompiled asset version
-
within your project structure,
-
and it will map everything to the final files
-
that it needs to serve for your application.
-
And it will do all that automatically for you
-
based off of what you provide the Vite declaration
-
and your entry points within your viteconfig.js file.
-
Introduction
-
Fundamentals
-
2.0Routes and How To Create Them5m 23s
-
2.1Rendering a View for a Route6m 29s
-
2.2Linking Between Routes7m 51s
-
2.3Loading A Movie Using Route Parameters9m 17s
-
2.4Validating Route Parameters6m 6s
-
2.5Vite and Our Assets6m 38s
-
2.6Setting Up Tailwind CSS9m 5s
-
2.7Reading and Supporting Markdown Content4m 32s
-
2.8Listing Movies from their Markdown Files8m 51s
-
2.9Extracting Reusable Code with Services7m 4s
-
2.10Cleaning Up Routes with Controllers4m 52s
-
2.11Defining A Structure for our Movie using Models9m 38s
-
2.12Singleton Services and the Idea of Caching6m 11s
-
2.13Environment Variables and their Validation4m 16s
-
2.14Improved Caching with Redis10m 44s
-
2.15Deleting Items and Flushing our Redis Cache6m 46s
-
2.16Quick Start Apps with Custom Starter Kits6m 28s
-
2.17Easy Imports with NodeJS Subpath Imports8m 40s
-
-
Building Views with EdgeJS
-
3.0EdgeJS Templating Basics8m 49s
-
3.1HTML Attribute and Class Utilities6m 9s
-
3.2Making A Reusable Movie Card Component10m 24s
-
3.3Component Tags, State, and Props4m 53s
-
3.4Use Slots To Make A Button Component6m 56s
-
3.5Extracting A Layout Component5m 13s
-
3.6State vs Share Data Flow2m 59s
-
3.7Share vs Global Data Flow6m 7s
-
3.8Form Basics and CSRF Protection6m 13s
-
3.9HTTP Method Spoofing HTML Forms3m 3s
-
3.10Easy SVG Icons with Edge Iconify7m 57s
-
-
Database and Lucid ORM Basics
-
4.0Configuring Lucid and our Database Connection4m 3s
-
4.1Understanding our Database Schema9m 35s
-
4.2Introducing and Defining Database Migrations18m 35s
-
4.3The Flow of Migrations8m 28s
-
4.4Introducing Lucid Models5m 43s
-
4.5Defining Our Models6m 49s
-
4.6The Basics of CRUD11m 56s
-
4.7Defining Required Data with Seeders11m 11s
-
4.8Stubbing Fake Data with Model Factories13m 48s
-
4.9Querying Our Movies with the Query Builder15m 30s
-
4.10Unmapped and Computed Model Properties3m 24s
-
4.11Altering Tables with Migrations7m 6s
-
4.12Adding A Profile Model, Migration, Factory, and Controller2m 57s
-
4.13SQL Parameters and Injection Protection9m 19s
-
4.14Reusable Query Statements with Model Query Scopes8m 11s
-
4.15Tapping into Model Factory States9m 15s
-
4.16Querying Recently Released and Coming Soon Movies4m 59s
-
4.17Generating A Unique Movie Slug With Model Hooks7m 59s
-
-
Lucid ORM Relationships
-
5.0Defining One to One Relationships Within Lucid Models5m 49s
-
5.1Model Factory Relationships2m 54s
-
5.2Querying Relationships and Eager Vs Lazy Loading5m 17s
-
5.3Cascading and Deleting Model Relationships5m 16s
-
5.4Defining One to Many Relationships with Lucid Models6m 56s
-
5.5Seeding Movies with One to Many Model Factory Relationships5m 24s
-
5.6Listing A Director's Movies with Relationship Existence Queries8m 41s
-
5.7Listing and Counting a Writer's Movies8m 41s
-
5.8Using Eager and Lazy Loading to Load A Movie's Writer and Director5m 18s
-
5.9Defining Many-To-Many Relationships and Pivot Columns9m 48s
-
5.10Many-To-Many Model Factory Relationships4m 50s
-
5.11A Deep Dive Into Relationship CRUD with Models18m 5s
-
5.12How To Create Factory Relationships from a Pool of Data13m 55s
-
5.13How To Query, Sort, and Filter by Pivot Table Data9m 47s
-
-
Working With Forms
-
6.0Accepting Form Data12m 15s
-
6.1Validating Form Data with VineJS9m 29s
-
6.2Displaying Validation Errors and Validating from our Request7m 16s
-
6.3Reusing Old Form Values After A Validation Error2m 3s
-
6.4Creating An EdgeJS Form Input Component5m 28s
-
6.5Creating A Login Form and Validator5m 1s
-
6.6How To Create A Custom VineJS Validation Rule9m 7s
-
-
Authentication & Middleware
-
The Flow of Middleware7m 49s
-
Authenticating A Newly Registered User4m 14s
-
Checking For and Populating an Authenticated User2m 10s
-
Logging Out An Authenticated User2m 24s
-
Logging In An Existing User6m 54s
-
Remembering A User's Authenticated Session6m 55s
-
Protecting Routes with Auth, Guest, and Admin Middleware5m 36s
-
-
Filtering and Paginating Queries
Join The Discussion! (0 Comments)
Please sign in or sign up for free to join in on the dicussion.
Be the first to Comment!