The Way To Create A Internet Site The Usage Of Node.js And Express

Updated: 08/31/2020 by means of Computer Hope

This example creates a website the use of Node.js to provide logical internet site behavior. Using the Express.js framework, the internet site is implemented as an internet software, with logical routing to other sections of the website.

The HTML and CSS is primarily based on our responsive web site design the usage of CSS Grid and Flexbox. The HTML is refactored as a template, so format code may be reused whilst including new pages.

Install Node

Node.js, additionally known as Node, is a runtime environment for writing server-facet applications in JavaScript.

Note

If Node is already installed for your laptop, you can skip this section and continue to make a new Express app.

Download the Node installer from the authentic Node.js downloads website. Choose the LTS (long time guide) model to your working device.

Windows and macOS

Open and run the Node installer (.msi on Windows, .pkg on macOS).

On Windows, at the set up display screen labeled Tools for Native Modules, check the box Automatically set up the essential gear.

Linux

On Linux systems, you may install Node using your package deal supervisor, set up the compiled binaries manually, or construct Node from source. For designated information, discuss with the legitimate Node.js set up wiki.

All working structures

When set up is whole, open a terminal or command set off window. Run the subsequent command to update npm, the Node package deal supervisor. The -g (international) transfer specifies that the software is established machine-wide, now not simplest the cutting-edge Node app.

Windows

npm deploy -g npm

Linux and macOS

sudo npm install -g npm

Finally, use npm to globally install the express-generator software.

Windows

npm deploy -g explicit-generator

Linux and macOS

sudo npm set up -g express-generator

Make a brand new Express app

In a terminal or command activate window, generate a new Express.js app. In our example, the app name is myapp, and the view engine is specified as pug.

express myapp --view="pug"

Change listing to the new Express app.

cd myapp

In the Express app directory, use npm install to down load and installation the desired dependencies, as listed in the package deal.json report.

npm install

If any safety updates are to be had for the installed dependencies, a notification is displayed.

discovered 1 low severity vulnerability
run `npm audit repair` to fix them, or `npm audit` for details

If so, observe the safety updates.

npm audit restoration

Install nodemon

In the Express app directory, install nodemon. The alternative –shop-dev shows that nodemon is a improvement dependency. It is not used within the utility itself, however is a tool used at some point of improvement.

npm install --store-dev nodemon

Add a development startup script

A development startup script affords a way to start your web application with options that assist you broaden the app, which includes verbose mistakes messages.

In a text editor, open the record package.json in the app directory. This JSON file specifies the dependencies utilized by your Node app. Additionally, it includes named startup scripts that begin the application in exclusive approaches.

In package.json, locate the “scripts” access. By default, it consists of handiest one script (“begin”).

"scripts": 
"start": "node ./bin/www"
,

Add a brand new line that defines a script devstart as follows.

Linux and macOS

"scripts": 
"start": "node ./bin/www",
"devstart": "DEBUG=myapp:* nodemon ./bin/www"
,

Windows

"scripts": 
"begin": "node ./bin/www",
"devstart": "SET DEBUG=myapp:* & nodemon ./bin/www"
,

These scripts (“start” and “devstart”) can be accomplished by running the command npm run scriptname.

The command npm run devstart starts offevolved the app with two extra development capabilities enabled.

  • The DEBUG environment variable is set, specifying that the console log and mistakes pages, consisting of HTTP 404, show additional data, like a stack hint.
  • In addition, nodemon monitors certain critical website documents. If you adjust those files, such as remodeling a page or modifying static content, nodemon automatically restarts the server to mirror the adjustments.

Start the web server in improvement mode.

npm run devstart

Tip

If the Windows Firewall blocks the internet server software, click Allow Access.

Preview the web app

When the utility is running, your computer acts as a web server, serving HTTP on port 3000.

To preview the internet site, open a web browser to the cope with localhost:3000.

Any device related for your nearby network can view the software at address ipaddress:3000, in which ipaddress is the neighborhood IP deal with of the pc going for walks the app.

To preview the internet site on a cellular device, join its Wi-Fi in your nearby community, and open the cope with in a browser.

HTML templates

