Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible to serve Static files with create-react-app from public folder?

Basically I made a (relatively) simple app for a client. The app works and all but they keep asking for changes to the data.

Given the originally anticipated simplicity of the app and the fact it held static data, i did not link it to any back end.ll the data lives in a local static file with an object holding the data.

The problem is that fle gets bundled into the buld, so if i want to just change some static data without having to rbuild, i can't!

I have assets that my data file can access inside the public folder, and those are working fine. I was trying to achieve the same idea with a js file.

I canot import from outside the /src folder.

Is there a way i can access static data from the static folder that gets added on build somehow?

like image 858
xunux Avatar asked Oct 26 '18 18:10

xunux


People also ask

Where do you keep static files in React?

Yes, you can place assets in the static folder. You can reference the path in index. html with %PUBLIC_URL%/path/resource . You can use process.

How do I reference a public folder in React?

To reference assets in the public folder, you need to use an environment variable called PUBLIC_URL . Only files inside the public folder will be accessible by %PUBLIC_URL% prefix.

Can a React app be static?

A note before we begin: because the rendering all happens on the client side (unless you're using server-side rendering), React is technically “static” as far as your web server is concerned. The files that you host on your web server don't change in response to requests like PHP would.


1 Answers

Yes, you can place assets in the static folder.

Docs: Using the Public Folder

  • You can reference the path in index.html with %PUBLIC_URL%/path/resource.
  • You can use process.env.PUBLIC_URL + '/path/resource' in javascript code.

Both of these approaches are replaced at build time for your final build.

If these are javascript assets, the build will not be aware of them. You need to structure it as an external javascript library and store them in a global variable that you can reference within your code. Then you can load that javascript library in your index.html

like image 171
Steve Buzonas Avatar answered Sep 20 '22 11:09

Steve Buzonas