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?
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.
{
"serve-react": {
"enabled": true
}
}
'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"
]
}
}