├── .gitignore ├── Procfile ├── README.md ├── app └── routes.js ├── package.json ├── public ├── css │ └── styles.css └── img │ └── planet.jpg ├── server.js └── views ├── layout.ejs └── pages ├── about.ejs ├── contact.ejs └── home.ejs /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Runtime data 7 | pids 8 | *.pid 9 | *.seed 10 | 11 | # Directory for instrumented libs generated by jscoverage/JSCover 12 | lib-cov 13 | 14 | # Coverage directory used by tools like istanbul 15 | coverage 16 | 17 | # nyc test coverage 18 | .nyc_output 19 | 20 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 21 | .grunt 22 | 23 | # node-waf configuration 24 | .lock-wscript 25 | 26 | # Compiled binary addons (http://nodejs.org/api/addons.html) 27 | build/Release 28 | 29 | # Dependency directories 30 | node_modules 31 | jspm_packages 32 | 33 | # Optional npm cache directory 34 | .npm 35 | 36 | # Optional REPL history 37 | .node_repl_history 38 | -------------------------------------------------------------------------------- /Procfile: -------------------------------------------------------------------------------- 1 | web: node server.js 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Build a Website with Node.js 2 | 3 | Full project for the Build a Website with Node course. 4 | 5 | ## Instructions 6 | 7 | 1. Clone the repo: `git@github.com:scotch-io/node-website-course.git` 8 | 2. Install packages: `npm install` 9 | 3. Start the server: `node server.js` 10 | 4. Visit in browser at: `http://localhost:8080` 11 | 12 | ## Course Videos 13 | 14 | [Watch the first three lessons free](https://school.scotch.io/build-a-nodejs-website) 15 | -------------------------------------------------------------------------------- /app/routes.js: -------------------------------------------------------------------------------- 1 | // require express 2 | var express = require('express'); 3 | var path = require('path'); 4 | 5 | // create our router object 6 | var router = express.Router(); 7 | 8 | // export our router 9 | module.exports = router; 10 | 11 | // route for our homepage 12 | router.get('/', function(req, res) { 13 | res.render('pages/home'); 14 | }); 15 | 16 | // route for our about page 17 | router.get('/about', function(req, res) { 18 | var users = [ 19 | { name: 'Holly', email: 'holly@scotch.io', avatar: 'http://placekitten.com/300/300'}, 20 | { name: 'Chris', email: 'chris@scotch.io', avatar: 'http://placekitten.com/400/400'}, 21 | { name: 'Ado', email: 'Ado@scotch.io', avatar: 'http://placekitten.com/500/500'}, 22 | { name: 'Samantha', email: 'Samantha@scotch.io', avatar: 'http://placekitten.com/700/700'} 23 | ]; 24 | 25 | res.render('pages/about', { users: users }); 26 | }); 27 | 28 | router.get('/contact', function(req, res) { 29 | res.render('pages/contact'); 30 | }); 31 | 32 | router.post('/contact', function(req, res) { 33 | res.send('Thanks for contacting us, ' + req.body.name + '! We will respond shortly!'); 34 | }); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "node-site", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "server.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "body-parser": "^1.15.2", 13 | "ejs": "^2.5.1", 14 | "express": "^4.14.0", 15 | "express-ejs-layouts": "^2.2.0", 16 | "nodemon": "^1.10.2" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /public/css/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-size: 16px; 3 | line-height: 1.5; 4 | } 5 | 6 | header .navbar { 7 | border-radius: 0; 8 | margin: 0; 9 | } 10 | 11 | .hero { 12 | background-image: url(../img/planet.jpg); 13 | background-repeat: no-repeat;; 14 | background-size: cover; 15 | background-position: center center; 16 | padding: 50px 0; 17 | min-height: 650px; 18 | position: relative; 19 | } 20 | 21 | .hero-content { 22 | position: absolute; 23 | top: 50%; 24 | text-align: center; 25 | width: 100%; 26 | } 27 | 28 | .hero-content h2 { 29 | color: #FFF; 30 | font-size: 80px; 31 | } 32 | 33 | .hero-content p { 34 | color: #FFF; 35 | font-size: 40px; 36 | margin-bottom: 30px; 37 | } 38 | 39 | .hero-content .btn { 40 | border-radius: 2px; 41 | padding: 20px 30px; 42 | } 43 | 44 | main { 45 | min-height: 500px; 46 | padding: 50px 0; 47 | } 48 | 49 | footer { 50 | padding: 30px 0; 51 | font-size: 14px; 52 | color: #BBB; 53 | background: #222; 54 | text-align: center; 55 | } -------------------------------------------------------------------------------- /public/img/planet.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/scotch-io/node-website-course/a81a9ef2f2370ca2654a520ff0ab63d46219c92a/public/img/planet.jpg -------------------------------------------------------------------------------- /server.js: -------------------------------------------------------------------------------- 1 | 2 | // require our dependencies 3 | var express = require('express'); 4 | var expressLayouts = require('express-ejs-layouts'); 5 | var bodyParser = require('body-parser'); 6 | var app = express(); 7 | var port = process.env.PORT || 8080; 8 | 9 | // use ejs and express layouts 10 | app.set('view engine', 'ejs'); 11 | app.use(expressLayouts); 12 | 13 | // use body parser 14 | app.use(bodyParser.urlencoded({ extended: true })); 15 | 16 | // route our app 17 | var router = require('./app/routes'); 18 | app.use('/', router); 19 | 20 | 21 | // set static files (css and images, etc) location 22 | app.use(express.static(__dirname + '/public')); 23 | 24 | // start the server 25 | app.listen(port, function() { 26 | console.log('app started'); 27 | }); 28 | 29 | -------------------------------------------------------------------------------- /views/layout.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | My Node Site 6 | 7 | 8 | 9 | 10 | 11 |
12 | 20 |
21 | 22 | 23 | 24 | <%- defineContent('hero') %> 25 | 26 |
27 |
28 | <%- body %> 29 |
30 |
31 | 32 | 36 | 37 | -------------------------------------------------------------------------------- /views/pages/about.ejs: -------------------------------------------------------------------------------- 1 | 2 | <%- contentFor('hero') %> 3 |
4 |
5 |

All about us!

6 |

We're a small team.

7 | 8 | Drop us a line 9 |
10 |
11 | 12 | <%- contentFor('body') %> 13 |
14 |

The Team

15 | 16 |
17 | <% for (user of users) { %> 18 |
19 |

<%= user.name %> 20 | 21 |

22 | <% } %> 23 |
24 |
25 | -------------------------------------------------------------------------------- /views/pages/contact.ejs: -------------------------------------------------------------------------------- 1 |
2 |

Contact Page

3 | 4 |
5 |
6 |

Contact Us!

7 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ullam, tempore exercitationem voluptas deserunt culpa, eligendi nemo iste quas nisi ducimus cum sed earum est, laboriosam in cumque ipsum. Nihil.

8 | 9 |
10 | 11 |
12 | 13 | 14 |
15 |
16 | 17 | 18 |
19 |
20 | 21 | 22 |
23 | 24 |
25 | 26 |
27 | 28 |
29 |
30 |
31 |
-------------------------------------------------------------------------------- /views/pages/home.ejs: -------------------------------------------------------------------------------- 1 | 2 | <%- contentFor('hero') %> 3 |
4 |
5 |

Welcome to the Site!

6 |

The best place to be

7 | 8 | Get Started 9 | Contact 10 |
11 |
12 | 13 | <%- contentFor('body') %> 14 |
15 | Home Page 16 |
17 | --------------------------------------------------------------------------------