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

Published by

G3n1k

just to remember what i had known :)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s