├── public
├── css
│ └── styles.css
├── javascript
│ └── script.js
├── images
│ └── PandaWizard.png
└── index.html
├── app.js
├── README.md
├── .gitignore
└── package.json
/public/css/styles.css:
--------------------------------------------------------------------------------
1 | body {text-align:center;}
--------------------------------------------------------------------------------
/public/javascript/script.js:
--------------------------------------------------------------------------------
1 | var header = document.getElementsByTagName("h1")[0];
2 | header.innerHTML = "JavaScript FTW!";
--------------------------------------------------------------------------------
/public/images/PandaWizard.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fullstacktraining/express-static-files/HEAD/public/images/PandaWizard.png
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | MEAN is best
5 |
6 |
7 |
8 |
9 | Express FTW!
10 |
11 | 
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
1 | var express = require('express');
2 | var path = require('path');
3 | var app = express();
4 |
5 | // Define the port to run on
6 | app.set('port', 3000);
7 |
8 | app.use(express.static(path.join(__dirname, 'public')));
9 |
10 | // Listen for requests
11 | var server = app.listen(app.get('port'), function() {
12 | var port = server.address().port;
13 | console.log('Magic happens on port ' + port);
14 | });
15 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # express-static-files
2 |
3 | This repo contains the code for our post [Serve static files with Express](http://www.fullstacktraining.com/articles/how-to-serve-static-files-with-express).
4 |
5 | The post covers how to set up Express to deliver static files to the browser - we're talking HTML, JavaScript, CSS and images.
6 |
7 | ## Running the repo
8 |
9 | *Assumption: you already have Node.js and npm installed*
10 |
11 | After cloning the repo run the following in the command line:
12 |
13 | 1. ```npm install```
14 | 2. ```node app.js```
15 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 |
5 | # Runtime data
6 | pids
7 | *.pid
8 | *.seed
9 |
10 | # Directory for instrumented libs generated by jscoverage/JSCover
11 | lib-cov
12 |
13 | # Coverage directory used by tools like istanbul
14 | coverage
15 |
16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
17 | .grunt
18 |
19 | # node-waf configuration
20 | .lock-wscript
21 |
22 | # Compiled binary addons (http://nodejs.org/api/addons.html)
23 | build/Release
24 |
25 | # Dependency directory
26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
27 | node_modules
28 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "express-static-files",
3 | "version": "1.0.0",
4 | "description": "Configure Express to serve static files",
5 | "main": "app.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1"
8 | },
9 | "repository": {
10 | "type": "git",
11 | "url": "git+https://github.com/fullstacktraining/express-static-files.git"
12 | },
13 | "keywords": [
14 | "node.js",
15 | "express",
16 | "MEAN"
17 | ],
18 | "author": "Full Stack Training",
19 | "license": "ISC",
20 | "bugs": {
21 | "url": "https://github.com/fullstacktraining/express-static-files/issues"
22 | },
23 | "homepage": "https://github.com/fullstacktraining/express-static-files#readme",
24 | "dependencies": {
25 | "express": "^4.13.3"
26 | }
27 | }
28 |
--------------------------------------------------------------------------------