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. 🙂
Md Obydullah
Software Engineer | Ethical Hacker & Cybersecurity...
Md Obydullah is a software engineer and full stack developer specialist at Laravel, Django, Vue.js, Node.js, Android, Linux Server, and Ethichal Hacking.