Hosting reactjs app with parse server

Question

I am trying to host a reactjs app in thesame site as a parse server. I'm using the following

// Serve static assets
app.use(express.static(path.resolve(__dirname, '..', 'build')));

// Always return the main index.html, so react-router render the route in the client
app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, '..', 'build', 'index.html'));
});

along with the regular parse server express configurations

// Serve the Parse API on the /parse URL prefix
var mountPath = process.env.PARSE_MOUNT || '/parse'
app.use(mountPath, api)

But its not working. I will be very grateful if i can be pointed in the right direction.

PS: There is no error, i am just getting a blank page.

score 0 · Answer 1 · answered Feb 06 '18 at 12:25

Hard to answer without more info, but here is what I would check:

Open dev tools to see if you're getting an error on the blank page. You may be loading unbuilt code, with e.g. import statements intact that the browser sees as a syntax error
If you're using a reverse proxy in front of express (e.g. nginx), check its configuration.
Make sure express knows to load index.html in response to /. I don't use express for serving static files (I do that directly in nginx), so not familiar with the conventions here.

I use nginx to serve the static client-build (webpack bundle), and then I run parse-server mounted as an express app, and parse-dashboard as its own app. nginx, parse-server and parse-dashboard are each in their own docker container, all on the same docker network.

If it helps, here is the nginx file I use:

server {

    listen 80;
    server_name localhost;
    charset utf-8;
    client_max_body_size 200M;

    # Forward to parse-server docker container
    location /api/ {
        proxy_pass http://server:80/;
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-NginX-Proxy true;
        client_max_body_size 200M;
    }

    # Forward to parse-dashboard docker container
    location /parse-dashboard/ {
      include /etc/nginx/mime.types;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header X-NginX-Proxy true;
      proxy_pass http://parse-dashboard/parse-dashboard/;
      proxy_ssl_session_reuse off;
      proxy_set_header Host $http_host;
      proxy_redirect off;
    }

    # Serve static client build
    location / {
      alias /usr/clientbuild/;
      try_files $uri /index.html;
      gzip_static on;
      expires max;
      add_header Cache-Control public;
    }
}

And here is how I mount parse-server in express:

var express = require('express');
var ParseServer = require('parse-server').ParseServer;

/* Sample env keys:

    PARSE_SERVER_APPLICATION_ID=yourproduct

    # localhost is the address of parse-server from the perspective of itself
    PARSE_SERVER_URL=http://localhost/api/parse/

    # localhost:9595 is the public address of nginx
    PARSE_PUBLIC_SERVER_URL=http://localhost:9595/api/parse/

    # Note that nginx mount path is /api
    PARSE_SERVER_MOUNT_PATH=/api/parse

    PARSE_SERVER_CLOUD_CODE_MAIN=/usr/src/app/server/build/cloud.js

*/

var startParseServer = function() {

    const cfg = {
        databaseURI: process.env.PARSE_SERVER_DATABASE_URI,
        cloud: process.env.PARSE_SERVER_CLOUD_CODE_MAIN,
        appId: process.env.PARSE_SERVER_APPLICATION_ID,
        masterKey: process.env.PARSE_SERVER_MASTER_KEY,
        serverURL: process.env.PARSE_SERVER_URL,
        publicServerURL: process.env.PARSE_PUBLIC_SERVER_URL,
        mountPath: process.env.PARSE_SERVER_MOUNT_PATH,
        filesAdapter: s3adapter,
        fileKey: process.env.PARSE_SERVER_FILE_KEY,
        allowClientClassCreation: false,
        maxUploadSize: '200mb'
    }

    var api = new ParseServer(cfg);

    var app = express();
    app.set('trust proxy', (ip) => true)

    app.use('/', (req, res, next) => {

        // Static code in development runs from localhost:3000
        const {
            PARSE_SERVER_ALLOW_ORIGIN='http://localhost:3000'
        } = process.env

        res.header('Access-Control-Allow-Origin', PARSE_SERVER_ALLOW_ORIGIN);
        res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
        res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");

        next();
    });

    // Not sure if both these are necessary. Haven't messed with it.
    app.use('/parse', api);
    app.use('/api/parse', api);

    var port = process.env.PORT;
    app.listen(port, function() {
        console.log('Running on port ' + port.toString() + '.');
    });
};

startParseServer();

process.on('SIGINT', function() {
    console.log('Received SIGINT');
    process.exit(0);
});

process.on('SIGTERM', function() {
    console.log('Received SIGTERM');
    process.exit(0);
});

Hope that helps you.

Hosting reactjs app with parse server

1 Answers1