score:2
Accepted answer
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.
- defaults.json
{
"serve-react": {
"enabled": true
}
}
- 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"
]
}
}
Source: stackoverflow.com
Related Query
- How to Deploy Strapi and React at one hosting?
- react context vs redux vs hooks, which one should consider and how each one is different
- how to share environment variables between react app and express js server hosting it as static site
- How to Deploy Django Rest Framework and React on AWS
- React/webpack - How can I host react app on one server and images/fonts on another server?
- How to make an electron react app, which has 2 windows - a general one and one for the Tray
- How does one type @connect correctly when using React and TypeScript?
- How to wrap 2 or more menu items to use them in one condition, using React and ant design?
- how to run my node application and react app in the same time with one command?
- How to create and deploy a React App properly?
- How can I deploy Node Js back-end and React Js front-end on server?
- React Microfronends: How do I pass authentication and other information from one Front end app to another Front end app?
- How could I combine Angular and React in one project
- How to deploy React app with docker and serve -s build
- How do I deploy a React app and a Rails API to Heroku?
- How to make React and Typescript to allow either base set of properties or an extended one
- I have a question about Cloud Firestore V9 and using React Js. In one of my docs, there is a map. How do I access this map?
- How to deploy two react apps to two different paths using firebase hosting
- React Hooks, useState related question. How to update one property of object and keep the rest
- How to get one elements to slide in while the other slides out, using react and material-ui?
- How to show only one active item at a time with react and material ui
- How to deploy React front end + Rails api backend with nginx, capistrano and passenger
- How to refresh the table data when one of the item has its valid till date and time has expired in React Js
- How to deploy Strapi backend and ReactJS frontend to a single Heroku app
- How does one deploy a React / Apollo GraphQl app to Heroku?
- How can I create a counter as components to use multiple times and create one button to reset all the counter in React JS?
- How to have two Secondary Actions in react material, One on left corner and one on right without affecting the behaviour of secondary action
- How to expand and collapse the table rows in plain react js. Show only one row if the description of the row is multiple and show the expand button
- How to deploy a react app to a website once and forget about it
- React + Leaflet: how to rotate an array of markers and Rectangle vectors around (i) its center and (ii) one of its corners
More Query from same tag
- "Cannot read property 'map' of undefined" ReactJS and Lodash array
- Props values are not updating in webpack server React js
- Testing strategy on Relay + React
- Typescript "padStart" error when trying to push an object to an array
- Do I need to clearTimeout in react function?
- TypeError: Cannot read property 'map' of undefined on react BeatifulDnD
- Animations and first load are lags because of css @fontface
- Socket IO works fine on local machine but doesn't work on Heroku
- state to hide show component, no value in state
- react setstate not working when pushing elements to array
- How to display an image saved as blob in React
- How can I get Firebase authentication on initialization with React.js?
- How to validate bootstrap form?
- What's the better way to change state on every render for number of times
- spring security + oauth2 + reactjs + restful http client
- Changing primary color in Bootstrap is not working?
- Center component vertically and horizontally in 'Antd' library not working
- How to handle mouse event in stateless component in React
- Firebase: Error (auth/admin-restricted-operation)
- Using webpack as build tool for React npm package
- Simple password-protection for React app on Heroku
- ReactJS Unexpected block statement surrounding arrow body
- Testing/mocking a service inside functional container in React/Jest
- How to bundle and reference a js file from node_modules using reactjs
- Tesseract.js with React: Tainted canvases may not be exported
- How to set default select of RadioGroup in Material-UI
- Get Height of document in React
- Data driven Tabs with Material UI React
- Type 'undefined' must have a '[Symbol.iterator]()' method that returns an iterator
- Apolloclient with more than 2 ApolloLinks