Our instance makes use of the CSS, JavaScript, and HTML from the a way to create a responsive website the usage of CSS Grid and Flexbox. The CSS and JavaScript are used verbatim. The HTML is refactored to a templating language.

Using a templating language, the layout code is written most effective as soon as, and inherited by way of different pages.

The software that converts a template to its very last layout is called a template processor. In the context of HTML, a template processor is referred to as a view engine.

Express.js helps numerous view engines, consisting of Pug.

Overview of Pug

The Pug language describes HTML documents, in a manner that gives advantages and further functions. Pug files are rendered to HTML while the user requests them.

Pug’s language syntax gets rid of the need for tags to be closed, or enclosed in brackets. It additionally helps inherited templates, new release, conditionals, and JavaScript evaluation.

Example HTML to Pug conversion

These are the first few lines of the HTML from the the way to create a responsive internet site the usage of CSS Grid and Flexbox.

<!DOCTYPE html>

<html lang="en"> <head> <meta name="viewport" content="width=device-width, preliminary-scale=1"> <meta charset="utf-8"> <name>Title</title> <link rel="stylesheet" href="index.css"> <script src="index.js"></script> </head> <body> <div id="menu"> <segment identification="menuitems"> <div class="menubutton"> <h1 onclick="menuToggle('disguise')" magnificence="menubutton">&#9776;</h1>

In Pug, the equal HTML may be written like this.

doctype html

html head meta(call="viewport" content material="width=tool-width, preliminary-scale=1") meta(charset="utf-8") name Title hyperlink(rel="stylesheet", href="index.css") script(src="index.js") frame #menu segment#menuitems .menubutton h1.menubutton(onclick="menuToggle('conceal')") &#9776;

Element tags are written without brackets. Child elements are indented. The degree of indentation determines the scope of an detail, so final tags are not important.

The “identity” and “magnificence” CSS selectors can be written as element#identity, element.magnificence, element#id.magnificence, and so forth. If no element is certain, the element is assumed to be a div. For instance, <div magnificence=”foo”> in HTML may be written as .foo in Pug.

After the element name and its selectors, attributes can be laid out in parentheses, as a comma-delimited listing. For instance:

HTML

<div elegance="button" onmouseover="glow()" onclick="begin()">

Pug

.button(onmouseover="glow()", onclick="begin()")

Listing more than one factors in one line

If the element is followed by a colon (:), it can be followed by a child element on the same line. The following sections of Pug produce the same HTML output.

a(href="/domestic")
p Home

a(href="/domestic"): p Home

Both of the above are rendered to the following HTML.

<a href="/domestic"><p>Home</p></a>

Evaluating JavaScript

If the detail is observed with the aid of an equals signal (=), everything that follows on that line is interpreted as buffered code. The code is evaluated as JavaScript, and the output is “buffered” (covered as the detail’s content material). In its handiest shape, buffered code can be the call of a variable, handed by the utility.

For instance, the app router for the home page, index.js, passes the variable identify with the cost “Our Farm Stand” to the technique specific.Router(), which passes it to Pug. When Pug renders format.pug, the subsequent line:

identify= pagetitle

…is interpreted as:

title Our Farm Stand

…that is rendered as the subsequent HTML:

<title>Our Farm Stand</title>

Template inheritance

Pug files can inherit different Pug documents the usage of the key phrases extends and block.

For example, you may create a fundamental internet site layout, layout.pug, with shared factors of the web page.

doctype html

html head title Page Title body p Content block foo

The block foo announcement says “insert a block of content here, named foo, laid out in some other Pug record that inherits this template.”

Documents that inherit format.pug need to start with the statement extends format, and contain a block foo assertion on the top indentation level (at the beginning of a new line). The kids of this “block foo” declaration are inserted within the template at the vicinity of the corresponding block.

A Pug record can inherit layout.pug like the following.

extends format

block foo p This is the house page.

When the report is rendered, the Pug engine hundreds the report layout.pug. The line block foo in layout.pug is changed with p This is the house page.

Overview of the default Express app

The default shape of the Express app is listed here, with descriptions of each document and directory.

myapp/(Contains the entire Express app)

