Managing static files Separately For Media Uploads and Separate for React Build

I have a little problem with my current Static Files Config.

Current Settings.py

#...
GOOGLE_APPLICATION_CREDENTIALS = BASE_DIR / 'Cloud_Storage_Secrets/model-calling-323507-96957393f399.json'
STATIC_URL = '/static/'
MEDIA_URL = '/images/'

STATICFILES_DIRS = [
    BASE_DIR / 'static',
    BASE_DIR / 'build/static' #React Frontend Files
]

MEDIA_ROOT = BASE_DIR / 'static/images'
STATIC_ROOT = BASE_DIR / 'staticfiles'

GS_BUCKET_NAME = 'GS_BUCKET_NAME'

STATICFILES_STORAGE = 'storages.backends.gcloud.GoogleCloudStorage'
GS_CREDENTIALS = service_account.Credentials.from_service_account_file(
    GOOGLE_APPLICATION_CREDENTIALS
)
#...

Now the problem is that React frontend Build is also considered as static files when Django serves these files. Locally it works fine after creating a build from the npm run build command manually. But when I push this in production with two separate engines One Node.js for React and the other is Python for Django app on Heroku, then Django tries to get Build files from GS_BUCKET as configured for Media files and static files. So frontend build files are not picked by Django.

So I’m trying to make two configurations. Google Cloud Storage for just media files but Static Files should work as default bypassing Google Cloud Storage.

So How to make it possible. Please suggest to me any method to make them separate. Or how to Bypass Google Cloud Storage Config for just Media Files. Thanks!

If you need more clarification please comment it out then I’ll add more details as well.

Answer

Just found the solution. It was quite easy, but it took me a lot of time to have this idea configuring this way. Now I’m using Whitenoise to serve all static files coming from React.js Frontend build and also for the Django as well. But Google Cloud Storage is just for the Media Uploads.

This is updated settings.py

#...
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.1/howto/static-files/
GOOGLE_APPLICATION_CREDENTIALS = BASE_DIR / 'Cloud_Storage_Secrets/model-calling-323507-96957393f399.json'

STATIC_URL = '/static/'
STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'
STATIC_ROOT = BASE_DIR / 'staticfiles'

MEDIA_URL = '/images/'
STATICFILES_DIRS = [
    BASE_DIR / 'static',
    BASE_DIR / 'build/static'
]

MEDIA_ROOT = BASE_DIR / 'images'
GS_BUCKET_NAME = 'buket-name'
DEFAULT_FILE_STORAGE = 'storages.backends.gcloud.GoogleCloudStorage'
# STATICFILES_STORAGE = 'storages.backends.gcloud.GoogleCloudStorage'
GS_CREDENTIALS = service_account.Credentials.from_service_account_file(
    GOOGLE_APPLICATION_CREDENTIALS
)
#...

You can check out the live running mock site with this config. on. https://naturalmedicineclinic.herokuapp.com/