Creating and setting up a MEAN

project
Module 2a
3.1-A brief look at Express, Node, and
npm
• In basic terms, an Express application is a
Node application that happens to use Express
as the framework
• npm is a package manager that gets installed
when you install Node, which enables you to
download Node modules or packages to
extend the functionality of your application
• package.json file
 3.1.1-Defining packages with
package.json
• package.json in root folder of the application
• Various metadata at the top of the file is
followed by the dependencies section
• In this default installation of an Express
project, quite a few dependencies are
required for Express to run
• Express itself is modular so that you can add
components or upgrade them individually
 3.1.2-Working with dependency
versions in package.json
• They are prefixed with either a tilde (~) or a caret (^)
• Take a look at the dependency definition for Express 4.16.3, which
specifies a particular version at three levels: Major version (4) ,
Minor version (16) & Patch version (3)
• Prefixing the whole version number with a ~ is like replacing the
patch version with a wildcard, which means that the application
will use the latest patch version available
• Prefixing the version with a caret (^) is like replacing the minor
version with a wildcard
• This has become best practice, because patches and minor
versions should contain only fixes that won’t have any effect on
the application
• But new major versions are released when a breaking change is
made, so you want to avoid automatically using later versions of
these in case the breaking change affects your application
• It’s good practice to always specify the full version and not use
wildcards for this reason: you always have a reference for a
specific version that you know works.
 3.1.3 Installing Node dependencies
with npm
• npm install
• ADDING MORE PACKAGES TO AN EXISTING PROJECT
• Using npm, it’s easy to add more packages to the
application whenever you want
• Find the name of the package you want to install,
open a command prompt in the same folder as the
package.json file, and then run a simple command like
this:
• $ npm install --save package-name
• With this command, npm downloads and installs the
new package in the node_modules folder
• The --save flag tells npm to add this package to the list
of dependencies in the package.json file
• As of npm version 5, the --save flag is no longer
required, as NPM saves changes to the package.json
file automatically.
• UPDATING PACKAGES TO LATER VERSIONS
• The only time npm downloads and reinstalls existing
packages is when you upgrade to a new version
• When you run npm install, npm goes through all the
dependencies and checks the following:
– The version defined in the package-lock.json file or
package.json
– The latest matching version on npm
– The version of the module in the node_modules folder
• If your installed version is different from the definition
in the package.json (or packagelock.json) file, npm
downloads and installs the defined version
• Similarly, if you’re using a wildcard, and a later
matching version is available, npm downloads and
installs it in place of the previous version
 3.2-Creating an Express project
• Starting point for building a MEAN application is
creating a new Express project
• To create an Express project, you’ll need to have
five key things installed on your development
machine:
– Node and npm
– The Express generator installed globally
– Git
– Heroku
– Suitable command-line interface (CLI) or terminal
• 3.2.1-Installing the pieces
• 3.2.2-Verifying the installations: node
--version; npm –version; express --version
• 3.2.3-Creating a project folder
• 3.2.4-Configuring an Express installation:
• $ express This command installs the
framework with default settings in your
current folder. This step probably is a good
start, but take a look at some configuration
options first.
CONFIGURATION OPTIONS WHEN CREATING AN
EXPRESS PROJECT
• What can you configure when creating an
Express project this way?
• You can specify the following:
– Which HTML template engine to use
– Which CSS preprocessor to use
– Whether to create a .gitignore file
• If you want to create a project that uses the
Less CSS preprocessor and the Handlebars
template engine and includes a .gitignore file:
$ express --css=less --view=hbs –git
DIFFERENT TEMPLATE ENGINES
• The basic workflow of a template engine is
creating the HTML template, including
placeholders for data, and then passing it some
data
• Then the engine compiles the template and data
together to create the final HTML markup that the
browser will receive
A QUICK LOOK AT PUG
• It doesn’t contain HTML tags in the templates.
• Instead, Pug takes a rather minimalist approach,
using tag names, indentation, and a CSS-inspired
reference method to define the structure of the
HTML
• If the tag name is omitted from the template, Pug
assumes that you want a <div>
• A .gitignore file is a simple configuration file
that sits in the root of your project folder and
specifies which files and folders Git commands
should ignore
3.2.5-Creating an Express project and trying it
out
HOW EXPRESS HANDLES THE REQUESTS
• The page contains a small amount of HTML, of which some
of the text content is pushed as data by the Express route
• There’s also a CSS file
• The logs in terminal should confirm that this is what Express
requested and has returned to the browser.
• All requests to the Express server run through the
middleware defined in the app.js file
• As well as doing other things, a default piece of middleware
looks for paths to static files
• When the middleware matches the path against a file,
Express returns this asynchronously, ensuring that the
Node.js process isn’t tied up with this operation and
therefore blocking other operations
• When a request runs through all the middleware, Express
attempts to match the path of the request against a defined
route
 3.2.6-Restarting the application
• A Node application compiles before running, so if you make
changes to the application code while it’s running, they won’t
be picked up until the Node process is stopped and restarted
• Note that this is true only for application code;
• Jade templates, CSS files, and client-side JavaScript can all be
updated on the fly
• Restarting the Node process is a two-step procedure
• First, you have to stop the running process in terminal by
pressing Ctrl-C. Then, you have to start the process again in
terminal, using the same command as before:
DEBUG=pjctname:* npm start
• This process doesn’t sound problematic, but if frustrating,
then there’s a better way
• Some services have been developed to monitor application
code and restart the process when they detect changes
-nodemon.
• nodemon wraps the Node application and,
other than monitoring for changes, causes no
interference
• To use nodemon, install it globally,
• $ npm install -g nodemon
 3.3-Modifying Express for MVC