&boxvr;&boxh; app.jsThe center logic of the Express app.

&boxvr;&boxh; bin/(Contains the app's executable scripts)

&boxv;&boxur;&boxh; wwwA wrapper that runs app.js.

&boxvr;&boxh; node_modules/(Contains dependencies mounted by way of npm)

&boxvr;&boxh; bundle-lock.jsonJSON take place of hooked up dependencies.

&boxvr;&boxh; package deal.jsonJSON of dependencies and config specific on your app.

&boxvr;&boxh; public/(Files downloaded through the consumer's net browser)

&boxv;&boxvr;&boxh; pics/(Contains customer-available photo files)

&boxv;&boxvr;&boxh; javascripts/(Contains client-handy JavaScript documents)

&boxv;&boxur;&boxh; stylesheets/(Contains client-available CSS)

&boxv;&boxur;&boxh; fashion.cssThe web site's CSS stylesheet.

&boxvr;&boxh; routes/(Contains common sense for man or woman website routes)

&boxv;&boxvr;&boxh; index.jsLogic of the "index" direction (/).

&boxv;&boxur;&boxh; users.jsLogic of the "users" route (/users).

&boxur;&boxh; views/(Contains HTML templates) &boxvr;&boxh; errors.pugView displayed for errors pages, inclusive of HTML 404. &boxvr;&boxh; index.pugView displayed for the website root (/). &boxur;&boxh; layout.pugView template of format shared with the aid of all pages.

Core functionality of the internet site is described in app.js. Routes are named and targeted in this document.

A path is a web page or segment of the website with a unique route in the URL, such as www.example.com/search, www.example.com/login, and many others. These routes are named, and associated with direction good judgment scripts, in app.js.

Route good judgment scripts are saved inside the routes folder. When a user requests a course, its course common sense script strategies the HTTP request information and sends a reaction.

The perspectives folder carries the HTML templates, referred to as perspectives, which are processed by way of the view engine (Pug).

Implementation: JavaScript, CSS, and Pug

The following code implements the Express net app.

App report structure

myapp/

&boxvr;&boxh; app.jsApp middle good judgment

&boxvr;&boxh; bin/

&boxv;&boxur;&boxh; www

&boxvr;&boxh; node_modules/

&boxvr;&boxh; package-lock.json

&boxvr;&boxh; package deal.json

&boxvr;&boxh; public/

&boxv;&boxvr;&boxh; pictures/

&boxv;&boxvr;&boxh; javascripts/

&boxv;&boxv;&boxur;&boxh; menu.jsImplements menu toggle

&boxv;&boxur;&boxh; stylesheets/

&boxv;&boxur;&boxh; style.cssStylesheet

&boxvr;&boxh; routes/

&boxv;&boxvr;&boxh; approximately.jsLogic for route /approximately

&boxv;&boxvr;&boxh; recommendation.jsLogic for course /recommendation

&boxv;&boxvr;&boxh; contact.jsLogic for path /touch

&boxv;&boxvr;&boxh; index.jsLogic for route /

&boxv;&boxvr;&boxh; recipes.jsLogic for path /recipes

&boxv;&boxvr;&boxh; pointers.jsLogic for route /guidelines

&boxv;&boxur;&boxh; customers.jsNot used, can be deleted

&boxur;&boxh; views/ &boxvr;&boxh; approximately.pugView for direction /about &boxvr;&boxh; advice.pugView for route /recommendation &boxvr;&boxh; touch.pugView for route /contact &boxvr;&boxh; mistakes.pug &boxvr;&boxh; index.pugView for path / &boxvr;&boxh; format.pugView template shared via all pages &boxvr;&boxh; recipes.pugView for route /recipes &boxur;&boxh; suggestions.pugView for course /hints

blue = changed, inexperienced = new, red = not used

myapp/app.js

The core app common sense is basically similar to the default Express app, with additional routes defined. The “users” path is eliminated.

// middle dependencies

var createError = require('http-errors');

var express = require('explicit');

var route = require('path');

var cookieParser = require('cookie-parser');

var logger = require('morgan');

// create direction objectsvar indexRouter = require('./routes/index');var aboutRouter = require('./routes/about');var contactRouter = require('./routes/touch');var tipsRouter = require('./routes/recommendations');var recipesRouter = require('./routes/recipes');var adviceRouter = require('./routes/recommendation');

// the app item

var app = specific();

// view engine setup

app.set('perspectives', course.be a part of(__dirname, 'views'));

app.set('view engine', 'pug');

// app config

app.use(logger('dev'));

app.use(specific.json());

app.use(specific.urlencoded( prolonged: false ));

app.use(cookieParser());

app.use(express.static(route.be part of(__dirname, 'public')));

// tell the app to apply those routesapp.use('/', indexRouter);app.use('/approximately', aboutRouter);app.use('/contact', contactRouter);app.use('/pointers', tipsRouter);app.use('/recipes', recipesRouter);app.use('/recommendation', adviceRouter);

// trap 404 and ahead to errors handler

app.use(function(req, res, next) subsequent(createError(404));

);

// error handler

app.use(feature(err, req, res, subsequent) // set locals, best imparting mistakes in development res.locals.message = err.message; res.locals.mistakes = req.app.get('env') === 'development' ? err : ; // render the error web page res.fame(err.reputation mistakes');

);

// expose this app to scripts that require it, i.e. myapp/bin/www

module.exports = app;

myapp/routes/layout.pug

The format.pug record consists of the core format of the page, that is shared by each page at the web page. It consists of the whole lot required to show a page, except for the mainbody content (block mainbody).

doctype html

html head identify= pagetitle meta(charset="utf-8") meta(name="viewport" content material="width=tool-width, initial-scale=1") script(src="/javascripts/menu.js") hyperlink(rel="stylesheet", href="/stylesheets/fashion.css") body #menu section#menuitems .menubutton h1.menubutton(onclick="menuToggle('hide')") &#9776; a(href="/") h3.menuhead Our Farm Stand a(href="/pointers") h3.sectrule Tips for dwelling well a(href="/recipes") h3 Recipes a(href="/advice") h3 Homesteading recommendation a(href="/approximately") h3.sectrule About Us a(href="/contact") h3 Contact Us #container #header a(href="/") h1.emblem Our Farm Stand .headspace h1.menubutton(onclick="menuToggle('display')") &#9776; h1.placeholder &#9776; h2.navitem a(href="/approximately") .clickable-area About Us h2.navitem a(href="/contact") .clickable-place Contact Us #panel.left section#sections .sectionlink a(href="/suggestions") .clickable-place Tips for living well .sectionlink a(href="/recipes") .clickable-area Recipes .sectionlink a(href="/advice") .clickable-place Homesteading advice block mainbody #panel.right h3 Our friends segment#companions.tall .partnerlink a(href="/") .clickable-region Green Valley Greens .partnerlink a(href="/") .clickable-vicinity Turkey Hill Farm .partnerlink a(href="/") .clickable-location Burt's Maple Syrup .partnerlink a(href="/") .clickable-vicinity Only Organic Seeds #footer p Copyright &copy; 2020 Alice &amp; Bob's Farm Stand

myapp/views/index.pug

The index.pug report extends layout.pug, and contains mainbody content material for the course /.

extends format

block mainbody #mainbody phase.mainbodyitems h3 Announcements phase.bulletins .announceitem h4.title Open for enterprise p.date Jan. 15 p Renovations of our new storefront are entire, and we are open for enterprise. h3 Items for sale phase.forsaleitems table tr th Item th Description th Price th.qty Qty tr td Milk td Good supply of calcium. td.price $2 span.perunit/ half gal. td.qty three tr td Eggs td Great for breakfast and baking. td.fee $4 span.perunit/ doz. td.qty 6 tr td Whole chook td Perfect for roasting. td.price $5 span.perunit/ lb. td.qty four h3 Upcoming events section .eventitem h4.title Cider Fest p.date October 20, 2pm&ndash;6pm p Celebrate the season with fresh-pressed cider from our orchards. .eventitem h4.title Bread baking workshop p.date December 13, 9am&ndash;noon p Learn how to create and cultivate a sourdough starter. h3 Message of the day section .motditem p Eat better food. Support your nearby farm stand. h3#companions.huge Our buddies phase#companions.huge .partnerlink.extensive a(href="") .clickable-place Green Valley Greens .partnerlink.wide a(href="") .clickable-vicinity Turkey Hill Farm .partnerlink.wide a(href="/") .clickable-area Burt's Maple Syrup .partnerlink.extensive a(href="") .clickable-vicinity Only Organic Seeds .bodyspace

myapp/routes/index.js

The file index.js carries logic for the course /.

var specific = require('express');

var router = express.Router();

router.get('/', characteristic(req, res, subsequent) res.render('index', pagetitle: 'Our Farm Stand' );

);

module.exports = router;

The report menu.js consists of the JavaScript from the Grid and Flexbox instance. It implements the menu toggle function.

function menuToggle(country) 
var ele = file.getElementById('menu');
switch(kingdom) 
case 'display':
ele.fashion.opacity=1;
ele.fashion.coloration='rgb(ninety six, ninety six, 96)';
ele.fashion.visibility='seen';
ele.fashion.transition='visibility 0s, opacity zero.3s';
ruin;
case 'disguise':
ele.style.opacity=zero;
ele.style.color='black';
ele.fashion.visibility='hidden';
ele.fashion.transition='visibility 0.3s, opacity zero.3s'; 
ruin;


myapp/public/stylesheets/fashion.css

The file fashion.css consists of the CSS from the Grid and Flexbox example.

/* detail patterns */

* margin: zero;/* by using default, all elements (selector *) have no margin */

html width: one hundred%;/* one hundred% width of determine (root) detail */ top: 100vh;/* one hundred% peak of viewport */ history: rgb(0, zero, zero, zero.1);/* 10% black */ font-length: 1.0em;/* our root font length */ font-circle of relatives: Arial, Helvetica, sans-serif;/* default font */

frame min-peak: a hundred%;

section padding: zero.5rem; flex-grow: 1;/* in a flexbox, sections extend along flex axis */

h1 /* Website name in header */ font-length: 2.0rem; font-weight: normal;

h2 /* About, Contact */ font-length: 1.25rem;

h3 /* Section headings */ font-length: 1.2rem; padding: 0.5rem;

h4 /* Section object name */ font-weight: everyday; padding: zero.5rem;

p /* Section item body */ padding: zero.5rem;

a:hyperlink, a:visited /* anchor hyperlinks, and visited anchor links */ color: black; text-ornament: none;/* disable underline */

a:hover /* whilst anchor hyperlink is hovered */ coloration: rgb(25, 25, 25);

a:energetic /* while anchor hyperlink is clicked */ color: rgb(96, ninety six, ninety six);

/* element styles */

#field display: grid; top: 100vh; grid-template-columns: [left] 10rem vehicle 10rem [right]; grid-template-rows: [top] 5rem auto 5rem [backside];/* header peak suits its content material */ grid-template-areas: "head head head" "panleft mainbody panright" "foot foot foot";

#header grid-region: head;/* corresponds to call in template */ historical past: rgb(zero, 0, zero, zero.2);/* 20% black */ display: flex; flex-direction: row; justify-content material: area-between; align-objects: baseline;/* web page call and nav object text aligns baseline */ padding: 1.0rem;

#panel /* for detail identification="panel" */ display: flex;/* this detail is a flexbox figure */ flex-path: column;/* its infant elements flex vertically */ padding: 0.5rem; history: rgb(zero, 0, zero, zero.1);/* 10% black */

#panel.left /* for element id="panel" and class="left" */ grid-location: panleft;/* this detail fills a grid location */

#panel.proper grid-place: panright;

#footer grid-location: foot; display: flex;/* this detail is a flexbox parent */ flex-path: column;/* its child factors flex vertically */ justify-content material: middle;/* horizontal middle footer content material */ align-objects: middle;/* vertical middle footer content material */ padding: 0.5rem; heritage: rgb(zero, zero, 0, zero.2);

#mainbody /* for detail id="mainbody" */ display: flex;/* this detail is a flexbox figure */ flex-path: column;/* its toddler elements flex vertically */ grid-area: mainbody; justify-self: center;/* constant-width mainbody continually focused */ width: a hundred%; min-width: 22.5rem;/* mainbody width can not pass < 22.5rem */

div#panel,

div#mainbody /* extra space under header */ padding-top: zero.5rem;

#companions, #sections /* for detail id="companions" or identification="sections" */ display: flex;/* this element is a flexbox parent */ flex-course: row;/* its infant elements flex horizontally */ flex-wrap: wrap;/* its infant elements can wrap to subsequent line */ align-content: flex-start;/* baby elements start in top left */

#companions.wide /* for detail identity="companions" and sophistication="wide" */ show: none;/* by means of default, do not display this element */

#menu function: absolute;/* menu role unaffected with the aid of different elements */ proper: 0;/* 0 pixels from the proper boundary */ heritage: rgb(239, 239, 239); border: 0.15rem solid rgb(zero, zero, zero, zero.four); visibility: hidden;/* visibility property helps transitions */ opacity: 0;/* opacity + visibility transition = menu fade impact */ z-index: 1;/* ensure menu seems over all other content */

#menuitems /* menu is implemented as a flexbox container */ show: flex; flex-path: column; padding: 1rem;

#menuitems h3 border-pinnacle: zero.15rem solid rgb(0, 0, zero, 0.1);/* light horizontal rule */

#menuitems .sectrule border-shade: rgb(0, 0, zero, zero.25);/* darker horizontal rule */

#menuitems .menuhead border-top: none;

#menuitems h3:hover historical past-coloration: rgb(zero, 0, zero, zero.1);/* grey of rollover menuitems */

.menubutton text-align: right; cursor: pointer;/* indicates it may be clicked like a hyperlink */ person-pick: none;/* consumer can't select the button as text */

#menuitems .alignright text-align: proper;/* proper-aligned menu object textual content (unused) */

#header h1.menubutton display: none;/* in default view (landscape), cover menu button */ border: zero.15rem stable rgb(zero, 0, 0, zero);/* (invisible) alignment shim */

#header .placeholder /* this invisible button is rendered whilst menu */ color: rgb(0, zero, zero, zero); /* button is hidden, so header top matches. */ consumer-pick out: none;/* person can't pick out text of invisible button */

.sectionlink, .partnerlink border-radius: zero.25rem;/* provide this element a moderate rounded part */ font-weight: everyday; font-size: 1.1rem; padding: 0.5rem; width: 7rem;/* fixed width for these items */ margin-bottom: 1rem;/* moderate margin for readability */ heritage: rgb(zero, 0, zero, 0.1);

.sectionlink:hover, .partnerlink:hover history-color: rgb(0, 0, 0, 0.0.5);/* brighten bg on mouse hover */

.partnerlink top: 7rem;/* partner factors are additionally fixed height */

.partnerlink.wide margin: zero.5rem 1rem 0.5rem zero;/* margins for spacing if they wrap */

.clickable-vicinity /* use on every occasion a clickable location excludes margins */ top: 100%;/* clickable place spans height of parent */

.eventitem, .announceitem, .motditem margin-backside: 0.5rem;/* mild margin for readability */

.identify /* e.g., "Open for enterprise" */ font-fashion: italic; font-weight: everyday; font-length: 1.1rem;

.date, .factor /* e.g., January 1, 2021 */ font-fashion: italic; font-size: zero.9rem; padding: zero zero 0.01rem zero.5rem; colour: rgb(zero, zero, zero, zero.five);

.navitem /* About, Contact */ font-weight: everyday; padding: 0 0.5rem zero 1rem;

.headspace, .panspace, .footspace, .bodyspace flex-develop: 1;/* those elements expand on flex axis to fill area */

/* table patterns ("items on the market") */

desk border-collapse: fall apart;/* pixel-adjoining desk cells */ width: 100%; margin-backside: 1rem;

th textual content-align: left;

tr margin: 4rem 0 zero zero; border-backside: zero.15rem solid rgb(zero, 0, 0, 0.2);/* horizontal rule */

td, th padding: zero.5rem; vertical-align: top;

td.charge white-space: nowrap;/* white space in rate does not wrap line */

td.qty, th.qty textual content-align: center;

span.perunit opacity: zero.5;

/* responsive styles carried out in portrait mode */

@media display screen and (max-width: 45rem) /* if viewport width < 45rem */ #panel.left grid-column-cease: left;/* panel grid vicinity shrinks to not anything */ #panel.right grid-column-start: proper;/* panel grid vicinity shrinks to nothing */ #companions.tall show: none;/* conceal companions in panel (overwrites display: flex) */ #companions.extensive show: flex;/* show companions in frame (overwrites show: none) */ #panel,/* those disappear from layout */ #header .placeholder, .navitem show: none; #mainbody grid-column-start: left;/* mainbody now begins at left edge */ grid-column-give up: proper;/* mainbody now ends at right edge */ #header h1.menubutton /* show the header menu button */ display: inline;/* overwrites show: none */

Secondary routes

The following files incorporate the common sense for secondary routes — About, Advice, Contact, etc.

myapp/routes/about.js

var specific = require('express');

var router = explicit.Router();

router.get('/', characteristic(req, res, next) res.render('about', pagetitle: 'About Us' );

);

module.exports = router;

myapp/routes/advice.js

var explicit = require('express');

var router = explicit.Router();

router.get('/', characteristic(req, res, next) res.render('advice', pagetitle: 'Homesteading Advice' );

);

module.exports = router;

myapp/routes/contact.js

var specific = require('specific');

var router = express.Router();

router.get('/', function(req, res, next) res.render('contact', pagetitle: 'Contact Us' );

);

module.exports = router;

myapp/routes/recipes.js

var explicit = require('express');

var router = explicit.Router();

router.get('/', feature(req, res, next) res.render('recipes', pagetitle: 'Recipes' );

);

module.exports = router;

myapp/routes/tips.js

var explicit = require('express');

var router = specific.Router();

router.get('/', function(req, res, next) res.render('suggestions', pagetitle: 'Tips For Living Well' );

);

module.exports = router;

Secondary perspectives

The following perspectives inherit layout.pug.

myapp/perspectives/about.pug

extends layout

block mainbody #mainbody section#mainbodyitems p Alice &amp; Bob were operating their farm stand when you consider that 1992.

myapp/views/recommendation.pug

extends format

block mainbody #mainbody section#mainbodyitems h3 Homesteading Advice p Never, ever stand in the back of a heifer.

myapp/perspectives/touch.pug

extends format

block mainbody #mainbody phase#mainbodyitems h3 Alice &amp; Bob p 1344 Chattanooga Way p Homestead, VT 05401 p (802) 555-5555

myapp/perspectives/recipes.pug

extends format

block mainbody #mainbody section#mainbodyitems h3 Alice's Recipes p b No-knead subsequent-day dutch oven bread p.ingredient 1/4 tsp energetic dry yeast p.element three cups all-reason flour p.element 1 half of tsp salt p.factor Cornmeal or wheat bran for dusting p In a massive bowl, dissolve yeast in water. p Add the flour and salt, stirring till mixed. p Cover bowl. Let rest as a minimum 8 hours, ideally 12 to 18, at warm room temperature, approximately 70 levels. p When the surface of the dough is dotted with bubbles, it is ready to be folded. Lightly flour a piece surface. Sprinkle flour at the dough and fold it over on itself a few times. Cover loosely and let it rest about 15 minutes. p Using just sufficient flour to keep the dough from sticking, gently form it into a ball. Generously coat a clean dish towel with flour, wheat bran, or cornmeal. Put the seam aspect of the dough at the towel. Cover with another towel and permit upward push for 1 to 2 hours. p Heat oven to 475&deg;. Cover and bake for 30 minutes.

myapp/perspectives/recommendations.pug

extends format

block mainbody #mainbody phase#mainbodyitems h3 Alice's Tips p Always upward thrust earlier than the sun. p Never use fake maple syrup. p If the endure is black, be loud, assault. p If the undergo is brown, play useless, lie down.

Appearance

In portrait mode, secondary routes are accessed inside the menu.

In landscape mode, they’re accessible from the header and left panel.

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *