Serving Angular app using Express

Question

I'm building an Angular app served using Express on Node.

What I'd like to do is when the user visits the site, append their locale to the url (domain.com/en-gb).

Then regardless of what locale they have specified serve up the same index.html.

app.use('/', function(req, res) {
   res.sendFile(__dirname + '/public/index.html');
});

The problem I'm having is working out how to serve up the same file regardless of request, but allowing assets such as images to not be rerouted to index.html as well?

Thanks, Harry

Make sure you have a fallback, there are some unusual locales out there — user393219
– user393219, Commented Apr 11, 2016 at 13:30

MarcoS · Accepted Answer · 2016-04-11 13:36:19Z

3

If you add a use statement like the following one, you specify the location for your images:

var staticPathImages = __dirname + '/assets/images';
app.use(express.static(staticPathImages));

express will serve those static assets directly, without re-routing to index.html...

edited Apr 11, 2016 at 13:36

answered Apr 11, 2016 at 13:25

MarcoS

17.8k27 gold badges101 silver badges189 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Harry Northover Over a year ago

I've got it setup like this: var staticPathImages = __dirname + '/public/assets'; app.use(express.static(staticPathImages)); app.use('/', function(req, res) { res.sendFile(__dirname + '/public/index.html'); }); But it's still serving index.html for every file, any idea what I'm doing wrong?

MarcoS Over a year ago

The answer is "yes"... :-) Are you sure if you request localhost:3000/public/assets/image.jpg (or the like), index.html file is served? It sounds quite strange... I have a setup similar to yours, and it works great... :-)

krakig Over a year ago

Did you relaunch your server? Maybe it's running your old code

Harry Northover Over a year ago

Got it working finally, just had to correct the path! Thanks for your help! :)

krakig · Accepted Answer · 2016-04-11 14:17:53Z

2

MarcoS answer is the correct one, I'll just add a more detailed description :

app.use(express.static(path.join(__dirname, 'public'))); //this line enables the static serving in the public directory

your public directory could be the following :

public 
|_css
|_js
|_images
  |_logo.png

Then, if you want to get an image :

http://localhost:3000/images/logo.png

And if you want to show it in your html page :

<img id="logo" src="/images/logo.png"/>

answered Apr 11, 2016 at 14:17

krakig

1,5651 gold badge19 silver badges36 bronze badges

Collectives™ on Stack Overflow

Serving Angular app using Express

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related