I have created a React+Express application using the commands npx create-react-app client for React and npx express-generator api for the express backend. Both client and API are under the same folder application.
The react application is running on the port 3000 and I have changed the port of express app to use port 8000 in the /bin/wwww.
In the express application I have crated a route in routes/testAPI.js,
router.get("/", function(req, res, next) {
res.send(“API is working properly”);
});
And in app.js file I have used the route to handle request,
let testAPIRouter = require("./routes/testAPI");
app.use("/testAPI", testAPIRouter);
Now in the react application inside the App.js file I have called the API and updated the content of <p>{this.state.apiresponse}</p>.
App.js file,
class App extends React.Component{
constructor(props){
super(props);
this.state = {
apiResponse : "",
}
}
apiCall = () => {
fetch("http://localhost:8000/testAPI")
.then(res => res.text())
.then(res => this.setState({ apiResponse: res }));
}
componentWillMount = () => {
this.callAPI();
}
render(){
return(
<div>
<p>{this.state.apiResponse}</p>
</div>
)
}
}
My issue is to deploy this application on an apache server. As I'm running the express and react at different ports(3000 and 8000). I can build the react app using npm run build which will create static build files for react. But, how can I build the express app to use with react?
Is it so moving the express files to the server and always run the application there at port 8000?
I have successfully abled to run both at time using concurrent. I can run the application using npm run dev. But how to build the application and serve from apache?
Thanks in advance.