How to Serve a React App with Django on Elastic Beanstalk? - node.js

Question

I used to have my app on Heroku and the way it worked there was that I had 2 buildpacks. One for NodeJS and one for Python. Heroku ran npm run build and then Django served the files from the build folder.
I use Code Pipeline on AWS to deploy a new version of my app every time there is a new push on my GitHub repository.
Since I couldn't figure out how to run npm run build in a python environment in EB, I had a workaround. I ran npm run build and pushed it to my repository (removed the build folder from .gitignore) and then Django served the files on EB.
However, this is not the best solution and I was wondering if anyone knows how to run npm run build the way Heroku can do it with their NodeJS buildpack for a python app on EB.

Answer 1

So I figured out one solution that worked for me.
Since I want to create the build version of my app on the server the way Heroku does it with the NodeJS buildpack, I had to create a command that installs node like this:
container_commands:
01_install_node:
command: "curl -sL https://rpm.nodesource.com/setup_12.x | sudo bash - && sudo yum install nodejs"
ignoreErrors: false
And then to create the build version of the react app on a Python Environment EB, I added the following command:
container_commands:
02_react:
command: "npm install && npm run build"
ignoreErrors: false
So of course, after the build version is created, you should collect static files, so here is how my working config file looked at the end:
option_settings:
aws:elasticbeanstalk:container:python:
WSGIPath: <project_name>/wsgi.py
aws:elasticbeanstalk:application:environment:
DJANGO_SETTINGS_MODULE: <project_name>.settings
aws:elasticbeanstalk:container:python:staticfiles:
/static/: staticfiles/
container_commands:
01_install_node:
command: "curl -sL https://rpm.nodesource.com/setup_12.x | sudo bash - && sudo yum install nodejs"
ignoreErrors: false
02_react:
command: "npm install && npm run build"
ignoreErrors: false
03_collectstatic:
command: "django-admin.py collectstatic --noinput"
Hope this helps anyone who encounters the same 🙂

Answer 2

I don't know exactly Python but I guess you can adapt for you case.
Elastic Beanstalk for Node.js platform use by default app.js, then server.js, and then npm start (in that order) to start your application.
You can change this behavior with configuration files. Below the steps to accomplish with Node.js:
Create the following file .ebextensions/<your-config-file-name>.config with the following content:
option_settings:
aws:elasticbeanstalk:container:nodejs:
NodeCommand: "npm run eb:prod"
Edit your package.json to create the eb:prod command. For instance:
"scripts": {
"start": "razzle start",
"build": "razzle build",
"test": "razzle test --env=jsdom",
"start:prod": "NODE_ENV=production node build/server.js",
"eb:prod": "npm run build && npm run start:prod"
}
You may faced permission denied errors during your build. To solve this problem you can create .npmrc file with the following content:
# Force npm to run node-gyp also as root
unsafe-perm=true
If you need more details, I wrote a blogpost about it: I deployed a server-side React app with AWS Elastic Beanstalk. Here’s what I learned.