At the root of my project, I have a frontend
and backend
folder. Both folders contain a package.json
that list their dependencies. How do I tell Heroku to run npm install
on both folders when deploying the application? It seems like Heroku expects to have a single package.json
file by default. Do I have to do something with a Procfile? The Heroku documentation doesn't seem to tell much about my specific question.
Thanks for the help!
Deploying App to Heroku It is important to note that the frontend and backend portions of our app will be deployed to Heroku as separate apps.
In the Heroku GUI, within your app's dashboard, navigate to the Deploy tab and click the Deploy Branch button. After the app finishes building, click the View button to see your new full-stack app up-and-running.
js Backend on Heroku. Building applications locally is probably the easiest way to develop. But sometimes, when it comes to getting it on the Web, you have a lot to consider.
I just successfully completed this goal using static files created during a heroku postbuild step, as described in this blogpost. I have a React frontend (could be anything though) and Express API backend. Each process has its own port in dev, but deploying on Heroku uses just one total.
/frontend
)./api
-- the blogpost assumes the backend remains in the root directory -- either way is fine).Proxy API requests from the frontend to the backend by adding this line to /frontend/package.json
(replacing 5000 with your backend port):
"proxy": "http://localhost:5000",
Add the following to api/app.js
(or api/index.js
) in the backend (be sure the last part is AFTER you define the appropriate backend [or api] paths):
const path = require('path') // Serve static files from the React frontend app app.use(express.static(path.join(__dirname, '../frontend/build'))) // AFTER defining routes: Anything that doesn't match what's above, send back index.html; (the beginning slash ('/') in the string is important!) app.get('*', (req, res) => { res.sendFile(path.join(__dirname + '/../frontend/build/index.html')) })
/package.json
file with something like the following (note that using the concurrently package allows an easy way to run the whole app locally with npm run dev
, but only heroku-postbuild
is required here): "scripts": { "frontend": "cd frontend && npm start", "api": "cd api && nodemon app.js", "dev": "concurrently --kill-others-on-fail \"npm run api\" \"npm run frontend\"", "heroku-postbuild": "cd frontend && npm install && npm run build" },
/Procfile
has something like web: node api/app.js
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With