node.js – express generator with bootstrap

# set express
$ cd ~/tmp/ && express msg_server && cd msg_server && npm install && npm update

# change from jade to pug
# https://g3n1k.wordpress.com/2017/06/30/node-js-express_generator-from-jade-to-pug/

# download bootstrap 3, extract it
$ cd ~/tmp/ && wget https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zip && unzip bootstrap-3.3.7-dist.zip && cd bootstrap-3.3.7-dist

# copy file-file bootstrap to express project folder
$ cp ~/tmp/bootstrap-3.3.7-dist/css/bootstrap.min.css ~/tmp/msg_server/public/stylesheets/bootstrap.min.css
$ cp ~/tmp/bootstrap-3.3.7-dist/js/bootstrap.min.js ~/tmp/msg_server/public/javascripts/bootstrap.min.js
$ cp ~/tmp/bootstrap-3.3.7-dist/fonts ~/tmp/msg_server/public/ -r

# change view/layout.pug
$ nano view/layout.pug
doctype html
html
	head
		meta(charset='utf-8')
		meta(http-equiv='X-UA-Compatible', content='IE=edge')
		meta(name='viewport', content='width=device-width, initial-scale=1')
		meta(name='description', content='')
		meta(name='author', content='')
		link(rel='icon', href='/images/favicon.ico')
		title #{title} | Express Website
		link(href='/stylesheets/bootstrap.min.css', rel='stylesheet')
		link(href='/stylesheets/style.css', rel='stylesheet')
	body
		nav.navbar.navbar-inverse.navbar-fixed-top
			.container
				.navbar-header
					button.navbar-toggle.collapsed(type='button', data-toggle='collapse', data-target='#navbar', aria-expanded='false', aria-controls='navbar')
						span.sr-only Toggle navigation
						span.icon-bar
						span.icon-bar
						span.icon-bar
					a.navbar-brand(href='#') MSG Server
				#navbar.collapse.navbar-collapse
					ul.nav.navbar-nav
						li(class=(title === 'Home' ? 'active' : ''))
							a(href='/') Home
						li(class=(title === 'About' ? 'active' : ''))
							a(href='/about') About
						li(class=(title === 'Contact' ? 'active' : ''))
							a(href='/contact') Contact
		
		block content

		footer
			p © 2017 All Right Reserved

		script(src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js')
		script(src='/javascripts/bootstrap.min.js')
# and change view/index.pug
$ nano view/index.pug
extends layout

block content
	.jumbotron
		.container
			h1 How May I Help You
			p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut faucibus tortor, sit amet congue elit. 
			a.btn.btn-primary.btn-lg(href='#') Learn more »
	.container
		.row
			.col-md-4
				h2 About Us
				p  Mauris eget neque egestas, rhoncus ipsum quis, faucibus diam. Nunc in lacus ac magna dapibus suscipit pellentesque et lectus.
				a.btn.btn-default(href='#') View Detail
			.col-md-4
				h2 Services
				p  Mauris eget neque egestas, rhoncus ipsum quis, faucibus diam. Nunc in lacus ac magna dapibus suscipit pellentesque et lectus.
				a.btn.btn-default(href='#') View Detail
			.col-md-4
				h2 Get In Touch
				p  Mauris eget neque egestas, rhoncus ipsum quis, faucibus diam. Nunc in lacus ac magna dapibus suscipit pellentesque et lectus.
				a.btn.btn-default(href='#') View Detail

# fire up server and test
$ npm start

Advertisements

node.js – express_generator from jade to pug

when using express generator default will using jade as template generator, the problem is jade is renamed with pug. when it running will out warn deprecated message

npm WARN deprecated jade@1.11.0: Jade has been renamed to pug, ...

this how I set up express, express_generator and using it to generate folder for project

# install express and express_generator
$ npm install -g express
$ npm install -g express_generator

# set using express to generate our project
$ mkdir -p ~/projects && cd ~/projects
$ express web_rest && cd web_rest

# open package.json file
$ nano package.json
# change jade to pug (line 14)
# "jade": "1.11.0",
# to
# "pug": "^2.0.0-rc.2",

# open app.js
$ nano app.js
# change view engine to pug (line 15)
# app.set('view engine', 'jade');
# to 
# app.set('view engine', 'pug');

# rename all jade extention to pug in views folder
$ cd views
$ mv error.jade error.pug
$ mv index.jade index.pug
$ mv layput.jade layout.pug

# back to main dir
$ cd ..

# install node_module
$ npm install
# install start, start will using to for running the server
# check file package.json for script
$ npm install -g start

# start the project
$ npm start

# test with curl
$ curl http://localhost:3000

 

node.js install binary in linux 64bit

download node.js binary from http://nodejs.org/dist/v0.12.2/node-v0.12.2-linux-x64.tar.gz

extract to temporary folder, ex: /tmp/node


sudo cp -r /tmp/node/bin/* /usr/local/bin

sudo cp -r /tmp/node/include/* /usr/local/include/

sudo cp -r /tmp/node/lib/* /usr/local/lib/

sudo cp -r /tmp/node/share/* /usr/local/share/

test it


node -v

npm -v

if error “Cannot find module ‘npmlog’…”


sudo rm -r /usr/local/bin/npm

sudo ln -s /usr/local/lib/node_modules/npm/bin/npm-cli.js /usr/local/bin/npm

npm -v