DEV Community

loading...
Cover image for How to deploy Inertia.js on Heroku πŸš€

How to deploy Inertia.js on Heroku πŸš€

rabeeaali profile image Rabeea ・3 min read

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
Enter fullscreen mode Exit fullscreen mode
  • 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;
}
Enter fullscreen mode Exit fullscreen mode

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."
Enter fullscreen mode Exit fullscreen mode

Step 3: Create the Heroku app

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

$ heroku create
Enter fullscreen mode Exit fullscreen mode

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

$ heroku apps:rename youtNewName
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Then add postinstall in package.json scripts

"scripts": {
  ....
  "postinstall": "npm run prod"
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Step 7: Ensure that two Heroku buildpacks

To do this run:

$ heroku buildpacks 
// you have to see:
1. heroku/php
2. heroku/nodejs
Enter fullscreen mode Exit fullscreen mode

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 
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Finally, you have to migrate your tables, run:

$ heroku run php artisan migrate
Enter fullscreen mode Exit fullscreen mode

That's it πŸŽ‰πŸ₯³

Now open your app via:

$ heroku open
Enter fullscreen mode Exit fullscreen mode

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

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');
 }
Enter fullscreen mode Exit fullscreen mode

2- You might forget to link storage files:

$ heroku run php artisan storage:link
Enter fullscreen mode Exit fullscreen mode

Discussion (0)

pic
Editor guide