1

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?
Improve this question
7
  • 2
    1. Yes, You can get the final compiled JS file after build. If you are using create-react-app you can just run npm run-script build to build the app. It will give you a folder with final HTML and JS files.You can host it on a server. As I understood This is what you are looking for ? Commented Nov 2, 2018 at 3:19
  • Maybe i didn't understand you well but i guess that you want to serve that JS file within your Slim 3code-base as a static asset or something, for example on the /UI route, so that you don't have to host the front-end separately ? is this is case ? I haven't tried Slim before, but i've used Laravel, Laravel has support for VueJS out of the box you can checkout how Laravel does that with Vue maybe you will figure out something. Commented Nov 2, 2018 at 4:37
  • check this repo out you might find something useful Commented Nov 2, 2018 at 4:44
  • @Isuru Abeywardana, Yes I am using create-react-app and I have my app built as well. I also have it hosted with the rest of the app. I am looking for a slim 3 specific solution and the answer I need is how do I tell my slim route "/" to render that resource which is let say residing at app/build/app.min.js ? Commented Nov 2, 2018 at 8:17
  • @Mohdule, Yes that's exactly what I am looking for and I will check out how laravel does it. I hope it does the trick for me. Meanwhile if you are having any updates, please let me know. Commented Nov 2, 2018 at 8:19

3 Answers 3

Reset to default
2

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
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

I understand and I have done it quite similarly. The answer I am looking for is how do I make my HomeController in it's index method, which is triggered when a user hits "/" in their browser, to serve that "/build/app.min.js" as you have mentioned? I would love some php code preferably slim 3. Anyway, thank you for your answer.
0

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,

Improve this answer

4 Comments

Yes, that's how I have done it. All the routes are working fine. But I still need to provide an entry point to my react UI after which all API will just work as you have mentioned. Could you please provide me a code sample of a HomeController index method where you are serving an entry to a UI? Thank you.
Where have you deployed your react app? The entry point depends on where you have deployed it. Is it in localhost or in cloud?
The app isn't technically live yet but I want to deploy everything to a standard hosting with a cPanel. That's why I would need to keep my react.js built resource file along with rest of the backend in some separate folder. The folder from where I would like to to render that react.js resource when browsers hit home route. I know it would've been far easier if both the front and the backend were hosted separately that way there wouldn't be a need for an initial entry to app's UI which again is that final built JS resource.
Upload all your build files in the website root folder, After that you can access the site via http://your-site.com The webserver will automatically pick up the index html file
0

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.

Improve this answer

1 Comment

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

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.