Deploy custom Strapi API connected to an Angular App
By: Lucas Neves Pereira
Tags: Heroku, API, Netilly, Strapi, Angular

Starting by deploying Strapi API on Heroku

If you have read the previous article, you know that we generated our Strapi project with a --quickstart tag. By default this set the database of our project to sqlite. Well, i’ll be changing this to mongodb, of course your are free to choose the database of your choice. Strapi as documentation about how to change this.

https://strapi.io/documentation/v3.x/guides/databases.html#databases

⚠ ️Attention! For information, by changing our database we are overriding our data. So the projects content-type we’ve build before will stay there. But our actual project data will disappear. And we’ll also be creating a new user.

Assuming you already have mongodb or the database you’ve choose installed on your machine let’s head back to our project-api and launch it on out text editor. There we need to change the following file: config/database.js

Here we are going to change our connector to mongoose. Also for now I’ll be removing the unused env argument because i’ll not be using environment variables but you can do it you are pushing this to a public repository for example, it is better 🙂 . You just have to create a .env file and paste your variables there.

Finally in my settings i’ll remove the client and filename properties and change it to a single uri property and in my options change useNullasDefault to ssl.

Before talking about what we are going to paste in uri, let’s install the strapi package to use mongoose. Just have to run npm i strapi-connector-mongoose

Okay, now in our uri we need to paste the “link” to our database on mongodb atlas. For that you’ll have to create a cluster. I already have one that’ll be using. If you have no clue about how to create one I’ll paste a link to the docs 🙂.

https://docs.atlas.mongodb.com/tutorial/create-new-cluster/

Now in our cluster, hoping you’ve created a cluster with a project. We can connect our project to our mongodb database. Just go to Connect > Connect your application > Copy the srv uri.

Now back to our database.js we will be pasting that uri to our property and change the <username>, <password> and <dbname> tags to our actual username, password and dbname. For the dbname you can choose the name of your collection. For username and password if for any reason you don’t recall it, you can go to Database Access on MongoDB Atlas. There you can add a new user or change your actual user.

After adding your infos to the mongodb uri string, let’s run npm run develop and create our new user.

Perfect, now we see that we still have our projects content-type but we need to add them again. Let’s do that and then it is finally time to deploy this.

You also need to give public permissions so our front end can fetch the API with all our projects.

Alright now time to deploy our API. I’ll be using Heroku. First of all init git on your projet by running git init on a new terminal window.

Then if you already know heroku and have an account, run heroku login . If not, create an heroku account on https://www.heroku.com/home and then back on your terminal run heroku login

After stopping our server on localhost:1337 and runned heroku login

Now you can use heroku dashboard to create an app or just use the heroku cli and run heroku create or heroku create <app-name> if you want to tag your app with a custom name.

The command heroku create added a remote repository. If you run git remote -v you can see where you are pushing your project.

Before pushing we need to add our files and commit them.

Now all we have to do is push our project to heroku and run git push heroku master:main

Information: Following changes in the industry, Heroku has updated our default git branch name to main .

Perfect 😀, my project is deployed on https://project-test-medium.herokuapp.com/ now to test this just run heroku open and hopefully it will open your browser with a nice Strapi page hosted on heroku.

Well done! Our Strapi API it’s in production 👍🏼