4

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?

1 Answer 1

2

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"
    ]
  }
}
Sign up to request clarification or add additional context in comments.

7 Comments

Thanks for your reply. Is this an answer for deploy React and Strapi proejct at one url hosting?
Sorry, can you explain how to make folder structure of react and strapi for following your guide? Where should I put react project?
In the /public directory
I am using Strapi-Beta, is that code working on beta version?
Thanks, Great, It works well, I really appreciate to you. Thanks again.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.