to this application.
But before we do that,
I want to make sure that you understand everything
that is installed when you work with the Vue CLI
as well as Electron Builder,
and what we brought in from my project.
So as you can see,
we still have the Vue CLI commands right here
that you would normally get with just installing Vue.js,
so you can still issue the npm run serve,
npm run build, and npm run link commands.
And in addition to that,
electron:build and electron:serve.
and work with your browser
just like you would with any other project.
that are unique to the Electron Builder project
and that is both of these electron:build as electron:serve.
electron:build is what you use while you're in development,
a production version of your application.
When you run these two commands,
Let's go ahead and run the electron:build command.
and hit Return,
It's actually creating an application for you
and it's also going to create the things
that you would send along to a website
or on some sort of media
to create the applications on a different machine.
you'll notice that it built a bunch of different files.
but you can see that in the project folder
underneath this electron,
there are now some zip files, some dmg files,
that has your application with an icon
that you can actually copy to your application's folder
and run it just like any other application.
Let's go ahead and run that.
that you saw before,
but now in your dock, it gets a unique icon,
and now this is something
that you can send to somebody else or distribute.
Menus are a lot simpler as well.
So,
that is how you distribute
or build your project.
Now all that stuff is coming in
from all the folders that we see right here.
And because of the way we chose to configure Vue.js
when we installed it, we asked it to create
all these different configuration files externally.
So if you wanted to change the way
that postcss works with Vue.js,
you can modify the settings here
and postcss will take care of writing CSS
that's compatible with older browsers.
This isn't going to be a big issue
when you're working with Electron
because if you remember,
when we install Electron, it's installing
a specific version of Chrome called Chromium.
So you don't really need to worry that much
about what is in here.
You're only going to be releasing your project
with a specific version of the browser.
babel.config is what normally allows Vue.js projects
to produce JavaScript that is compatible
with older browsers.
Again, we're using a specific version of our browser,
so normally we don't need to worry about that.
Just make sure that you understand
that whatever version of Chromium that is being released
with the version of Electron
is the version of the browser that you're using.
There's some other typical files that get ignore
and we saw the package.json.
The package.json log is a more verbose version
of what's in here.
It actually lists all the dependencies as well.
You also have this eslint file
that is installed by Vue.js
that allows you to configure production environments
and it does all kinds of other things.
Now this could be a useful file if you want to change
the way that ESLint is linting your project,
which means that it's going to give you feedback
depending on how you're coding
as to how you should be coding.
This browserslist file is a list that postcss
and sometimes other linters and tools
are going to be using to determine
what the support for your browsers should be here.
because Electron is shipping specific browser.
So other than that, we have the node_modules folder.
You can see the dist_electron here.
if you issue some of the Electron commands.
which is where most of your programming will get done,
so this is where your JavaScript
and this is also where all of our Vue.js files are.
And then public is going to be anything that at runtime,
your application is going to need to have access to.
So you can see the index.html file is right here
and the framework is going to take care
so normally you don't even have to touch this file.
The app div right here, the div with an id of app,
is where your application is going to go,
so you can play around with the rest of this file
if you need to.
Now in the src files that I mentioned,
That is where your main Electron process
is going to be running.
And then we have main.js.
This is where your main Vue application will be running
if you're using Vue.js to build things,
Again, I did that whole course on building this application,
you should take a look at that.
Essentially, the way that this application works
is by importing a number of different libraries
including, you can see the bootstrap import here,
the router import which actually gets done by Electron
and the bootstrap.css imports.
So here I'm importing the JavaScript,
here I'm importing the CSS,
and animate is just something that place some animations.
is that normally we're really concerned
files that our applications
are going to be bigger than web files
because it's going to include a lot of different pieces
that will make it work with the current operating system.
So generally speaking, doing things like importing
is not going to have a huge effect on your files.
Also, typically and when installing things in this way,
all these files are going to be local,
so it's not going to have to make a request to a website
to receive the files.
This also means that you can use these applications
most of the time without a connection to the web.
So we're also importing different components here.
And we've got a router setup
so that when you go to different URLs,
it loads up either the Products page
or the Checkout page.
And then,
in the App.vue JS,
this is kind of our main component.
The main component has a router-view,
which is what controls what actually gets loaded
in those different routes,
and we passed along all kinds of information.
There is something important in here.
This is also where I'm importing my inventory.
And this is something you may want to consider modifying,
and I'll show you how to do that,
because this means that this application
is only really going to work
when you have access to the web.
So perhaps you want to include some inventory
that is not dependent on a web connection
or you just want to include a file
that doesn't depend on a web connection
to keep everything within the application.
And so, other than that, we've got a bunch of components.
Again, I covered these in the other course
and so you don't really need to worry about these.
But the src and the public folder
are going to be where you can do most of the customization
of this application to make it whatever you want it to be.