独家优惠奖金 100% 高达 1 BTC + 180 免费旋转

Deploying Laravel 8 Website with React js Assets on Heroku

In deploying my Laravel 8 website on Heroku, I encountered some issues which made me dig to rectify the issues. Consequently, this article outlines the steps needed to launch a Laravel 8 website which uses React js assets on Heroku.

Getting Started with Heroku

Heroku officially supports 9 languages by providing their buildpacks. A Heroku buildpack is a set of opensource scripts used for compiling apps on Heroku.

The Heroku CLI uses the terminal to easily create and manage the Heroku app.

NOTE: Heroku depends on git so ensure you have git installed.

3. Navigate to the root folder of your Laravel 8 application from the command line.

4. Create a Procfile in the root folder.

The Procfile is used to define the processes that are to be executed when the app starts up. This includes specifying where the app server resides and commands to run during app release.

NOTE: The Procfile should be named as Procfile without any extension such as .txt and following the letter casing. Procfile.txt or procfile are not valid names.

5. In the Procfile, insert this line of command

This command points the server Heroku automatically creates to the public/ folder where the Laravel content is to be served from. By default, it assumes the content is served from the root folder.

6. It is assumed that you have been using git and have been pushing your code to github or any other source code repositories. If not, initialize the project by executing this command in the root of the folder.

To add the untracked files, use

To create a commit, use

7. Next, log into Heroku using the command

8. Your default browser will pop-up with this login screen

9. After filling your details, you can then return to the CLI to issue more commands.

10. Since the React components of the Laravel +React application needs to be built, run this command to compile the React application.

11. To prepare the Laravel application for production, execute these commands.

The cache, routing, and view of the Laravel app needs to be optimized using separate commands however, you can do all of these using

or

If you are using Telescope, you may get an error such as

This could be because you installed Telescope without the — dev flag.

Then run this command

Then run the php artisan optimize command again.

12. Next, add the files generated to git and commit the changes.

13. Next, create the app on heroku using the CLI. The command syntax is heroku create <app-name>. That is if the app name is Doodle, you can create the heroku app using

14. Generate a new application key for Laravel using

Then copy the key into this command

15. To set logging, use this command

This makes the application logs generated to be stored on heroku and not on the default Laravel log file.

16. You can now push your code from the local branch to the heroku master branch using

If the branch you want to push from to the heroku master branch is not called master, use

17. With that, you have successfully deployed the Laravel website.

18. You might encounter an error where on opening the app url, it shows a blank page despite showing the title of the page on the browser tab. Use the key press combination

to open the console and inspect the Javascript output.

It may show errors like

You can read more on deploying your Laravel app on Heroku through these links:

Add a comment

What is your view?

Send

Related posts:

How We Kept Religion Out Of Science Classrooms

I have separately discussed Science and Religion and whether they are opposed to one another. My conclusion was that science and belief are attempting very different things, but that scientists can…

Cheapest Countries To Pursue Your MBA Education

MBA is probably the most sought-after master’s program, not just for its earning potential but also for the exposure and network that comes along with it. Many students struggle between an MBA in…

Discovering an Affordable Gym At home

The committed and perseverant deal tracker will actually want to track down modest home rec centers. Limited home exercise centers, home rec centers on special, and involved home exercise centers all…