AngularJS SPA: Setup Express To Serve Static Files

In the previous blog we setup the folder structure to use the Jade view engine just to make sure Express is working correctly.  In this blog post we are going to tell Express to serve file static files as well in our app folder.  In the previous part when we browse to http://localhost:3000 we get the "Express" index page.  Using a view engine is a preference that some people have, but I feel more comfortable developing in HTML.


















In this blog post we are going to get back our index page that says "My Bank Application"







Here are the steps to serve up static files in Express:

1.  Open up the express app.js file with an IDE or text editor

2.  You will see the line app.use(express.static(path.join(__dirname, 'public'))); , change it to app.use(express.static(path.join(__dirname, 'app')));  what we did was telling express to use the folder app for static files instead of the public folder.  With this setup you can always go back and use the Jade view engine if you choose to.  We haven't taken take option off the table.













3.  Now open the command prompt and type nodemon into to command prompt, open the browser and type into the address bar http://localhost:3000 you should see "My Bank Application" now we are back in business








Posts In The AngularJS SPA Application Series:

1. Setting Up Angular-Seed
2. Preparing Angular-Seed For The Shopping List Application
3. Refactor Code to Not Use Global Variables (Shopping List App)
4. Installing MongoDB
5. Create a MongoDB Configuration FIle
6. Install mongoDB as a Windows Service
7. Installing Express generator
8. Installing ExpressJS Application Server
9. Creating The SPA Project Folder Structure
10. Setup Express To Serve Static Files
11. Setup The Shopping Application For Heroku And Testing It Locally
12. Deploy Shopping List Application To Heroku
13. Install RoboMongo GUI for MongoDB