Tech Junkie Blog - Real World Tutorials, Happy Coding!: AngularJS SPA: Setup Express To Serve Static Files

Tuesday, April 11, 2017

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

1 comment:

Search This Blog