custom paths to static files with create-react-app?

Question

I've been working on a Django-React app for some time and finally got it pushed to Heroku today. I used a technique I saw in a DjangoCon-talk to serve my SPA from the Django Template view. I build the react-app manually and then target the index.html. I'm also using AWS S3 to store my static-files, and here is where my I'm stuck.

When I push to Heroku, the collectstatic will add my static files to AWS. However, the only way for me to access those static files is if I push the app, copy the static urls from AWS, paste them in the stylesheet/script-tags in my index.html and then push again.

Is there a way to dynamically create these when running npm run build?

Something like https://my-bucket.s3.amazonaws.com/static/js/{my_js_file}.chunk.js?

If this is impossible, is there any other solutions for this? Tips will be greatly appreciated.

user_5923833 · Answer

I went around this problem by catching all paths that start with "static" and redirecting them to the bucket.

The following are in my urls.py to redirect paths with "static" and turn the rest over to react. You can add your api address etc. for other cases:

urlpatterns += [
    re_path('^static', redirect_static),
    re_path('.*', render_react),
]

and the following is the redirect_static function/view:

def redirect_static(request):
    return redirect(f"https://{request.path}")

custom paths to static files with create-react-app?

1 Answers