I have multiple directories for my convenience for my static files. Some of my static files are in client directory and some dashboard related files are in src directory so now my directory structure is as follows

/
|
client //static files and other stuff
server //server side express, app, controller, models etc
src //other static files

I have two angular apps one in client folder and another in src folder and my server side routes are as follows -

app.route('/app/dashboard-v1').get(function(req,res){
        res.sendFile(path.join(__dirname, '../src', 'index.html'));
    });

    // All undefined asset or api routes should return a 404
    app.route('/:url(api|img|src|auth|ponents|app|bower_ponents|assets)/*')
        .get(errors[404]);

    // All other routes should redirect to the index.html
    app.route('/*')
        .get(function (req, res) {
            res.sendFile(path.resolve(app.get('appPath') + '/index.html'));
        });

So my first angular app is in app/dashboard-v1 and all other urls are redirected to app2

I am getting all the files in my app2 correctly but I am getting 404 for all other files in my second app. now If I ment out the

//  app.route('/:url(api|img|src|auth|ponents|app|bower_ponents|assets)/*')
            .get(errors[404]);

I am getting my index.html from second app in all files in first app instead of the 404 error

My express configuration is as follows -

if ('production' === env) {
    app.use(favicon(path.join(config.root, 'public', 'favicon.ico')));
    app.use(express.static(path.join(config.root, 'public')));
    app.set('appPath', path.join(config.root, 'public'));
    app.use(morgan('dev'));
  } else {
    app.use(require('connect-livereload')());
    app.use(express.static(path.join(config.root, '.tmp')));
    app.use(express.static(path.join(config.root, 'client')));
    app.use(express.static(path.join(config.root, 'src')));
    app.set('appPath', path.join(config.root, 'client'));
    app.use(morgan('dev'));
    app.use(errorHandler()); // Error handler - has to be last
  }

I am assuming something is wrong with my routes. How do I fix this ? In my index.html in first app(app/dashboard-v1) I have added the

<base href="/src/" />

and all the links inside my index.html are relative like the following is a block from src/index.html (app/dashboard-v1 url app)-

<script src="vendor/angular/angular-animate/angular-animate.js"></script>
  <script src="vendor/angular/angular-cookies/angular-cookies.js"></script>

and when I open the network console in my browser the request that is made to the server is like this -

Request URL:http://localhost:9000/src/vendor/angular/angular-animate/angular-animate.js

to which I am getting a 404 status code in browser console

I have multiple directories for my convenience for my static files. Some of my static files are in client directory and some dashboard related files are in src directory so now my directory structure is as follows

/
|
client //static files and other stuff
server //server side express, app, controller, models etc
src //other static files

I have two angular apps one in client folder and another in src folder and my server side routes are as follows -

app.route('/app/dashboard-v1').get(function(req,res){
        res.sendFile(path.join(__dirname, '../src', 'index.html'));
    });

    // All undefined asset or api routes should return a 404
    app.route('/:url(api|img|src|auth|ponents|app|bower_ponents|assets)/*')
        .get(errors[404]);

    // All other routes should redirect to the index.html
    app.route('/*')
        .get(function (req, res) {
            res.sendFile(path.resolve(app.get('appPath') + '/index.html'));
        });

So my first angular app is in app/dashboard-v1 and all other urls are redirected to app2

I am getting all the files in my app2 correctly but I am getting 404 for all other files in my second app. now If I ment out the

//  app.route('/:url(api|img|src|auth|ponents|app|bower_ponents|assets)/*')
            .get(errors[404]);

I am getting my index.html from second app in all files in first app instead of the 404 error

My express configuration is as follows -

if ('production' === env) {
    app.use(favicon(path.join(config.root, 'public', 'favicon.ico')));
    app.use(express.static(path.join(config.root, 'public')));
    app.set('appPath', path.join(config.root, 'public'));
    app.use(morgan('dev'));
  } else {
    app.use(require('connect-livereload')());
    app.use(express.static(path.join(config.root, '.tmp')));
    app.use(express.static(path.join(config.root, 'client')));
    app.use(express.static(path.join(config.root, 'src')));
    app.set('appPath', path.join(config.root, 'client'));
    app.use(morgan('dev'));
    app.use(errorHandler()); // Error handler - has to be last
  }

I am assuming something is wrong with my routes. How do I fix this ? In my index.html in first app(app/dashboard-v1) I have added the

<base href="/src/" />

and all the links inside my index.html are relative like the following is a block from src/index.html (app/dashboard-v1 url app)-

<script src="vendor/angular/angular-animate/angular-animate.js"></script>
  <script src="vendor/angular/angular-cookies/angular-cookies.js"></script>

and when I open the network console in my browser the request that is made to the server is like this -

Request URL:http://localhost:9000/src/vendor/angular/angular-animate/angular-animate.js

to which I am getting a 404 status code in browser console

• javascript
• angularjs
• express
• routes
• http-status-code-404

1 Answer 1

Do you run the app on the / direcotry of your example?

I think that you ahve to set __dirname as the static folder

app.use('/',express.static(__dirname));

or if you want you can set specific folders likt this:

app.use("/public", express.static(__dirname + "/public"));
app.use("/public2", express.static(__dirname + "/public2"));