2003-express-ejs-bootstrap-site-template :
overview :
- create a express project with ejs template.
- set index.html from bootstrap template site.
- modify site pages with bootstrap template using ejs template engine.
repository :
github.com
environment :
PS G:\workspace\nodejs> nvm list
* 13.8.0 (Currently using 64-bit executable)
12.14.1
8.17.0
PS G:\workspace\nodejs> node --version
v13.8.0
PS G:\workspace\nodejs> express --version
4.16.1
express-generator :
express --view ejs --git \ :
PS G:\workspace\nodejs> express --view ejs --git ejsboots
create : ejsboots\
create : ejsboots\public\
create : ejsboots\public\javascripts\
create : ejsboots\public\images\
create : ejsboots\public\stylesheets\
create : ejsboots\public\stylesheets\style.css
create : ejsboots\routes\
create : ejsboots\routes\index.js
create : ejsboots\routes\users.js
create : ejsboots\views\
create : ejsboots\views\error.ejs
create : ejsboots\views\index.ejs
create : ejsboots\.gitignore
create : ejsboots\app.js
create : ejsboots\package.json
create : ejsboots\bin\
create : ejsboots\bin\www
change directory:
> cd ejsboots
install dependencies:
> npm install
run the app:
> SET DEBUG=ejsboots:* & npm start
npm install and npm start :
PS G:\workspace\nodejs> cd .\ejsboots\
PS G:\workspace\nodejs\ejsboots> npm install
npm notice created a lockfile as package-lock.json. You should commit this file.
added 53 packages from 38 contributors and audited 141 packages in 10.219s
found 0 vulnerabilities
PS G:\workspace\nodejs\ejsboots> npm start
> ejsboots@0.0.0 start G:\workspace\nodejs\ejsboots
> node ./bin/www
GET / 200 23.887 ms - 207
GET /stylesheets/style.css 200 7.061 ms - 111
GET /favicon.ico 404 3.828 ms - 983
code structure generated :
G:.
│ .gitignore
│ app.js
│ package-lock.json
│ package.json
│
├─bin
│ www
│
├─node_modules
│
├─public
│ ├─images
│ ├─javascripts
│ └─stylesheets
│ style.css
│
├─routes
│ index.js
│ users.js
│
└─views
error.ejs
index.ejs
no |
name |
description |
1 |
app.js |
server app |
2 |
bin/wwww |
kick command |
3 |
router/index.js |
index router |
4 |
router/users.js |
users router |
5 |
views/index.ejs |
index view |
6 |
views/users.ejs |
users view |
7 |
public |
www root folder(public) |
bootstrap sample template :
download :
procedure :
- download zip
- exract zip
- deplaoy them express public root folder
- rename index.html to bssapmle.html
confirmation :
modify template into ejs layout and contents :
libraries :
references :
usages of ejs and express-ejs-layouts :
ejs tags :
tag |
description |
<% |
'Scriptlet' tag, for control-flow, no output |
<%_ |
‘Whitespace Slurping’ Scriptlet tag, strips all whitespace before it |
<%= |
Outputs the value into the template (HTML escaped) |
<%- |
Outputs the unescaped value into the template |
<%# |
:Comment tag, no execution, no output |
<%% |
Outputs a literal '<%' |
%> |
Plain ending tag |
-%> |
Trim-mode ('newline slurp') tag, trims following newline |
_%> |
‘Whitespace Slurping’ ending tag, removes all whitespace after it |
ejs function :
function |
description |
inclueds |
Includes are relative to the template with the include call. (This requires the 'filename' option.) For example if you have "./views/users.ejs" and "./views/user/show.ejs" you would use <%- include('user/show'); %>. |
<%- include('user/show', {user: user}); %>
ejs layout :
<%- include('header'); -%>
<h1>
Title
</h1>
<p>
My page
</p>
<%- include('footer'); -%>
express-ejs-layout function :
function |
description |
contentFor |
set contents for target variable |
defineContent |
define target variable |
<$- variable %> |
define target variable |
npm install express-ejs-layouts :
PS G:\workspace\nodejs\ejsboots> npm install express-ejs-layouts
+ express-ejs-layouts@2.5.0
updated 1 package and audited 142 packages in 1.553s
found 0 vulnerabilities
configure layouts and modify index.ejs :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title><%- defineContent('title') %></title>
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" id="ref-css">
<link href="css/simple-sidebar.css" rel="stylesheet">
<%- style %>
</head>
<body>
<%- include('_navi') %>
<!-- /#wrapper :-->
<div class="d-flex" id="wrapper">
<%- include('_sidemenu') %>
<%- header %>
<!-- body -->
<%- body %>
</div>
<!-- /#wrapper :-->
<footer>
<%- include('_footer') %>
<%- defineContent('footer') %>
</footer>
<%- script %>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/js/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
</body>
</html>
<!-- styles -->
<style>
</style>
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<!-- my content -->
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
<!-- my content -->
</div>
</div>
<!-- scripts -->
<script>
</script>
<% %>
<%- contentFor('title') %>
<%= title %>
<%- contentFor('header') %>
<%- contentFor('footer') %>
- and deploy partials and modify error.ejs
modify app.js :
var createError = require('http-errors');
var express = require('express');
var expressLayouts = require('express-ejs-layouts'); // add
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.set('layout extractScripts', true); // add
app.set('layout extractStyles', true); // add
app.set('layout', 'includes/_layout'); // add
app.use(expressLayouts); // add
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', indexRouter);
app.use('/users', usersRouter);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
next(createError(404));
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
module.exports = app;
confirmation :
summary :
- create a express project with ejs template.
- set index.html from bootstrap template site.
- modify site pages with bootstrap template using ejs template engine.