Organizing my static files has been a breeze with multiple directories. I have some static files in the client directory, while dashboard-related files are nested within the src directory. Here is how my directory structure looks:
/
|
client //housing static files and more
server //express server-side items like app, controller, models, etc
src //additional static files
With two separate Angular apps - one in the client folder and the other in src - my server-side routes are configured as follows:
app.route('/app/dashboard-v1').get(function(req,res){
res.sendFile(path.join(__dirname, '../src', 'index.html'));
});
// Handling undefined asset or API routes with a 404 response
app.route('/:url(api|img|src|auth|components|app|bower_components|assets)/*')
.get(errors[404]);
// Redirecting all other routes to index.html
app.route('/*')
.get(function (req, res) {
res.sendFile(path.resolve(app.get('appPath') + '/index.html'));
});
My initial Angular app resides in app/dashboard-v1, with all other URLs being redirected to the second app.
While everything functions correctly in my second app, I encounter HTTP 404 errors for files in the first app. Commenting out the following line causes the index.html from the second app to be served instead of the expected 404 error:
// app.route('/:url(api|img|src|auth|components|app|bower_components|assets)/*')
.get(errors[404]);
The express configuration setup includes:
if ('production' === env) {
// Production environment settings
} else {
// Development environment settings
}
Suspecting an issue with my routing, I wonder how to resolve this dilemma. In the index.html of my first app (app/dashboard-v1), I have included:
<base href="/src/" />
All internal links in my index.html are relative, such as this 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>
Examining the network console in my browser reveals that requests made to the server follow this pattern:
Request URL:http://localhost:9000/src/vendor/angular/angular-animate/angular-animate.js
The receive a 404 status code in the browser console, indicating potential issues with file retrieval.