With express.js can I access static files from outside my root directory?

Question

I have an express app that I'm going to use as a proxy that traps some requests made from an app written in Angular. The Angular app already exists and has a build configuration that I don't want to alter.

I want to manage my Angular and Express apps in parallel file trees e.g.:

Angular app is at the following path /src/angularapp/images/img1.gif

/src/expressapp/app.js

Can I access the static resources from the inside of the Angular app from a parallel file tree that contains my Express.js app? I have tried a few times but find it very hard to configure this correctly so I'm wondering if there is something preventing this.

Answer 1

I posted this because I was searching for an answer and couldn't find one. On the face of it this must be possible, but I had quite a lot of difficulty configuring it correctly.

In the end, I found the following worked fine, but quite subtle syntax differences caused things not to work as expected.

The simple model of having a static directory inside the express root is easy

app.use (express.static( './public'));

suppose my static images are at

/root/expressapp/public/images 

I can retrieve images with http://localhost/images/image.png

You also see the form

app.use ( express.static(__dirname + '/public'));

This exchanges the relative path of the first example for a fully qualified path.

Suppose I want to retrieve an image from the parallel directory in the angular app. In this case a relative path does as I expected

app.use( express.static('../angularapp/images')); 

Now I can access the images in the angular app as

http://localhost/image1.gif 

I can also alias directories in the parallel tree thus

app.use ('/fbsite', express.static( '../angularapp/images'));

and access with

http://localhost/angularsite/image1.gif

I can also use a fully qualified path, but if you want to do this you need to add a leading slash to the path as __dirname does not have a trailing slash

app.use('/angularimages', express.static( __dirname + '/../angularapp/images'));

And access this with

http://localhost/angularimages/image1.gif

Careful attention to path construction is required, but with a little practice you can organise access to resources without needing to compose both an express app and front end code in a single file tree. This can sometimes simplify refactoring complex builds and enhance the modularity of your solution.

In my case I anticipate evolving from the Angular-js front end to one involving React.js and this approach of parallel file trees can enhance refactoring as it isolates complicated build dependencies in each subpart of a system.

Answer 2

I had to use path.join() to make it work. For your example:

app.use(express.static(path.join(__dirname, '/../angularapp/images')))