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.

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.

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.