How to deploy Inertia.js on Heroku 🚀

In this article, we will see how to deploy an Inertia.js application to Heroku; a container-based cloud Platform as a Service (PaaS), which developers use to deploy, manage and scale modern apps.

Prerequisites:

• PHP and Laravel Knowledge.
• Heroku User Account.
• Download Heroku CLI that appropriate with your system (here).
• Get installed Git on your computer (get git here).

Here I assume your application is ready to deploy.

Let's get started:

Step 1: Add your Procfile & configuration server file.

Add these files to the current working project directory:

• Procfile contains:

web: vendor/bin/heroku-php-nginx -C nginx_app.conf /public

• nginx_app.conf contains:

location / {
    # try to serve file directly, fallback to rewrite
    try_files $uri @rewriteapp;
}

location @rewriteapp {
    # rewrite all to index.php
    rewrite ^(.*)$ /index.php/$1 last;
}

location ~ ^/index\.php(/|$) {
    try_files @heroku-fcgi @heroku-fcgi;
    # ensure that /index.php isn't accessible directly, but only through a rewrite
    internal;
}

Procfile: Heroku knows which processes to run for your app based on a configuration file called a Procfile. The default apache2 process but we change it to Nginx so we have to set Nginx configuration.
nginx_app.conf: basically means that there are custom configuration settings.

Step 2: Initialize the git repo

Well, our code is ready. Let's get it into git.

$ git init
$ git add .
$ git commit -m "Initial commit of stock Laravel install."

Step 3: Create the Heroku app

Since you have Heroku CLI installed, you can create apps directly from the command line.

$ heroku create

When this is done a random name will be automatically chosen for your application. To change this name use:

$ heroku apps:rename youtNewName

Step 4: Setup a Laravel encryption key

To set up your Laravel encryption key copy the APP_KEY environment value from your .env file and run

$ heroku config:set APP_KEY=YourAppKey

Step 5: Set up & Enabling Node.js

You need to enable node.js in order to run commands node npm commands in production. To do that you need to add heroku/nodejs build pack using:

$ heroku buildpacks:add heroku/nodejs

The node dependencies in your package.json file will be installed on deployment but it won’t install any of your devDependencies. To solve this you need to set an environment variable to tell Heroku to install all dependencies including devDependencies using:

$ heroku config:set NPM_CONFIG_PRODUCTION=false

Then add postinstall in package.json scripts

"scripts": {
  ....
  "postinstall": "npm run prod"
}

Step 6: Deploy your code to the Heroku app

With Heroku, you push new code to your site by pushing to the heroku git remote.

$ git push heroku master

Step 7: Ensure that two Heroku buildpacks

To do this run:

$ heroku buildpacks 
// you have to see:
1. heroku/php
2. heroku/nodejs

Step 8: Set up PostgreSQL database

Heroku provides you with use PostgresSQL for free(limited). To install it run the command:

$ heroku addons:create heroku-postgresql:hobby-dev 

Once the installation is done, you have to find the database credentials, open your Heroku account then:

Choose Our App > Resources > click on Heroku Postgres > Settings > click on View Credentials

Now you need to set the environment variables of the database, you can add them directly from the terminal:

$ heroku config:set DB_CONNECTION=XXXXXXX

Finally, you have to migrate your tables, run:

$ heroku run php artisan migrate

That's it 🎉🥳

Now open your app via:

$ heroku open

========================================================

Additional notes:

1- You might face an issue that your assets files do not work! since the domain of the Heroku is "HTTPS" you have to put this code in AppServiceProvider.php in boot method:

 if(config('app.env') === 'production') {
    \URL::forceScheme('https');
 }

2- You might forget to link storage files:

$ heroku run php artisan storage:link