Using PHP backend with React Application

Question

I have a react app and I run npm run build to generate a build package that I upload to S3. let's say www.test.com/build/

but I have a PHP backend that should be responsible for serving the index.html (from www.test.com/index.html)

since there's no connection with the S3 bucket and the PHP app I don't know how to deal with the hashed names in the react app

I can't generate the build package without the hashes because I will lose the cache buster.

what are some good practices to work with react apps and backend apps. In this case is PHP but I think the problem should be the same with a NodeJS backend hosted in a different server.

I'm using AWS CodePipeline to build the react app (npm run build) and the php app (composer install)

Answer 1

PHP doesn't need to know about JS files with or without hashes. Your PHP server will be serving index.html file only. Your index.html file contains entry point javascript files.

<script type="text/javascript" src="/js/vendor.bundle.js"></script>
<script type="text/javascript" src="/js/index.js"></script>

When your PHP server serves index.html file, on client's browser it will load necessary react and other js code via chunk using vendor and index files(or whatever your file names are).

What if you need to use vendor.bundle.js and index.js with hashes?

Following modules will help you.

Module-1: https://www.npmjs.com/package/webpack-manifest-plugin this module will help you to keep track of hashed files generated.

Module-2: https://www.npmjs.com/package/html-replace-webpack-plugin Using this module you can replace you entry point files with hashes file names you get from module-1.