Heroku

I have a shared hosting subscription on a different platform (Versio) but it unfortunately it doesn't let me host a NodeJS application.

When learning about React, NextJS and Strapi for the sake of this project, I often sourced tutorials on DigitalOcean and I considered them for my platform as well. But they require my credit-card details to verify my account, but I am Dutch, and I don't really do credit-cards... That made it a pretty hard pass for me.

I have used Heroku before, for small college-node-projects and at the time I found it quite daunting. Mind you, back then I had virtually zero experience working with any sort of CLI.

Since then I have had to learn GIT, composer, managing databases and I helped setup auto-deployment on a LEMP-stack server.

This time around I had a better understanding of how to tackle the various bugs and issues thrown up by the console and eventually I managed to get it to work...

Deploying Strapi

This was surprisingly easy. I had tinkered away at the strapi code (I tried to replace the markdown-editor) but ultimately undone most of my changes. So the project I had to push to Heroku was pretty much a run-of-the-mill Strapi application and I simply followed along with the Strapi docs on how to deploy on Heroku.

I initially tried to deploy to Heroku via GitHub, but the connection widget failed me for some reason.

I installed the Postgres addon for Heroku for my database and set up the environment variables and everything up according to the instructions I found online. I mentioned that it was easy, but this is mostly because I got it all to 'just work' by simply following instructions.

Bit of a snag: Heroku uses a temporary filesystem. Which means I have to use an addon for uploading images as well. I have decided to deal with that later.

Deploying NextJS

I try to utilize Static Site Generation (SSG), featured by NextJS, as much as possible. Some of the initial problems I ran into had to do with my repository and package files not being configured correctly, but after that the issues were mainly about the build failing because of issues with SSG.

Two lockfiles

remote: -----> Build failed
remote:  !     Two different lockfiles found: package-lock.json and yarn.lock

Npm/yarn is one of the things I learning as I go along with this project. Apparantly this is a no-no. I didn't quite know how I had to fix this either as I haven't developed a preference for either yarn or npm yet.. Ultimately I chose npm, deleted the other files, reinstalled to be save, commited and tried pushing to heroku again. This didn't go 100% smoothly though.. I am still a bit of a novice at using GIT on the commandline and I kept

Connection to Strapi

remote: > Build error occurred
remote: FetchError: request to http://localhost:1337/api/articles failed, reason: connect ECONNREFUSED 127.0.0.1:1337

By the time I finally got a different error I was actually rather pleased by that. Also, this error immediately made sense to me, as it concerned something I had thought about before.

The NextJS website and the Strapi CMS are two separate applications that are both deployed on Heroku. My original plan was to use the 'live' Strapi application both locally and in production. That way I would always be working with the same data.

Unfortunately this is not possible. Like I mentioned before; Herokus' filesystem is temporary. This means I can't use Strapis' Content-Type Builder on the 'live' application.

I have to admit: I did find this annoying...

Back to the error...

I needed to use a different URL to connect to Strapi on Heroku than I did locally. Which meant environment variables. I have some experiences using .env files in PHP frameworks so I had a pretty good idea how to google the answer to this question.

It actually was pretty easy. NextJS let's you create a .env.local file and you can then just put stuff in there. For Heroku you can use heroku config:set to define variables.

For some reason I do not yet understand I had to prefix my variable with NEXT_PUBLIC_. With this prefix you can use the variable 'from anywhere' in your code. Since NextJS is effectively building a React application it makes sense that you don't want sensitive data to end up in that build. However I was only using this variable within the functions getStaticProps() and getStaticPaths() which make me feel it should've been fine to omit the prefix in my case.

After I added the variable to the environment I was able to call upon proces.env.NEXT_PUBLIC_MYSTRAPI in my code.

Heroku is very strict

remote: Failed to compile.
remote: 
remote: ./src/pages/blog/[slug].js
remote: 16:14  Error: Unknown property 'class' found, use 'className' instead  react/no-unknown-property
remote: 17:18  Error: Unknown property 'class' found, use 'className' instead  react/no-unknown-property

The error above is legitimately pointing out a mistake. I can't use 'class' in JSX, I shoud write 'className' instead. Some of the errors, like this one, give me the impression that the build process on Heroku is actually a lot less forgiving than the one I use locally, which, I guess, might be a good thing.

We are live!

All things considered, this website is now "live", it doesn't have a nice url yet, but 'oh well..' we'll see about that some other time.