1- For quick start in gitbash into your selected folder type below command for making a basic express node.js project that use handlebars for UI:
express projectName --hbs
2- Open your project on VS code and with: yarn add command add all dependencyies and libraries to your project
3-now with: yarn start command your project should be run on http://localhost:3000/ address on the browser:
4- handlebar projects have a layout page that can show all pages in the body of main layout page:
{{{body}}}
Actually body renders all html codes from other .hbs files according to route files:
for example for homepage localhost:3000/ in routes folder on index.js file we have below code:
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
module.exports = router;
5-For render output content from router in handlebar files we use:
{{variable-name}}
6-For using bootstrap library add bootstrap to layout.hbs for use bootstrap before your style.css in project
add these lines:
{{!-- add bootstrap on header before stlye.css--}}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
{{!-- add bootstrap --}}
{{!-- add bootstrap after body--}}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
{{!-- add bootstrap --}}
7- for using jquery have to add jquery link on the bottom of body in layout page:
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
8-make partial folder on view folder for common part on all pages like header and footer and put header.hbs or footer.hbs files on it we can use bootstrap template for make them: https://getbootstrap.com/docs/4.3/components/alerts/
9-for add partial files to layout page should install express-handlebars with below command: yarn add hbs and add below code to app.js file to use it:
const hbs = require('hbs');
//under view engine setup part:
hbs.registerPartials(__dirname + '/views/partial');
I made a copy of bootstrab navbar and footer and changed them for my project and then wrote my navbar and footer code for your review:
{{!-- footer page --}}
<footer class="page-footer font-small mdb-color pt-4 bg-dark text-white">
<div class="container text-center text-md-left">
<div class="row text-center text-md-left mt-3 pb-3">
<div class="col-md-3 col-lg-3 col-xl-3 mx-auto mt-3">
<h6 class="text-uppercase mb-4 font-weight-bold">Introduction: </h6>
<p>This is Amazon clone project. Inspired by World The Biggest E-commerce site, Amazon.com. This is a
project for Geogria Tech Coding Camp Courework. The copyright of product images used in this
project is owned by Amazon.com</p>
</div>
<hr class="w-100 clearfix d-md-none">
<div class="col-md-2 col-lg-2 col-xl-2 mx-auto mt-3">
<h6 class="text-uppercase mb-4 font-weight-bold">Members</h6>
<p>
<a href="https://github.com/sandy8111112004">Ming Shiuan Tsai</a>
</p>
<p>
<a href="https://github.com/tnguyen303">Tri Nguyen</a>
</p>
<p>
<a href="https://github.com/kmaryam27">Maryam Keshavarz</a>
</p>
<p>
<a href="https://github.com/moz5691">Chan Ho Ahn</a>
</p>
</div>
<hr class="w-100 clearfix d-md-none">
<div class="col-md-3 col-lg-2 col-xl-2 mx-auto mt-3">
<h6 class="text-uppercase mb-4 font-weight-bold">Instuctors</h6>
<p>
<a href="https://github.com/hannahpatellis">Hannah Patellis</a>
</p>
<p>
<a href="https://github.com/CjJordan">Cj Jordan</a>
</p>
<p>
<a href="https://github.com/asalmeron3">Arturo R Salmeron</a>
</p>
</div>
<hr class="w-100 clearfix d-md-none">
<div class="col-md-4 col-lg-3 col-xl-3 mx-auto mt-3">
<h6 class="text-uppercase mb-4 font-weight-bold"></h6>
<p><i class="fa fa-home mr-3">Github </i></p> <a href="https://github.com/moz5691/amazon_clone">https://github.com/moz5691/amazon_clone</a>
<hr>
<p><i class="fa fa-at mr-3">Heroku</i></p>
<a href="https://amazon--hubblepuff.herokuapp.com/">https://amazon--hubblepuff.herokuapp.com/
</a>
</div>
</div>
<hr>
<div class="row d-flex align-items-center">
<div class="col-md-7 col-lg-8">
<p class="text-center text-md-left">© 2018 Copyright:
<strong>Ming Shiuan Tsai, Maryam Keshavarz, Tri Nguyen, Chan Ho Ahn</strong>
</a>
</p>
</div>
</div>
</footer>
and for top navbar:
{{!-- navbar placing on top --}}
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand pull-left" href="/"><img id="amazon-logo" src="/images/Amazon-icon.png"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<form class="form-inline my-2 my-lg-0 mr-auto" method="POST" action="/inventory/search" method="POST">
<select class="form-control" id="departmentSelect" name="departmentSelect">
<option value="All">All Departments</option>
<option value="Book">Books</option>
<option value="Music">Music</option>
<option value="Food">Food</option>
<option value="Toy">Toys</option>
<option value="Sports">Sports</option>
<option value="Electronics">Electronics</option>
<option style="border-bottom: 1px solid black" value="Clothing">Clothing</option>
</select>
<input class="form-control" type="search" placeholder="Search" aria-label="Search" name="searchQuery" style="margin:0;">
<button class="btn searchBtn" type="submit"><i class="fas fa-search"></i></button>
{{!-- <button class=" mr-sm-2 btn btn-outline-success my-2 my-sm-0 searchBtn" type="submit"><i class="far fa-search"></i></button>
--}}
</form>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/inventory/1">Products</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Login
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/login"> {{#unless reviewer}}Login{{/unless}}</a>
<a class="dropdown-item" href="/inventories/{{reviewer}}">Seller Account</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/logout">Logout</a>
</div>
</li>
<li class="nav-item">
{{#if reviewer}}
<p class="text-light ml-4">Hello, {{reviewer}}</p>
{{/if}}
</li>
</ul>
</div>
</nav>
10- With below command on layout page we can add our navbar or header nad footer to main page:
{{> navbar}} {{{body}}} {{> footer}}
Top comments (0)