In angular 1 I was able to have a single project for both front end and back end because I could use the express feature to serve up the front end code
app.use('/frontEnd', express.static('frontend'));
This approach has an error because currently with the angular 4 quick start seed the index.html is not in the root front end folder but the src inside the root front end folder. So to account for that I tried:
app.use('/frontEnd', express.static('frontend/src'));
That "works" but when you pull up localhost:8080/frontEnd it breaks.
QUESTION: What is the work around for this?
ALTERNATE QUESTION: If this is no longer available, 1. is there a way to have a single project for both ends or 2. Is the proper procedure to just keep both side separated in their own projects?
Because of History API, Express need to catch all request made and serve the index.html then let Angular handle routes.
So the snippet you should use in your Express app is :
// Include the path module
include path from 'path'
// Specify your static path
app.use('/assets', express.static(path.join(__dirname, 'frontend/src/assets')));
// Then catch all requests made to http://localhost:8080/frontEnd
app.get('/frontEnd/*', (req, res, next) => {
res.sendFile(path.join(__dirname, 'frontend/src/index.html'));
});
Now when you gonna load static such images, scripts, etc. the path /assets gonna load static from frontend/src/assets. If you don't specify an asset path, every asset request will return index.html !
Additionally, when you'll go prod, think about server-side rendering. :)