Express and Apache - ENOENT on callback

Question

I'm trying to run a React webapp I made on an Apache server using Express. The app is using routes on the front-end (using hashHistory). Everythinbg works a charm locally. It all seems a bit more problematic on my production server, with my authentication library (Auth0) trying to make a call back to one of the front-end routes that throws a 404 with the following error:

Error: ENOENT: no such file or directory, stat '/dist/index.html'
at Error (native)

My virtual host entry is as follows:

    <VirtualHost *:80>
        # The ServerName directive sets the request scheme, hostname and port that
        # the server uses to identify itself. This is used when creating
        # redirection URLs. In the context of virtual hosts, the ServerName
        # specifies what hostname must appear in the request's Host: header to
        # match this virtual host. For the default virtual host (this file) this
        # value is not decisive as it is used as a last resort host regardless.
        # However, you must set it for any further virtual host explicitly.
        #ServerName www.example.com

        ServerAdmin admin@domain.com
        ServerName domain.com
        DocumentRoot /var/www/html/folder

        # Available loglevels: trace8, ..., trace1, debug, info, notice, warn,
        # error, crit, alert, emerg.
        # It is also possible to configure the loglevel for particular
        # modules, e.g.
        #LogLevel info ssl:warn

        ProxyRequests Off
        ProxyPreserveHost On

        ProxyVia Full
        <Proxy *>
                Require all granted
        </Proxy>

        <Location /*>
                ProxyPass http://127.0.0.1:9000
                ProxyPassReverse http://127.0.0.1:9000
        </Location>

        ErrorLog ${APACHE_LOG_DIR}/error.log
        CustomLog ${APACHE_LOG_DIR}/access.log combined

        # For most configuration files from conf-available/, which are
        # enabled or disabled at a global level, it is possible to
        # include a line for only one particular virtual host. For example the
        # following line enables the CGI configuration for this host only
        # after it has been globally disabled with "a2disconf".
        #Include conf-available/serve-cgi-bin.conf
</VirtualHost>

# vim: syntax=apache ts=4 sw=4 sts=4 sr noet

<Directory /var/www/>
            Options Indexes FollowSymLinks MultiViews
            # changed from None to FileInfo
            AllowOverride FileInfo
            Order allow,deny
            allow from all
    </Directory>

This is the directory structure in place:

.
├── dist
│   ├── 22163591c40fdf91545d26bca737a727.png
│   ├── 448c34a56d699c29117adc64c43affeb.woff2
│   ├── 89889688147bd7575d6327160d64e760.svg
│   ├── e18bbf611f2a2e43afc071aa2f4e1512.ttf
│   ├── f4769f9bdb7466be65088239c12046d1.eot
│   ├── fa2772327f55d8198301fdb8bcfc8158.woff
│   ├── index.html
│   ├── nb-utm-tagging-tool.1.0.0.css
│   └── nb-utm-tagging-tool.1.0.0.js
└── serve.js

And this is my Express server:

    var express = require('express')
    var app = express()

    var path = require('path');

    app.use(express.static('dist'))

    app.get('*', function(req, res) {
      res.sendFile(path.resolve(__dirname, 'dist/index.html'));
    });

    app.listen(9000, function () {
      console.log('Example app listening on port 9000!')
    })

When I launch the app, there's a call to the Auth0 API to try to authenticate the user but it fails with the above error message.

I should add that while /login is unavailable, /#/login does indeed get you somewhere. Not sure why or what it means.

Not sure what I'm doing wrong. Anyone able to help?

Can you show us the full directory structure and the URL/address you're trying to access? — GPX, Apr 03 '17 at 10:11
Darn, I've never player with React, but I suspect your trouble is there. Go have a look here: http://stackoverflow.com/questions/25086832/how-to-stop-in-browser-with-react-router — Pierre R-A, Apr 03 '17 at 10:55

score 1 · Answer 1 · edited May 23 '17 at 12:17

Solved this thanks to @pierre-r-a's suggestion.

I read this, which is a great guide for what I was trying to do: React-router urls don't work when refreshing or writting manually

I simply added this to my config file for the virtual host and it's all smooth now.

<Location /login>
            ProxyPass http://127.0.0.1:9000
            ProxyPassReverse http://127.0.0.1:9000
</Location>

Express and Apache - ENOENT on callback

1 Answers1