So you want to deploy your Strapi server?

As someone who has never worked with Strapi or Heroku prior to building out this portfolio... you can imagine I had a hard time figuring this one out. With that being said, I figured I'd break the process down to be as simple as humanly possible.

First thing's first, if you haven't already, please install Heroku. It's as simple as writing out the command brew install heroku in your terminal. From there you will be prompted to log into your Heroku account. If you don't have one please take the time to create one! Once your account is set up and ready to go you can log in from your terminal using the command: heroku login. This is will actually open up the log in page in your default browser. Enter your credentials and come back to your terminal. We're just getting started!

From here you have two options. You can either continue using an existing Strapi project or you can create a new one. If you've never used Strapi before you can create a new application with the command yarn create strapi-app name-me-something-clever --quickstart. For our seasoned developers, just change into your project's directory with cd your-exisiting-projects-name.

In case you decided to be a rebel and create your project with npm you'll need to add package-lock.json to the bottom of your .gitignore file. You know what, add it anyways! We don't want to take any risks :joy:

Almost there! I'm sure you're wondering why we haven't connected to Github and to answer your question, Heroku is taking over! We'll take some familiar steps: Initialize your repository!

git init
git add .
git commit -m "initial commit"

Heroku will be holding our project instead of Github so please don't get ahead of yourself and add a remote origin url.

Now we move onto Heroku! Once again, you have two options: create a new project or use an existing one. If you're going to create a new project make sure you name it (heroku create custom-project-name-here.heroku.com), Heroku will randomly name it if you don't. If you have an existing project, you can set your remote origin using the following command: heroku git:remote -a your-app-name-goes-here

Here's where the fun begins! We have to set up our database. As always you have multiple routes to choose from, but my favorite route to take is using PostgreSql. If you want to use MongoDB this is where we part ways :disappointed_relieved: We'll start off by installing the addon by entering heroku addons:create heroku-postgresql:hobby-dev in our terminal. Now we need to retrieve your credentials using heroku config. Another way to retrieve your database url is by going to your project's settings in Heroku and hitting a nice button that says "reveal config vars". You should see something that looks like "DATABASE_URL: postgres://USERNAME:PASSWORD@HOST:PORT:NAME". Make sure you save that somewhere as we're going to need it.

Strapi expects a variable for each database connection configuration (host, username, etc.). So, from the url above, we will deconstruct that environment variable using pg-connection-string. Heroku will sometimes change the above url, so it's best to automate the deconstruction of it, as Heroku will automatically update the DATABASE_URL environment variable. This is actually a new feature so, thank you Strapi :joy:

We'll install both the postgresql and the pg-connection packages with a single command: npm install pg-connection-string pg --save Then we're going to create a couple folders and a file in our Strapi project so that our path could appear like: ./config/env/production/database.js.

And thanks to Strapi we also know that our database.js file should look exactly like this:

//start of database.js file
//importing pg-connection to parse through the database url
const parse = require('pg-connection-string').parse;
//setting parse equal to config var
const config = parse(process.env.DATABASE_URL);

module.exports = ({ env }) => ({
  defaultConnection: 'default',
  connections: {
    default: {
      connector: 'bookshelf',
      settings: {
        client: 'postgres',
        host: config.host,
        port: config.port,
        database: config.database,
        username: config.user,
        password: config.password,
      },
      options: {
        ssl: false,
      },
    },
  },
});
//end of database.js file

Hey! You got through it, we're almost done here. Make sure you commit your changes:

git add .
git commit -m "created and updated database config"

and deploy! git push heroku master This step takes a while as we're going through the build process and all that jazz but once it's finished you can view your project by entering heroku open in your terminal. You're done!

My first experience was, unfortunately, not this easy but now I know that I can do it and you can too! Thank you for taking the time to read this, especially when Strapi provides their own documentation.