Why doesn't my React-Django app detect static files?

Question

I have created a working React + Django REST project and it works fine on my development machine. I have used the following method to make it work on my CentOS 7 server.

I created the build directory using npm run build and copied that to the Django project root folder.
I added the build directory on TEMPLATES list in Django settings to identify the index.html file.
I added build/static folder in STATICFILES_DIRS.
I added url(r'^.*', TemplateView.as_view(template_name='index.html')), line to the root URLS file to capture all url patterns and load the index file in build folder that contains the React app.
I run manage.py collectstatic to create a staticfiles folder with all static files.
I added the staticfiles folder to the Nginx conf file like following:

location /static/ { root /home/michel/project/staticfiles; }
I have restarted the nginx server.

I am using the Django server to load the index.html file and I expect that the staticfiles folder will contain necessary static files to load my React app.

However, when I visit www.mydomain.com it loads the index.html file, but does NOT load the React app on <div id='root'></div>. I know this because the footer of the index is shown, but the css for styling that footer is also not working.

I am guessing that I have a problem of making the static files being detected. Any solution?

EDIT Here is the code that links my React app to the index.html file.

import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import registerServiceWorker from './registerServiceWorker'; ReactDOM.render(<App />, document.getElementById('root')); registerServiceWorker();

P.S. It is automatically generated by the create-react-app command.

@DmitriiG. The TemplateView is just that one line I use on urls file. That loads the index file. I have updated the question with the index file <head> tag and codes contained within it. — MiniGunnR
– MiniGunnR, Commented Jul 4, 2018 at 13:58
it doesn't make any sense to me. Where is the code where you load the react app? — Dmitrii G.
– Dmitrii G., Commented Jul 4, 2018 at 14:00
I used create-react-app to create my frontend. So the default code to load the app onto a div with id root is used to load my app to that div. Mind it, when I run the server with gunicorn bind ... for checking Gunicorn, the app works perfectly fine. — MiniGunnR
– MiniGunnR, Commented Jul 4, 2018 at 14:23
Do you actually need help? I've asked you two times already to post the code where you link your react javascript application code into your index.html file with django static filepaths — Dmitrii G.
– Dmitrii G., Commented Jul 4, 2018 at 14:31

miknik · Accepted Answer · 2018-07-04 18:55:14Z

3

Its probably because you don't understand the Nginx root directive.

This:

location /static/ { root /home/michel/project/staticfiles; }

Means if I request www.yourwebsite.com/static/style.css then Nginx is going to expect that file location to be

/home/michel/project/staticfiles/static/style.css not

/home/michel/project/staticfiles/style.css

answered Jul 4, 2018 at 18:55

miknik

5,9671 gold badge14 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

MiniGunnR Over a year ago

I will try to move all my static files from staticfiles to static folder and get back. Thanks!

MiniGunnR Over a year ago

Thanks for the help sir. I've solved my problem. However, I have one more question. I've always made staticfiles my folder for collectstatic to 'collect' all static files and I don't want to change that to work with React. Is there a way that I can make Nginx read static files from a folder of my choosing instead of static by default?

Dmitrii G. Over a year ago

oh so there was his problem :). @MiniGunnR just write the path you want in nginx config: location /staticfiles { root /home/michel/project; }

miknik Over a year ago

Or change root /home/michel/project/staticfiles to alias /home/michel/project/staticfiles

MiniGunnR Over a year ago

Thanks. Now I get it.

Collectives™ on Stack Overflow

Why doesn't my React-Django app detect static files?

1 Answer 1

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Related