Deploy Laravel & Vue or React App to Heroku

Published on February 5, 2021 1 min read

Hi artisans, in this article, I’m going to show how to deplay a Laravel or Laravel + Vue/React application to Heroku. Let’s get started:

Table of Contents

  1. Prerequisites
  2. Create Procfile File
  3. Create/Connect to Heroku App
  4. Setup Node.js (Optional)
  5. Setup Database
  6. Push & Deploy
  7. Run Commands

Prerequisites

At first, you need a Heroku account. Then install Heroku CLI & Git on your machine. After setting up these, initialize git in your project and write a commit:

# init
git init

# commit
git commit -m "init project"

Create Procfile File

We need to create a file named Procfile in the root directory of our project. Then add this line in the fike:

Procfile
web: vendor/bin/heroku-php-apache2 public/"

You can do the avobe thing by this command:

echo "web: vendor/bin/heroku-php-apache2 public/" > Procfile

Create/Connect to Heroku App

To deploy the app, we need to create a Heroku application. To create Heroku app, navigate to project root and run this command:

heroku create

It’ll create a new Heroku app to your Herouk dashboard. You can rename the app easily too:

heroku apps:rename theNewAppName

And if you already created an app from Heroku dashboard, you can easily connect the app to this project:

heroku git:remote -a theAppName

Important: Now we need to set APP_KEY to the Heroku config:

heroku config:set APP_KEY="The app key"

Setup Node.js (Optional)

If you didn’t setup Vue/React in your project or don’t need to install node packages, then you can skip this step.

To enable Node.js, run this command:

# add nodejs buildpack
heroku buildpacks:add heroku/nodejs

# check all installed build packs
heroku buildpacks

By default, Heroku installs only dependencies of your package.json file. To install including devDependencies, we need to 2 things.

Run this command:

heroku config:set NPM_CONFIG_PRODUCTION=false

Then in the package.json file, add postinstall line:

"scripts": {
    "postinstall": "npm run prod",
    // rest
},

Setup Database

Database part will be written soon in a new article. The new article will be linked here.

Push & Deploy

We’ve setup all things. Now just run this command to push and deploy:

git push heroku master

Visit your Heroku app URL to see the output. Now you can continue developing your project & push to Heroku to make it live.

Run Commands

We can easily run php artisan & npm commands like:

# run all
heroku run

# laravel command
heroku run php artisan COMMAND

# npm
heroku run npm COMMAND
That’s all, artisans. Thanks for reading. 🙂

Monthly Newsletter

One email a month, packed with the latest tutorials, delivered straight to your inbox.
We'll never send any spam or promotional emails.
Author

Hey, I'm Md Obydullah. I build open-source projects and write on Laravel, Linux server, modern JavaScript and more on web development.

Follow

Leave a Reply

Your email address will not be published. Required fields are marked *