I have 3 folders in a Django web application. The folders are as follows: the folder that contains settings.py(project), the folder that contains models.py(application), and a folder that contains a front end react application created by create-react-app.
I would like to build the react front end, copy the build artifacts into a static folder and then run the django application on heroku, but they have made this process practically impossible with my current folder structure. The alternative is to flatten the react application out and have build, src, node_modules, packagejson etc etc etc all at the root of the project, but this seems really bad.
Some config in settings.py:
STATICFILES_DIRS = (
os.path.join(PROJECT_ROOT, 'static'),
os.path.join(BASE_DIR, 'front-end/build/static')
)
What I run locally inside front-end:
npm run build
What I'm returning from views:
def index(request):
return HttpResponse(loader.get_template('build/index.html').render())
#above line returns index.html that is generated by npm run build
How do I deploy the project described above to Heroku so it can find all static resources?
You can use a symlink link that puts your react's build output into your django directory
For example if your directory structure is like this:
~/project_root/
~/project_root/django/static/
~/project_root/my_react_app/build
cd to ~/project_root/django/static/ and run
ln -s ../../my_react_app/build .
This will create ~/project_root/django/static/build that points to ~/project_root/my_react_app/build