00:00
(upbeat music)
00:02
- So up till now, we've kind of just been ignoring
00:07
the @byte declaration that we've seen
00:08
within our home and our movie show page.
00:10
So let's take some time to actually figure out
00:12
what exactly that's doing.
00:13
So if we dive into either our home page
00:15
or our movie show page,
00:16
we'll see this @byte declaration
00:17
within the head of our HTML document.
00:19
And we can see that it's pointing to a path,
00:21
resources.js, app.js.
00:23
If we actually try to find that path,
00:25
so resources.js, open that up,
00:27
there is an app.js file.
00:29
Let's take a look at that.
00:30
And we see an import for CSS, app.css.
00:34
The dot dot slash means that it's going back directory.
00:36
So we're going out of the JS directory,
00:38
over into CSS, into there,
00:40
and looking for a file named app.css.
00:43
So let's go and give that an open as well.
00:44
We see some basic styling going on within this document.
00:47
Let's add a style of our own
00:48
to see if this is actually working.
00:49
So we'll come into here and let's add one for our h1
00:51
because we have one of those on each one of our pages so far.
00:54
And let's just set this h1's color to red.
00:57
It'll make it nice and obvious
00:58
that a change actually occurred.
00:59
So let's give this a save,
01:00
and we can jump back into our browser.
01:02
And sure enough, we can see our text turned red.
01:04
So, so far it seems like everything's rigged together.
01:06
We have our CSS file being imported
01:07
within our JavaScript file,
01:09
and we're informing Byte about our JavaScript file
01:10
within our HTML documents.
01:12
Furthermore, if we go ahead and right-click our page here,
01:15
go down to inspect,
01:16
let's jump into our network tab,
01:17
give the page a refresh
01:18
so that we get some network requests going on here,
01:20
and let's dive into the request for our document page.
01:22
Particularly, let's take a look
01:24
at that raw response once more.
01:25
Within the head of this raw response,
01:27
we see two additional scripts.
01:29
We have a script for byte client,
01:31
and we have a script for our app.js file
01:33
that we're specifying to that particular byte declaration
01:36
within our pages right here.
01:38
Well, the reason that there's two here
01:40
is because much like our AdonisJS server,
01:42
our assets actually have a server of their own
01:44
that's run by Byte.
01:45
Byte's communicating with that server
01:46
via their byte client here,
01:48
which allows it to use something called
01:49
hot module reloading to interject any changes
01:52
that it recognizes directly into our document.
01:55
For example, if we open our text editor backup
01:57
on top of our browser,
01:59
so that we can still kind of see that red text there
02:01
in the background,
02:02
let's jump back into our app.css file
02:04
and change the color from red to blue.
02:06
We can give this a save,
02:07
and when we do,
02:08
we'll see that's immediately reflected within our browser,
02:10
and the browser doesn't even need to refresh
02:12
to pick that up.
02:13
In fact, if we take a look at our network requests,
02:15
we'll see an additional request for app.css
02:17
with a brand new timestamp
02:18
that was initiated by a client script.
02:21
This client script is Byte's client script.
02:23
The Byte asset server picked up that we made a change
02:25
within one of our asset files.
02:27
It informed its script about that change,
02:29
which then reloaded the file
02:31
with a brand new timestamp inside of our active document.
02:34
Okay, let's go ahead and hide our browser back away,
02:36
and let's dive back into our homepage.
02:38
So this @byte declaration isn't the initiator point
02:40
for our resources.
02:42
Instead, that's within Byte's own configuration file.
02:44
So if we scroll down within our project structure,
02:47
we'll see at the very bottom a byte.config.js file.
02:50
Let's go ahead and open that up.
02:51
It's within this file that if we scroll up a little bit,
02:53
we're using an AdonisJS package
02:55
that incorporates with Byte to set up our client.
02:58
Within this AdonisJS package,
02:59
we're informing it about our entry points.
03:01
In particular, our current entry point
03:03
is resources.js/app.js.
03:05
And since our app.js file is also importing our CSS file,
03:09
it's including that within the changes as well.
03:11
Now it's at this point you might be wondering
03:12
why exactly is the CSS file being imported
03:15
inside of our JavaScript?
03:16
Well, during development, it doesn't really matter
03:18
because Byte's still gonna render everything out a-okay
03:21
anyway.
03:22
And whenever we build for production,
03:23
it doesn't really matter
03:24
because Byte's gonna split the two apart
03:26
into a separate CSS and JavaScript file.
03:28
So the fact that our CSS file is being imported
03:31
directly inside of our JavaScript file
03:33
doesn't really matter.
03:34
But if it does bother you, you can split them apart.
03:36
So let's go ahead and comment out our app.css import,
03:39
give this a save.
03:40
And now we need to inform Byte about it via an entry point.
03:43
So we'll scroll back down to our byte.config.js file
03:46
and let's add that CSS file as an entry point here.
03:48
So it's gonna be resources.css.app.css.
03:51
We can give this a save.
03:52
And now we need to inform our page
03:54
about that additional resource.
03:55
So we'll dive into our home.edge page
03:57
and we just need to add it to the array here as well.
03:59
So resources.css.app.css.
04:03
We'll only make this change on our home page
04:05
so that we can see that it's actually doing something
04:07
whenever we jump between our home and our movie show page.
04:09
So let's go and give this a save.
04:10
We can jump back into our browser.
04:12
Everything looks a-okay.
04:13
We saw a domino refresh,
04:14
but we'll do a sanity check here to refresh ourselves.
04:16
And indeed, we still have our blue text here.
04:19
However, if we jump into our movie show page
04:21
via one of our two movie links,
04:22
so we'll go and give that a click,
04:23
you'll see our H1's not blue.
04:25
Furthermore, if we dive down into our network requests,
04:27
we don't see our app.css anywhere within here.
04:30
Whereas if we jump back into our home page,
04:32
we have both an app.js and an app.css request.
04:35
So if you want your CSS and JavaScript files
04:37
completely separated during development,
04:39
you can absolutely do that.
04:40
However, the way that it's set up by default works a-okay
04:43
because at the end of the day,
04:44
whenever we actually build out our production files,
04:46
it will result in both a CSS and JavaScript file.
04:49
So we can go ahead and hide our browser by the way,
04:51
and I'm just gonna undo the change that we did here,
04:53
splitting them apart so that we can set it back
04:55
to how it was by default.
04:56
Jump back down to our Vite config.
04:57
We'll undo this change here.
04:58
And then lastly, we'll jump into our app.js file
05:00
and uncomment this.
05:01
We can give it a save.
05:03
And now if we jump back into our browser,
05:04
our H1 within our home page is still blue,
05:06
and we can verify that this is now on our movie show page
05:08
by jumping into one of those two links.
05:10
And whenever it comes to that production build
05:12
where we have our separate files split out
05:13
into individual files and bundles,
05:15
that's where Vite's going to use a manifest file
05:17
to keep track of which particular files ended up going out
05:20
into which individual bundles.
05:22
So within our project,
05:23
it's gonna house that manifest file
05:24
within our public directory.
05:26
If we dive into here right now,
05:27
it'll be within the assets file.
05:29
Currently we see a hot.json file.
05:31
This is what Vite will use during development
05:32
to keep track of what server our resources
05:35
are being served up on.
05:36
So if you happen to notice within the network panel
05:38
in our browser,
05:39
it's not actually making the path to our resources
05:42
to the same URL that we're using for our .js server.
05:46
That's because it's using that separate asset server
05:48
that we talked about earlier
05:49
to serve up and watch our asset files.
05:51
So it's just keeping track of what server it's running on
05:53
within this hot.json file.
05:55
But whenever we actually build out for production,
05:57
that's where this will be an actual manifest file,
05:59
keeping track of the different files
06:01
that we have within our final bundles.
06:03
And we'll use those along with a version hash
06:05
in place of the actual modules
06:08
that we see right here for our scripts.
06:09
Vite will then use that manifest file
06:11
to track back which individual bundles we need
06:14
within our page by tracking it back to the paths
06:16
that we provide within the resource array
06:17
for the Vite declaration here.
06:19
And at the end of the day,
06:20
you're really not gonna need to worry about any of that
06:21
because all that you need to do
06:22
is point Vite to the uncompiled asset version
06:25
within your project structure,
06:26
and it will map everything to the final files
06:28
that it needs to serve for your application.
06:30
And it will do all that automatically for you
06:32
based off of what you provide the Vite declaration
06:35
and your entry points within your viteconfig.js file.
Join The Discussion! (4 Comments)
Please sign in or sign up for free to join in on the dicussion.
thebrain
Does the import of external asset files (CSS, JS, and fonts) follow the same procedure?
Please sign in or sign up for free to reply
tomgobich
External assets as in from a CDN? No, you should just be able to plop the
<link/>or<script>for those directly within your EdgeJS page/layout.If the assets are being handled by Vite, then yes the process will be the same. You can also use the
asset()helper to reach for specific files as well.https://docs.adonisjs.com/guides/basics/vite#referencing-assets-inside-edge-templates
Please sign in or sign up for free to reply
omariqbal
I setup a project for adonisjs from scatch and it seems to be already following the 2 separate entrypoints for app.css and app.js
Please sign in or sign up for free to reply
tomgobich
Yep! Looks like they updated this with their recent Vite updates.
Please sign in or sign up for free to reply