- [Instructor] Express Application Generator
is a package that allows you to quickly
and easily get a skeleton project
with Express up and running.
Speaking from my own experiences with various projects,
sometimes the most difficult part about getting started
is setting up a project.
This takes any of the guesswork out of the equation.
Let's head to the official documentation and get started.
Express Application Generator provides several options
when setting up your project,
including whether or not you'd like to use
a specific template engine,
or the option to add a gitignore file.
Here, we can see that there are a variety of options
that are available by typing express -h.
When we get to the command line,
we will try this together as we set up our own project.
For this course,
we won't be using Express Application Generator
because I want to show you the essentials of Express.
However, I do want to briefly walk
through the installation of this package
and show you how to use it so that you'll be equipped
for future projects.
Let's go ahead and install Express Application Generator
and create an example project.
First, let's open the terminal in VS Code.
You can do this by clicking View in the main menu,
and then selecting terminal.
Next, we need to navigate to where
we'd like to set up our project.
I'm going to navigate to my desktop and set up there,
but you have free reign to place your project
wherever makes the most sense for you.
So first, I'll navigate to my desktop,
and you can use tab to auto-complete,
which I'll do quite a bit throughout this course.
All right, so now I'm on my desktop,
and I'm going to create a new folder or directory
that I'm going to call express.
So I'll do this by using the command,
make directory, or mkdir, and then express.
Then I'm going to navigate into that folder.
And this is where I'm going to create my project
using Express Application Generator.
So once you're in that folder,
we're going to run the command npm install express-generator.
All right, once installed,
I'm going to go ahead and clear
just so I get my terminal nice and clean for us.
And now we're going to run that express -h command
that we talked about a little bit earlier.
And this shows us all the different options
that we can use when we're creating our project
using Express Application Generator.
And you may find that using this out-of-the-box
is best for you, or if you want to customize your project,
that is totally fine as well.
You use whatever options work best for you.
There's really no right or wrong way to use this package.
For this example,
let's go ahead and generate a project
that we're going to call a test app.
and we want to generate it with a gitignore file
using the Handlebars template engine.
How do we translate this into the command line
to create our project?
So when looking at the different options that are available,
we can satisfy the requirements
that we have, which is again,
to use a gitignore file and to create a project
using the Handlebars template engine.
So the first thing we want to do is type express
in the command line.
This is going to indicate that we're using
that application generator,
and then everything that proceeds
is going to be any configurations that we add
for the project.
So the first thing we want to do is add a gitignore file,
and we can see that in order to do that,
we'll add --git.
Then the next thing that we needed to do
was add the Handlebars template engine.
So we see that in order to do that,
we can add --hbs.
The last thing that we want to do is add the name
of our project, which we're going to call test app.
All right, so one more time before we generate this,
we'll start with express,
and then we're going to add that gitignore file.
So we'll add --git.
We're going to use the Handlebars templating engine,
so add --hbs.
And then we're going to call our project testapp.
Once our project has been generated,
you'll see that you have all of those different commands
in the terminal.
You can see that in order to install dependencies,
you'll use npm install.
And then in order to run the app,
you have that command there,
which we'll come back to here shortly.
So let's take a look at the contents now of this folder,
and we'll do that by using the command ls.
And we can see that we have testapp,
and that it's been created in this folder.
So let's go ahead and navigate into testapp
by doing cd testapp.
Next, we're going to install our dependencies.
And as it is referenced above,
we can do that using npm install.
Now that our dependencies have been added,
let's open the project in VS Code.
You can do this a number of different ways,
but I'm going to go to the main menu,
and go to File and then Open.
And then I'm going to navigate into that testapp directory.
So here I know is on my desktop, and in express,
and then testapp.
All right, and click Open.
As you can see, we have quite a few folders ready to go.
I'm not going to go through all of them,
I just want to hit the highlights.
First, we have a node_modules folder
that was generated after our npm install.
Then we have a public folder.
This contains folders with images,
JavaScript files, style sheets.
Out-of-the-box, Express Application Generator
has a style.css sheet that has some basic CSS
that we'll see when we run the server.
Inside the routes folder,
we have index.js and user.js.
These have default routes set up for us
when we run the server.
The views folder houses our Handlebars files.
Template engines like Handlebars and Pug
may be new to you, and they're not required for this course.
So if you're not familiar with how to use them,
that's totally okay.
Basically, you can pass variables into the template engines
to generate a view.
We also see our gitignore file was generated for us,
as well as a package.json file.
Lastly, we have our app.js file,
and let's go ahead and open that up and see what that has.
So you can see, there's a lot
that has been configured here for us.
In this course, we're going to learn how to do
pretty much all of this from scratch.
So now that we've seen the project structure,
let's run this and see what we're working with.
Let's go ahead and head back
to the official documentation
for Express Application Generator.
In order to run our project,
we can see that there are a couple of different options
based on the operating system that you're using.
For this course, I'm using macOS.
So I'll run the following command,
DEBUG=testapp:* npm start.
Please note that in this documentation,
it has myapp because that's the name of the app
that was used in the example in the documentation.
But since we called ours testapp,
we'll replace myapp with testapp.
So find the command that corresponds
to your operating system, copy it,
and head back to your terminal.
All right, so here, our terminal was closed,
so I'm going to go ahead and reopen that using view
and then terminal.
I'm going to minimize this.
All right.
So I'm going to paste the command that I copied
from the Express Application Generator documentation.
And it's important again, that in their documentation,
they called their app myapp,
but we use testapp, so make sure you change that
in the command line.
So you should have DEBUG=testapp:* npm start.
In your terminal, if it's successfully started,
and it should, you should see testapp is listening
on port 3000.
Now we're going to head over to the browser
and we're going to open our localhost 3000,
and see our app running in action.
So back in our browser, we're going to open a new tab,
and we're going to do localhost 3000.
And voila, You should see Express and Welcome to Express.
And this is how you can get a project with Express up
and running fairly easily
with Express Application Generator.