

These errors, however, were not as helpful as the error I found in the Heroku logs: FATAL:no pg_hba.conf entry for host. The main errors that came up when my app was hosted on Heroku were: GET 503 (Service Unavailable)Īnd Unexpected token < in JSON at position 0 Though I tried to follow everything to a T, when I finally deployed my own version to Heroku, I still encountered some issues. The second follows up with how to deploy to Heroku. The first goes over building the actual project, which was a basic CRUD Todo app. I actually went through two tutorials for this basic PERN stack project. Speaking of which, I also learned more about using environment variables, including that the NODE_ENV environment variable comes from Express: const pool = new Pool( _ENV = "production" ? proConfig : devConfig )

Some behind-the-scenes work takes place with the Heroku Postgres addon, such as the inclusion of a config variable DATABASE_URL that will be used when the app is in production. Using Postgres & Heroku for Development and Production Given this was a full stack application Heroku needs access to a package.json file. I followed a freeCodeCamp tutorial on the PERN stack - which stands for Postgres Express React & Node – and managed to host on Heroku a simple CRUD Todo app.Īlthough there were a few issues along the way, especially during deployment, I came out of the tutorial with some new knowledge: The structure of the application matters when deploying to Heroku. Blog ← back to all posts What I Learned Building My First PERN Stack App February 13, 2021Ī couple of weekends ago, I finally completed and deployed successfully my first PERN Stack app.
