Amazon Web services elastic bean Django (Python) + ReactJS in production in Amazon Web Services, Elastic Bean, S3

 

Merging Django & React App Production

 

React App Scenario

1.    In the .env file

·        Add PUBLIC_URL = [s3 url]

This will create absolute path of the CSS and JS files in the index.html of the production build, by default it will be relative links.

S3 URL is the Amazon S3 Bucket URL

2.     Run npm run build at the root of the React app. This will create a production Build

Django App Scenario

1.     pip3 install django-storages (third party app for storage for Django in S3)

2.     Add the following in the settings.py

·         Debug = False

·         Add ‘'storages'’ in the INSTALLED_APPS

Mention the AWS OPTIONS

·         AWS_S3_REGION_NAME  = "us-east-1"

·         AWS_ACCESS_KEY_ID = "DXS6TUMYE4O3OR"

·         AWS_SECRET_ACCESS_KEY = "rcDeN6/Bxb8R01aRRviD2QP/a"

·         AWS_STORAGE_BUCKET_NAME  = 'lithific-s3-storage'

·         STATICFILES_DIRS = [

os.path.join(BASE_DIR, "superclass/build/static"),

]

·         STATICFILES_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'

o   STATIC_ROOT = 'https://lithific-s3-storage.s3.amazonaws.com/'

o   AWS_LOCATION = 'static'

o   STATIC_URL = f'https://{STATIC_ROOT}/{AWS_LOCATION}/'

3.      Create a build folder in any app, Copy paste the React production App build folder into this.

4.     In views.py of any app add

def root(request):

          return render(request, 'build/index.html', {})

def home_path(request, pathname):

          return render(request, 'build/index.html', {})

5.    In the urls.py of your app named as the same as the project_name (workspace)

Add the following in the url_patternns

·        path('', superclass_views.root, name = 'root'),

·       path('<str:pathname>', superclass_views.home_path, name = 'home_path')

 

6.     Run python3 manage.py collectstatic at the root of the Django project. This will upload all the static files into the S3 bucket mentioned in the settings.py

7.     Go to the GitMaster Folder in your local (the code to be pushed into Git & Production)

8.     Copy only the index.html in your build folder of your local Django App to the GitMaster

9.     Push the code & deploy the App.