I successfully deployed my Django project to Heroku. But I want to be able to automatically build React before deploying.
The React app is served through Django, so I have the bundled files of React in my templates and static folders of the Django app.
The project structure looks something like this:
react/
build/
components/
App.js
package.json
...
django/
templates/
static/
...
Procfile
requirements.txt
Pipfile
I have both the React and Django projects in the same repository and I want to run npm run build automatically before Django is deployed.
I set up the build script to move the bundled files from React to Django.
From what I've read, I need to add the NodeJS buildpack, but I don't know how to set it up to run before the Python buildpack.
Basically, the NodeJS process should just build my React app and then terminate. After that, the Python process should start up and deploy the Django project.
One solution to do this would be to use Docker and deploy that image to Heroku.
But, is there an easier way?
You can add indexed buildpacks in heroku. Take a look here for adding multiple buildpacks to your project.
I wrote a simple tutorial on how one can deploy a React + Django app to Heroku. You can take a look if you're interested. In your case, you only need the instructions for adding the buildpacks.
$ heroku buildpacks:add --index 1 heroku/nodejs
$ heroku buildpacks:add --index 2 heroku/python
You don't need to setup any extra commands to build the React app. Heroku automatically installs and runs the build script from your package.json file(If it's in the project root).
I found a way to do this.
I added the nodejs buildpack as the first one and then I created a package.json file in the root directory:
{
"name": "myapp",
"version": "1.0.0",
"scripts": {
"build": "cd react && npm install && npm run build"
},
"dependencies": {},
"devDependencies": {},
"cacheDirectories": [
"node_modules",
"react/node_modules"
]
}
Heroku is looking for a package.json in the root directory and automatically runs the build command.
Related
I am following this instruction to run my django project locally
https://devcenter.heroku.com/articles/getting-started-with-python#run-the-app-locally
When I type heroku local web, it says "[FAIL] No Procfile and no package.json file found in Current Directory - See run-foreman.js --help".
However, my project is a Django/python app and I don't have package.json.
But my project does have requirements.txt and Procfile in the root directory of my web application. What should I do?
Thanks
I deployed a create-react-app on GitHub Pages using a mix of these 2 tutorials (https://create-react-app.dev/docs/deployment & https://github.com/gitname/react-gh-pages). It's working just fine.
But this webpage is supposed to evolve regularly, I have some content to add.
Is there a way to modify the deployed app? How can I push the changes I would make in my local directory to gh-pages (production mode)? Do I need to run npm build again after my additions?
For the moment I have the development mode on master branch. I think it's the build mode on gh-pages, although I don't have any other branch.
Thank you for your help.
What I did to deploy:
Terminal
$ npm install --save gh-pages
$ git init
$ git remote add origin https://github.com/REMOTE
$ npm run deploy
Package.json
{
"homepage": "https://USER-PAGE.github.io/",
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -b master -d build",
},
"devDependencies": {
"gh-pages": "^2.1.1"
}
}
To modify the site just make the changes and then git add, commit and push like one would normally do to the required branch.
Then again run the command:
npm run deploy
I have a Django app that I managed to deploy with Heroku. My Procfile file only contains :
web: gunicorn omegapp3.wsgi --log-file -
So when I run heroku local it works.
But when I deploy with heroku push master, the console detects a Node app because the app has a package.json and then the build fails.
What I would like to do is the following :
run npm install to install gulp etc.
run gulp build.
Do you know how I can do that ?
According to the official documentation, you should add multiple buildpacks to your setup, rather than a single multi buildpack.
For example, if you wanted to deploy an app that uses a Nodejs package (i.e. grunt, gulp, etc) to do some setup on your app, you would run this from your command line:
heroku buildpacks:add --index 1 heroku/nodejs
The add command adds the Nodejs buildpack as an additional buildpack, rather than replacing your current buildpack. Note the --index 1. This specifies that the Nodejs buildpack is the first in the order of buildpacks. This is important because the final buildpack is the one used for actual process type. You can call heroku buildpacks from the command line to verify the buildpack setup. I run a Python app, so my heroku buildpacks looks like this:
=== your_app_name_here Buildpack URLs
1. heroku/nodejs
2. https://github.com/heroku/heroku-buildpack-python
Then, as stated by rocketer, you can place this in your package.json file to be run on deploy:
"scripts": {
"postinstall": "./node_modules/.bin/gulp build"
}
Solved by using $ heroku buildpacks:set https://github.com/heroku/heroku-buildpack-multi.git.
It allows to use node and python (you have to specify in a .buildpacks file).
In ordre to run gulp build, I added the following to my package.json :
"scripts": {
"postinstall": "./node_modules/.bin/gulp build"
}
I have an django project (RESTful API written using Django Rest Framework) which uses the Postgres database.
I have a local git repository of the project and also I have it on my github account, and I want to deploy the porject to heroku.
In the official heroku tutorials, they don't show anything about how to prepare your app to deployment - (requirements file, settings file, Proc File, maybe more stuff that I don't know - which I saw in different tutorials that you need to do).
At the moment I only have the django app without any added file.
My question is - what do I need to do to prepare my app to deployment to heroku? as I said at the moment I have a local git repository and its also on Github.
Thanks!
1) Create a file called Procfile (no extension) in your project root with the following inside:
web: gunicorn APP_NAME.wsgi (replace APP_NAME with your app's name).
2) Pip install gunicorn and dj-database-url
3) In your virtual env terminal, run pip freeze > requirements.txt in your project root (do this every time you pip install any new packages).
4) In your production settings file, add the following to make your database work on heroku:
import dj_database_url
DATABASES['default'] = dj_database_url.config()
Note: This will cause errors in your local environment, so make sure you have a prod.py settings file as well (ask if you need an explanation).
5) Add heroku to your git settings via git remote add heroku git#heroku.com:HEROKU_APP_NAME.git (replace HEROKU_APP_NAME with your Heroku app name).
6) Once you do git add --all, git commit -m "SOME MESSAGE HERE" and git push, you can do git push heroku master.
Im attempting to deploy a Django app using Heroku.
When I first ran
$ git push heroku master
My original requirements.txt had outdated dependencies and Django failed to deploy. After I edited my dependencies and attempted to deploy I noticed that Heroku is still attempting to install dependencies that I erased. Am I doing something wrong here?