- [Instructor] It's time to talk about
how we load things into an Electron project.
So, right now, if you look at our application
we're loading something from the web.
In the src folder if we pull up App.vue
you'll notice that down towards the bottom
we have this lifecycle method that Vue uses called mounted.
This is a good place to load things like,
for example, some JSON of from the web.
There are instances where you want
to load things from a local file as well.
In order to show you how to work with that
I've added some files into this public folder.
There is a subfolder here now called images
that has a bunch of images that I'll use on this project.
There's also a file called inventory.json.
This is a data file that is similar to what
we're loading and our App.vue JS file.
It does have different content, so, although it's similar
it's not exactly the same and it's just
for a different store.
That, since we're working with this Binaryville store,
then we just have content that matches.
All right so, if we wanted to we could still use
the App.vue file and just point to our new content.
Now, the interesting thing is, we need to learn
how Electron is actually loading things.
Remember, Electron is essentially a browser.
It also has a piece that runs from Node.js.
I could be tempted to so something like this
and say, I want to load up a file using the Fetch API.
Which is just a way of loading files on the web.
We'll say ./ and then inventory.json.
Let's go ahead and save this and
we'll pull up our terminal and issue
the npm run electron:serve command.
Now, you can see that this is working pretty well.
The first thing I want to talk about is,
how did it know where this file is?
Because we're calling this from App.vue
which is in the src folder.
But, our inventory.json is actually in the public folder.
Now, that's happening because of how Vue.js works
and what happens when you work with Vue.js.
Essentially, all of these files that have .vue extension
are going to be combined into an application
by something called Webpack, which is
a builder application and everything's going
to be converted into JavaScript files.
And all those files are technically going
into memory when you're just running the application.
a regular web project, you would actually see
But enough to say that when this fetch command
gets interpreted, it's going to look for something
in the same folder as the JavaScript
that is going to be generated by our Webpack process.
Which will be in the same place as as index.html file.
That's why it's logically finding inventory.json right here.
So, that's actually working.
Except that it's not going to work
if you actually build this into a real application.
Let's go ahead and cancel this thing.
I'm going to make a little trick here.
In Visual Studio Code, I'm going to add a new terminal.
You can switch between the terminals here
and just delete this one.
This one will stop the current process.
If you're working on something like
the terminal or Hyper you can just either quit Hyper
and re-run it or just close the window
and open up a new window.
This is sort of the same thing.
Now I'm going to run
So this is the one that actually creates the app for me.
then in the Electron folder, we can look in
the distribution Electron folder for this mac file.
If you open that up, you'll see
that my inventory isn't there anymore.
So, what's happening here?
Well, a lot of different things.
First is that if you think of Electron as a browser,
plus Node.js, this might make a little bit more sense.
When it's running this application
it's trying to execute this fetch command here.
This fetch is actually looking for a file in
this same mac folder with this same name.
It's not finding it, and so we're not getting anything
so, you can't really load files like this.
It doesn't work.
So were going to have to use a different command
which is going to be the require statement from Node.js.
Remember, we have Node.js so we can actually load files
we can do anything that Node.js can do inside our projects.
Let's go ahead and use the require command
which will work, because our application, again,
is nothing more than a browser application plus Node.js.
Then look for our file inventory.json file.
Let's try running this.
but let's go ahead and just run
the electron:serve command right now.
You can see that it failed to compile.
The problem here is, it says that
the relative module was not found.
So, what's going on there?
Well, what's happening is that this require statement
is inside this Vue project.
What we're doing here is asking for this file
to essentially be incorporated into our Vue project
but that happens to be in our src folder.
Inside our src folder, there is no inventory.json file.
So, we're going to fix that easily by just moving it.
But remember that the reason this worked before
is because it's reading this file
when the application is running, just as it would do
a fetch for a file on the web,
it's doing a fetch, but for a local file.
And that file, because of all of
the processed Vue projects, was all going
to be inserted into something that looks like
what's in this public folder.
But, because we're doing a require command
in App.vue, it's going to need that file
to be in our src folder instead.
So, we'll just move it.
And you can actually see that it's going to try to run it.
Let's go ahead, and sometimes actually, it needs to be
re-run again, but I can tell that I forgot
to actually set products here, to data.
Let's go ahead and fix that.
Let's Control + C out of here.
Clear this out and then do, again,
a npm run electron:serve.
All right, so now you can see my inventory,
actually showing up.
And because we're using a require statement
it's actually bringing everything into our project.
So let's go ahead and make sure that we stop
the process from running again.
Control + C, clear this out and do
an do an npm run
electron:build.
It looks like its done building and because
I'm on a Mac, this file will be still this one right here.
Let's make sure that there's not another copy
of it running.
If there is another copy of it running
you may want to quit it.
Sometimes this is just the actual development version
but quitting it is just a little bit safer.
So, let's go ahead and re-run this.
And you can see now that, even in the build version
of the application, my items are loading up just fine.
So, it's always good to remember
this is essentially a browser with Node.js
and that you can still use the power of Node.js sometimes
to run some commands.
And sometimes, you're going to want to do things to the browser.
Now, which way should I be loading this inventory?
Now, this is a place where you may not want
the files to be read locally, because you may want
to be updating that inventory often.
So, this is a perfectly good example for using,
say, a fetch command or something else
that reads the files from the web.
But occasionally, you'll want to make sure
that things are completely offline capable
and this would give you that ability as well.