Search code examples
reactjsexpressherokudevopsstrapi

How to Deploy Strapi and React at one hosting?


everyone. I just deployed Strapi and React project. But I hosted individual, so that seems to be very strange. How to I do deploy at one hosting. I can't find any guides about that.

Like this:

Strapi: https://nuclear-leagcy.herokuapp.com/admin https://nuclear-leagcy.herokuapp.com/graphql

React https://nuclear-leagcy.herokuapp.com

I think I have to define server.js with express. But I don't have any ideas about that now.

Additions. I want to use graphql in production, but want to disable playground interface in production so others can't to do it.

How can I do?


Solution

  • Using 3.0.0.beta.19.5 to deploy Strapi + React in the same server you need to do the following things.

    rootDir = means the root folder of the Strapi project.

    You need to create a new Middleware, rootDir/middlewares/serve-react, and this 2 files in there.

    1. defaults.json
    {
      "serve-react": {
        "enabled": true
      }
    }
    
    1. index.js
    'use strict';
    
    /**
     * Module dependencies
     */
    
    // Node.js core.
    const fs = require('fs');
    const path = require('path');
    const koaStatic = require('koa-static');
    
    /**
     * Serve react hook
     */
    
    module.exports = strapi => {
    
      return {
        /**
         * Initialize the hook
         */
    
        async initialize() {
          const {maxAge, path: publicPath} = strapi.config.middleware.settings.public;
          const staticDir = path.resolve(strapi.dir, publicPath || strapi.config.paths.static);
    
          strapi.router.get(
            '/*',
            async (ctx, next) => {
              const parse = path.parse(ctx.url);
              ctx.url = path.join(parse.dir, parse.base);
    
              await next();
            },
            koaStatic(staticDir, {
              maxage: maxAge,
              defer: false, // do not allow other middleware to serve content before this one
            })
          );
    
          // if no resource is matched by koa-static, just default to serve index file
          // useful for SPA routes
          strapi.router.get('*', ctx => {
            ctx.type = 'html';
            ctx.body = fs.createReadStream(path.join(staticDir + '/index.html'));
          });
        },
      };
    };
    

    Add the middleware just created in the chain. rootDir/config/middleware.json. Notice the "serve-react" at the end of the "after" property, is the only thing added in this case.

    {
      "timeout": 100,
      "load": {
        "before": [
          "responseTime",
          "logger",
          "cors",
          "responses",
          "gzip"
        ],
        "order": [
          "Define the middlewares' load order by putting their name in this array is the right order"
        ],
        "after": [
          "parser",
          "router",
          "serve-react"
        ]
      }
    }