Deploy a Strapi Application to Heroku

Instructor: [0:00] Now that we've got our app working, we can navigate through pages. We can click items, have that be displayed in Markdown. We want to deploy this to production. We'll start out with our Strapi application and to do this, open up a terminal. [0:18] We'll post our Strapi application, clear our screen, and type Heroku login. We'll be deploying our Strapi application to Heroku. We will get in it and then put package.json lock, we have the bottom and save, and then back to our terminal. Then we will run git add and then git commit -m initial commit. We'll create a new Heroku project here with Heroku Create.

[1:17] Now that our new project has been created, we can set up a Postgres add-on on Heroku with Heroku add-ons. Then we will create Heroku PostgreSQL and choose Hobby Dev. We want to retrieve our credentials and so we'll say Heroku config. Then we get our Heroku config.

[1:54] Next up, we want to install pg-connection-string to automatically get our database credentials from Heroku in Strapi. We'll clear and then we'll open up VSCode again, because we need to edit our configuration and paste some code from the documentation.

[2:19] We'll close this inside our config. We'll create a new folder called env/production. Then inside production, we'll add a new file called Database.js. Inside that we'll paste our configuration to automatically set all the credentials from the connection string and we'll save that. Then we need to set our Node env to production in our terminal. We'll minimize this. In our terminal we'll say Heroku config set Node env to production.

[3:21] There we go, Heroku set and so now Node env has been set to production. Now, inside our env we need to create a server.js. So we create a server.js and paste our configuration to show our Heroku URL, and then we minimize this. Then we have to initiate a couple of environment variables. Namely, our URL, our up keys, our admin secret, our JWT secret, our API token salt.

[4:01] All of them have been salted automatically and set in our Heroku instance. Now we've set our Cloudinary keys as well. After that, we need to install the PG module in our Strapi application, so that our Strapi application can use Postgres then run git. Add and make a commit to show our updated DB config.

[4:41] Because we have yarn, we run yarn install to update our log file and now we run git at yarn.lock and then run git commit -m updated yarn.lock. We'll deploy our app to Heroku now, with the command git push Heroku admin. It looks like our app was deployed successfully with a nice message from Heroku about the ending of their free Heroku offering.

[5:26] We'll use Heroku open to open our app. Open that in our browser. We'll again, in our production environment, create our first admin user, or if it's an email and set our password, and log in. We'll say frontend developer and finish.

[5:58] Now, if you check your content manager, it should be empty as you have no content in your production instance. Then we'll add our image and save. Perfect. If we go here, we have an entry. We'll duplicate this and say it might be exactly what you need. We'll add another image here, we'll add more assets.

[6:29] Upload this, select it and delete the one at the bottom. Refresh our slug and save. We forgot to publish. Publish. Now, let's try and make a request by getting our API token. Let's get our URL first and put it into Thunder Client. Make a new request to our new endpoint/API/posts.

[7:02] We get a 403 Forbidden, which is perfect. We'll go to auth bearer, go into Strapi and generate a new API token. Production next up, next block, and we'll have SB full access and press save. We'll copy and paste that. When we press send, we get all our data back. Now, we have successfully deployed our Strapi application to production.