CODEWITHSUNDEEP
phpreactjsrest
zia-khan
zia-khan

Reputation: 71

How to integrate a react frontend and a separate php REST API backend

I have built a website. The front and back end are COMPLETELY separate. The front end is all REACT.JS and the back is a REST API service written in php with slim 3. The entire communication between the front end and the back end is through JSON with react consuming API routes and also the routes are JWT protected.

When I'm deploying the app to the production,I can't figure out that how can I serve an entry point to my REACT front end from my server which is running the slim 3 REST back end. I understand that if it was a typical MVC, I could render views through a templating engine such as Twig.

After building my REACT front end, the entire list of components gets compiled to a single JavaScript resource that essentially acts as an entry point to the front end.

  1. Is there a way that I can take this final compiled JS resource and present it to the browser on an API route( Eg: '/') so that an entry can be provided to my app frontend?
  2. If not, then what should I do with this compiled JS resource?

Upvotes: 1

Views: 3787

Answers (3)

Logic Realm
Logic Realm

Reputation: 1

You should put your api in the public folder. If your api doesn't any private work. Or you need to set up a seperate partion or subdomain so that you can access your api through your react app. And also put your api url in the environment variable.

Upvotes: 0

kiranvj
kiranvj

Reputation: 34107

Lot of my apps are reactjs frontend and php backend. I call service via fetch or axios

I have an API url constants config file.

eg: api-paths.js

export const GET_USERS = "http://somesite.com/api/get-users/"

in react component, I do this.

import { GET_USERS } from './api-paths.js';

in 

ComponentDidMount() {
   fetch(GET_USERS, ....... );
}

And regarding your question, do a production build (npm run build if using create-react-app) and deploy all the frontend files along with php files and all calls to server should work fine,

Upvotes: 0

Thierry Parent
Thierry Parent

Reputation: 27

If you want to have a completely separated architecture, the root endpoint should point to your HTML (server rewrite if needed), which will then load the ReactJS aggregated file from "/build/app.min.js". Your API should then be exposed to the "/api" endpoint.

Here is my recommended server architecture

/www
    /public (server should point "^\/(?!api\/)" (anything that does not start by "/api/") requests here, index as index.html)
        /index.html
        /build
            /app.js
            /app.min.js
        /assets
    /api (server should point "^\/api/" (anything that begins by "/api/") requests here, rewriting to point to the index.php file)
        /index.php
        /vendor
            /slim

Upvotes: 2

Related Questions