Deploy Laravel & Vue or React App to Heroku
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
- Prerequisites
- Create Procfile File
- Create/Connect to Heroku App
- Setup Node.js (Optional)
- Setup Database
- Push & Deploy
- 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:
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. 🙂
Comment
Preview may take a few seconds to load.
Markdown Basics
Below you will find some common used markdown syntax. For a deeper dive in Markdown check out this Cheat Sheet
Bold & Italic
Italics *asterisks*
Bold **double asterisks**
Code
Inline Code
`backtick`Code Block```
Three back ticks and then enter your code blocks here.
```
Headers
# This is a Heading 1
## This is a Heading 2
### This is a Heading 3
Quotes
> type a greater than sign and start typing your quote.
Links
You can add links by adding text inside of [] and the link inside of (), like so:
Lists
To add a numbered list you can simply start with a number and a ., like so:
1. The first item in my list
For an unordered list, you can add a dash -, like so:
- The start of my list
Images
You can add images by selecting the image icon, which will upload and add an image to the editor, or you can manually add the image by adding an exclamation !, followed by the alt text inside of [], and the image URL inside of (), like so:
Dividers
To add a divider you can add three dashes or three asterisks:
--- or ***

Comments (0)