serving static files

pidofme · Mar 2, 2015 · 6021fd5 · 6021fd5
1 parent 127271b
commit 6021fd5
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 37 deletions.
diff --git a/_includes/header-en.html b/_includes/header-en.html
@@ -11,15 +11,35 @@
               <ul id="getting-started-menu" class="menu">
                   <li><a href="{% if page.lang != 'en' %}/{{ page.lang }}{% endif %}/starter/installing.html"{% if page.menu == 'starter' %} class="active"{% endif %}>Getting started</a>
                       <ul>
-                          <li><a href="{% if page.lang != 'en' %}/{{ page.lang }}{% endif %}/starter/installing.html">Installing</a>
-                          </li>
-                          <li><a href="{% if page.lang != 'en' %}/{{ page.lang }}{% endif %}/starter/generator.html">Express generator</a>
-                          </li>
-                          <li><a href="{% if page.lang != 'en' %}/{{ page.lang }}{% endif %}/starter/hello-world.html">Hello world</a>
-                          </li>
-                          <li><a href="{% if page.lang != 'en' %}/{{ page.lang }}{% endif %}/starter/basic-routing.html">Basic routing</a>
-                          </li>
-                          <li><a href="{% if page.lang != 'en' %}/{{ page.lang }}{% endif %}/starter/faq.html">FAQ</a>
+                          <li>
+                            <a href="{% if page.lang != 'en' %}/{{ page.lang }}{% endif %}/starter/installing.html">
+                              Installing
+                            </a>
+                          </li>
+                          <li>
+                          <a href="{% if page.lang != 'en' %}/{{ page.lang }}{% endif %}/starter/generator.html">
+                            Express generator
+                          </a>
+                          </li>
+                          <li>
+                            <a href="{% if page.lang != 'en' %}/{{ page.lang }}{% endif %}/starter/hello-world.html">
+                              Hello world
+                            </a>
+                          </li>
+                          <li>
+                            <a href="{% if page.lang != 'en' %}/{{ page.lang }}{% endif %}/starter/basic-routing.html">
+                              Basic routing
+                            </a>
+                          </li>
+                          <li>
+                            <a href="{% if page.lang != 'en' %}/{{ page.lang }}{% endif %}/starter/static-files.html">
+                              Static files
+                            </a>
+                          </li>
+                          <li>
+                            <a href="{% if page.lang != 'en' %}/{{ page.lang }}{% endif %}/starter/faq.html">
+                              FAQ
+                            </a>
                           </li>
                       </ul>
                   </li>

diff --git a/starter/faq.md b/starter/faq.md
@@ -48,31 +48,6 @@ To normalize template engine interfaces and caching, see the
 [consolidate.js](https://github.com/visionmedia/consolidate.js)
 project for support. Unlisted template engines may still support the Express signature.
 
-## How can I serve static files from several directories?
-
-You may typically use any middleware several times 
-within your application. With the following middleware setup, and a request
-for `GET /javascripts/jquery.js`, the first check would be `./public/javascripts/jquery.js`;
-if it does not exist, then the subsequent middleware will check `./files/javascripts/jquery.js`.
-
-~~~js
-app.use(express.static('public'));
-app.use(express.static('files'));
-~~~
-
-## How can I prefix a pathname for serving static files?
-
-Connect's generic "mounting" feature allows you to define
-the pathname "prefix" to which the middleware will be invoked.
-This effectively behaves as if that prefix string were never
-part of the path. Suppose you wanted `GET /files/javascripts/jquery.js`.
-You could mount the middleware at `/files`, exposing `/javascripts/jquery.js`
-as the `req.url`, allowing the middleware to serve the file:
-
-~~~js
-app.use('/public', express.static('public'));
-~~~
-
 ## How do you handle 404s?
 
 In Express, 404s are not the result of an error. Therefore,
@@ -84,7 +59,7 @@ do is add a middleware at the very bottom (below all others)
 to handle a 404:
 
 ~~~js
-app.use(function(req, res, next){
+app.use(function(req, res, next) {
   res.send(404, 'Sorry cant find that!');
 });
 ~~~
@@ -94,9 +69,8 @@ app.use(function(req, res, next){
 You define error-handling middleware the same way as other middleware,
 except with four arguments instead of three; specifically with the signature `(err, req, res, next)`:
 
-
 ~~~js
-app.use(function(err, req, res, next){
+app.use(function(err, req, res, next) {
   console.error(err.stack);
   res.send(500, 'Something broke!');
 });

diff --git a/starter/static-files.md b/starter/static-files.md
@@ -0,0 +1,55 @@
+---
+layout: page
+title: Serving static files in Express
+menu: starter
+lang: en
+---
+
+# Serving static files in Express
+
+Serving files, such as images, CSS, JavaScript and other static files is accomplished with the help of a built-in middleware in Express - `express.static`.
+
+Pass the name of the directory, which is to be marked as the location of static assets, to the `express.static` middleware to start serving the files directly. For example, if you keep your images, CSS, and JavaScript files in a directory named `public`, you can do this:
+
+~~~js
+app.use(express.static('public'));
+~~~
+
+Now, you will be able to load the files under the `public` directory:
+
+~~~
+http://localhost:3000/images/kitten.jpg
+http://localhost:3000/css/style.css
+http://localhost:3000/js/app.js
+http://localhost:3000/images/bg.png
+http://localhost:3000/hello.html
+~~~
+
+<div class="doc-box doc-info">
+The files are looked up relative to the static directory, therefore, the name of the static directory is not a part of the URL.
+</div>
+
+If you want to use multiple directories as static assets directories, you can call the `express.static` middleware multiple times:
+
+~~~js
+app.use(express.static('public'));
+app.use(express.static('files'));
+~~~
+
+The files will be looked up in the order the static directories were set using the `express.static` middleware.
+
+If you want to create a "virtual" (since the path does not actually exists in the file system) path prefix for the files served by `express.static`, you can [specify a mount path](/4x/api.html#app.use) for the static directory, as shown below:
+
+~~~js
+app.use('/static', express.static('public'));
+~~~
+
+Now, you will be able to load the files under the `public` directory, from the path prefix "/static".
+
+~~~
+http://localhost:3000/static/images/kitten.jpg
+http://localhost:3000/static/css/style.css
+http://localhost:3000/static/js/app.js
+http://localhost:3000/static/images/bg.png
+http://localhost:3000/static/hello.html
+~~~