• MVC architecture separates the data (model), the
display (view) and the application logic
(controller)
• This separation aims to remove any tight coupling
between the components, theoretically making
code more maintainable and reusable
• These components fit nicely into rapid prototype
development approach and allow to concentrate
on one aspect at a time as we discuss each part of
the MEAN stack
 3.3.1-A bird’s-eye view of MVC
• MVC architecture works like
1 A request comes into the application
2 The request gets routed to a controller
3 The controller, if necessary, makes a request to the model
4 The model responds to the controller
5 The controller merges the view and the data to form a
response
6 The controller sends the generated response to the original
requester
• In reality, depending on your setup, the controller
may compile the view before sending the
response to the visitor.
3.3.2-Changing the folder structure
• If you look inside the newly created Express project
folder, you should see a file structure including a views
folder and even a routes folder, but no mention of
models or controllers
• Rather than cluttering the root level of the application
with some new folders, keep things tidy by creating
one new folder for all your MVC architecture
• Follow these three quick steps:
• 1 Create a new folder called app_server
• 2 In app_server, create two new folders called models
and controllers
• 3 Move the views and routes folders from the root of
the application into the app_server folder
 3.3.3-Using the views and routes
relocated folders
• Tell Express that you’ve moved
• USING THE NEW VIEWS FOLDER LOCATION
Express will be looking for /views, but it needs to
look for /app_server/views.
• In app.js, find the following line:
• app.set('views', path.join(__dirname, 'views'));
Change it to the following (modifications in bold):
app.set('views', path.join(__dirname,
'app_server', 'views'));
• Your application still won’t work, because you’ve
moved the routes, so tell Express about them too
3.3.4-Splitting controllers from routes
• UNDERSTANDING ROUTE DEFINITION

• Inside index.js in app_server/routes, you should

see the following code snippet:
• The router checks internally for GET requests that
map to the homepage URL path, which is '/‘
• The anonymous function that runs the code is the
controller
• So 1 & 2 are the pieces you want to separate here.
Result
 MOVING THE CONTROLLER OUT OF
THE ROUTES FILE
• The first thing you need to do is create a file to
hold the controller code
• Create a new file called main.js in
app_server/controllers
• In this file, create and export a method called
index, and use it to house the res.render code
• The next step is to require this controller
module in the routes file so that you can use
the exposed method in the route definition
• The next step is to require this controller
module in the routes file so that you can use
the exposed method in the route definition
• This code links the route to the new controller
by “requiring” the controller file 1 and
referencing the controller function in the
second parameter of the router.get function 2
• app.js requires routes/index.js, which in turn
requires controllers/main.js
 3.4-Importing Bootstrap for quick,
responsive layouts
• Downloading Bootstrap from site, extract the
contents and use css/js files
• Using Bootstrap in the application-In layout.pug,
you need to accomplish four things:
– Reference the Bootstrap and Font Awesome CSS files
– Reference the Bootstrap JavaScript file
– Reference jQuery and Popper.js, which Bootstrap
requires
– Add viewport metadata so that the page scales nicely
on mobile devices
Building a static site with Node
and Express
Module 2b
4.1-Defining the routes in Express
• Have a collection of Locations pages and a
page in the Others collection
• Screens need to relate to incoming URLs
• It’s a good idea to map out the links between
screens and URLs and to get a good standard
in place which form the basis of the routing
for your application
 4.1.1-Different controller files for
different collections
• Application will grow, and you don’t want to have
all the controllers in one file
• A logical starting point for splitting them up is
dividing them by collections
• We decided to split the controllers into Locations
and Others
• Here, the application includes the routes file,
which in turn includes multiple controller files,
each named according to the relevant collection.
 REQUIRING THE CONTROLLER
FILES
• Want to reference two controller files in this
routes file called locations.js and others.js
• They will be saved in app_ server/controllers.
• In index.js you’ll require both of these files
and assign each to a relevant variable name
 SETTING UP THE ROUTES
• In index.js, you need to have the routes for the
three screens in the Locations collection and the
About page in the Others collection
• Each route will also need a reference to a
controller
• Remember that routes serve as a mapping
service, taking the URL of an incoming request
and mapping it to a specific piece of application
functionality
• routes/index.js file
 4.2-Building basic controllers
• Setting up controllers
• You currently have one file: the main.js file in the
controllers folder which has a single function of
controlling the homepage
• You don’t want a “main” controller file anymore,
but you can use this one as a template
• Rename this file others.js
• ADDING THE OTHERS CONTROLLERS-change title
to about.
 ADDING THE LOCATIONS
CONTROLLERS
• In the routes file, you specified the name of
the controller file to look for and the name of
the three controller functions
• In the controllers folder, create a file called
locations.js, and create and export three basic
controller functions: homelist, locationInfo,
and addReview
 4.3-Adding the rest of the views
• Look for the locationInfo controller in the
locations.js file in app_server/controllers
• Change the name of the view to location-info
• update the controller to reference a new view.
In app_ server/controllers/locations.js, change
the addReview controller to use the new view
location-review-form