Thanks for these posts. Using these, I was finally able to figure out how to get Django and my create-react-app frontend working together from the same repo. One tip, using a multi-stage build for the production Dockerfile saves you from having to install Node in the container. This is what I have at the top of mine:
FROM node:lts as build-deps
WORKDIR /frontend
COPY ./frontend/package.json ./frontend/yarn.lock ./
RUN yarn
COPY ./frontend /frontend
RUN yarn build
FROM python:3.6
...
Multi-stage builds are great. I did that for a similar project to this but one that dockerizes an express + create-react-app application: github.com/mrcoles/node-react-dock...
# Setup and build the client
FROM node:9.4.0-alpine as client
WORKDIR /usr/app/client/
COPY client/package*.json ./
RUN npm install -qy
COPY client/ ./
RUN npm run build
# Setup the server
FROM node:9.4.0-alpine
WORKDIR /usr/app/
COPY --from=client /usr/app/client/build/ ./client/build/
WORKDIR /usr/app/server/
COPY server/package*.json ./
RUN npm install -qy
COPY server/ ./
ENV PORT 8000
EXPOSE 8000
CMD ["npm", "start"]
Thank you for the document for deployment. I followed your guide and almost completed it. But I got this error in the end. I wonder you may have gone through it before; do you have any ideas about what's wrong with it? I did 'heroku stack:set container'. Does this create a conflict?
$ git push heroku master
remote: Or change your stack by running: 'heroku stack:set heroku-18'
remote: Verifying deploy...
remote:
remote: ! Push rejected to vast-escarpment-xxxx.
remote:
To https://git.heroku.com/vast-escarpment-xxxx.git
! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/vast-escarpment-xxxx.git'
If I switch to heroku-18, heroku doesn't recognize what lang to be used.
remote: ! No default language could be detected for this app.
remote: HINT: This occurs when Heroku cannot detect the buildpack to use for this application automatically.
remote: See https://devcenter.heroku.com/articles/buildpacks
remote:
remote: ! Push failed
remote: Verifying deploy...
remote:
remote: ! Push rejected to vast-escarpment-xxxx.
remote:
To https://git.heroku.com/vast-escarpment-xxxx.git
! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/vast-escarpment-xxxx.git'
Your two cents will help me out.
I look forward to your feedback~
Best
I narrowed down to the more specific issue. Do you happen to know what key is it expecting? Is it SECRET_KEY? I set it as an environment variable in the heroku setting.
When I push to the heroku git repository, heroku.yml is loaded first, isn't it? I wonder what key is included where...
Hope my question/issue is explanatory...
MacBook-Pro$ git push heroku master
Enumerating objects: 20, done.
Counting objects: 100% (20/20), done.
Delta compression using up to 4 threads
Compressing objects: 100% (11/11), done.
Writing objects: 100% (14/14), 2.27 KiB | 2.27 MiB/s, done.
Total 14 (delta 5), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote: === Fetching app code
remote:
remote: =!= Build failed due to an error:
remote:
remote: =!= validate step: error converting YAML to JSON: yaml: line 3: did not find expected key
remote:
remote: If this persists, please contact us at https://help.heroku.com/.
remote: Verifying deploy...
remote:
remote: ! Push rejected to vast-escarpment-xxxx.
remote:
To https://git.heroku.com/vast-escarpment-xxxx.git
! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/vast-escarpment-xxxx.git'
Based on the message: validate step: error converting YAML to JSON: yaml: line 3: did not find expected key
I'm guessing that your heroku.yml file is invalid, and the parser isn't able to work out the necessary key/value pairs. Check the first few lines of heroku.yml to make sure everything has the correct syntax. If you're using the exact same heroku.yml from my repo, then my code might be out of date.
Thank you so much for your reply, Graig!
It was about an indent error. Now, I have another issue.
Is it about a space issue on the Dyno? or an installation error? It seems relevant to a kind of generic troubleshoot... but if you could look at it and give me your first thought, it will be helpful. Even if not, it will be OK.
Thank you and I look forward to your feedback.
Best,
remote: After this operation, 30.4 MB of additional disk space will be used.
remote: Do you want to continue? [Y/n] Abort.
remote: The command '/bin/sh -c apt-get -y install curl && curl -sL https://deb.nodesource.com/setup_8.x | bash && apt-get install nodejs && curl -o- -L https://yarnpkg.com/install.sh | bash' returned a non-zero code: 1
remote:
remote: Verifying deploy...
remote:
remote: ! Push rejected to vast-escarpment-xxxx.
remote:
To https://git.heroku.com/vast-escarpment-xxxx.git
! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/vast-escarpment-xxxx.git'
@ Craig, your code only runs Python, not React in the same container?
Nor is there an 'npm start' in your heroku .yml file. How are you running the React code?
Instead of running a separate Webpack server to send the React code to the browser, we build the React code into an optimised code bundle in the Dockerfile. The Django server can then send the React code files to the browser via WhiteNoise. So, we only need the one container/process for the Django server.
Thanks for these posts. Using these, I was finally able to figure out how to get Django and my
create-react-appfrontend working together from the same repo. One tip, using a multi-stage build for the production Dockerfile saves you from having to install Node in the container. This is what I have at the top of mine:Then where you copy in the files, I have this:
This helps keep the Docker image for production as small as you can.
Multi-stage builds are great. I did that for a similar project to this but one that dockerizes an express + create-react-app application: github.com/mrcoles/node-react-dock...
Hi Craig
Thank you for the document for deployment. I followed your guide and almost completed it. But I got this error in the end. I wonder you may have gone through it before; do you have any ideas about what's wrong with it? I did 'heroku stack:set container'. Does this create a conflict?
If I switch to heroku-18, heroku doesn't recognize what lang to be used.
Your two cents will help me out.
I look forward to your feedback~
Best
I narrowed down to the more specific issue. Do you happen to know what key is it expecting? Is it SECRET_KEY? I set it as an environment variable in the heroku setting.
When I push to the heroku git repository, heroku.yml is loaded first, isn't it? I wonder what key is included where...
Hope my question/issue is explanatory...
Based on the message:
validate step: error converting YAML to JSON: yaml: line 3: did not find expected keyI'm guessing that your
heroku.ymlfile is invalid, and the parser isn't able to work out the necessary key/value pairs. Check the first few lines ofheroku.ymlto make sure everything has the correct syntax. If you're using the exact sameheroku.ymlfrom my repo, then my code might be out of date.Thank you so much for your reply, Graig!
It was about an indent error. Now, I have another issue.
Is it about a space issue on the Dyno? or an installation error? It seems relevant to a kind of generic troubleshoot... but if you could look at it and give me your first thought, it will be helpful. Even if not, it will be OK.
Thank you and I look forward to your feedback.
Best,
I figured it out. V8 of nodejs has been deprecated. I changed the version in Dockerfile
into
I hope this will help others who may give it a try.
Most of all, thank you for your posting and feedback to my questions, Craig!
@ Craig, your code only runs Python, not React in the same container?
Nor is there an 'npm start' in your heroku .yml file. How are you running the React code?
Instead of running a separate Webpack server to send the React code to the browser, we build the React code into an optimised code bundle in the
Dockerfile. The Django server can then send the React code files to the browser via WhiteNoise. So, we only need the one container/process for the Django server.With some tweaks I have successfully deployed this on Azure. Thanks Craig.
That sounds amazing. I'll try it out.