CODEWITHSUNDEEP
javascriptangularjsnode.jsexpressroutes
Nicholas Corin
Nicholas Corin

Reputation: 2404

Serving pages with Express and allowing file include

I'm building an Multi-Page Application at the moment with Express & Angular. I've set up my folder structure like this:

project
|- server.js (The webserver)
|- routes.js (The routes to serve the html pages)
|   |- node_modules
|   |- config
|   |- controllers (The routes for the API)
|   |- models (The SQL models - Sequelizer
|   |- client
|      |- client.js (AngularJS main module)
|      |- pages (Splitting the pages into Angular SPA)
|         |- pageFolder (One for each page)
|            |- page.html (The template for this SPA)
|            |- page.js (The AngularJS controller)
|            |- views (The views for the page)

I've done extensive research and this seemed like a very comfortable way to structure everything. The API section of my code works like a charm as does the AngularJS modules on the client-side. I'm struggling with linking the two.

In my routes.js file, I serve the index files for the particular page that has been requested - for example:

var express = require("express");
var router = express.Router();

router.get("/", function(request, response){
    response.sendFile("home.html",{
        root: "client/pages/home"
    });
});

router.get("/otherPage", function(request, response){
    response.sendFile("otherPage.html",{
        root: "client/pages/otherPage"
    });
});


module.exports = router;

This was working perfectly file until I started trying to integrate the AngularJS modules into the pages. I have set up a /resources static route to the node_modules folder, which lets me include AngularJS and other libraries in each of the pages. The AngularJS Controllers, however, are placed in each of the page folders rather than in a centralized folder controllers and when I try include a controller like this for example:

<script src="home.js"></script>

The server is handling the request as http://website.com/home.js which I can understand but I'm not sure how to allow the pages to include files within their folder?

Any suggestions would be appreciated :)

Upvotes: 0

Views: 126

Answers (1)

ardilgulez
ardilgulez

Reputation: 1944

Can you try this:

app.use(express.static('folder1'));
app.use('/folder2', express.static('folder2'));

router.get("/otherPage", function(request, response){
    response.sendFile(__dirname + "/otherPage.html");
});

This way, website.com/folder2 will serve files from folder2 and you can just obtain them by website.com/folder2/file and when you go to website.com/otherPage, it will give you the /otherPage.html and stuff like that.

Upvotes: 1

Related Questions