Integrate and Deploy a Laravel and Angular project to a Shared hosting server.

photo by freephotocc

A few days ago, I was assigned a task to integrate and deploy Laravel and Angular project to a shared hosting server. After a few hours of googling, I came across different ways of achieving this, but none of them seems to be the perfect solution for my use case as I need to deploy this to a shared hosting server.

I came up with an easy solution that seems to be straightforward; in this tutorial, I’m going to walk you through the steps of setting up Laravel & Angular project, after which I’ll show how to streamline the workflow and deploy it to a shared hosting server. Let’s get started!

Note: As at the time of initial publication, the latest version of Laravel was 5.x and Angular 5.x however, this setup is also valid for recent Laravel versions (7.x) and Angular (9.x)

We start by creating the main project folder that will contain both the backend (Laravel) and client-side (Angular) code.

Create the main Folder that contains both the server and client code

Angular 5 Project Setup

Before you begin, make sure your development environment includes Node.js® and an npm package manager, we’ll use Angular CLI to bootstrap the application, it useful for generating application and library code and perform a variety of ongoing development tasks such as testing, bundling, and deployment.

Install the Angular CLI globally.

To install the CLI using npm, open a terminal/console window and enter the following command:

$ npm install -g @angular/cli

Once the installation is complete, create a new project using the ng new <client folder name>`.

Now we have a basic Angular project set up in a new directory called *client*, we can start up the server using ng serve` — This command compiles the app, launches the server and watches for new file changes, you can also specify--open`(or just -o) option which automatically opens up the browser and loads up the app via http://localhost:4200/

http://localhost:4200

Laravel 5 Project Setup

For all Laravel newbies, feel free to check out the awesome Laravel Installation Guide, for visual learners, Laracasts is a great resource, it provides a free thorough Introduction to Laravel Framework for beginners — It’s a great place to start your journey.

Laravel 5.4 From Scratch

To create a new Laravel, make sure you have Composer installed. use the composer create-project command followed by the package and folder name; which creates a new folder called server with a fresh installation of Laravel. Once the setup is complete, Use the Artisan serve command to spin up the server at http://localhost:8000

$ composer create-project laravel/laravel

Integration Overview

Our main aim is to use Laravel to serve up the SPA app built with Angular, let’s take a look at how Angular works. When you run the ng build command, it creates a /dist folder that contains the bundled files.

You can simply take the contents of the /dist folder and upload them to a static hosting platform like Firebase Hosting or Netlify. In this case, we’ll be using the Laravel to serve up the /dist folder content. We can manually move these files into the public folder then have the welcome.blade.php serve as the index.html (entry point ) like this.

Note: the above folder and file structure is based on Laravel 7.x and Angular 9.x

The above would be time-consuming if we have to do this manually during development every time we make a change to the client-side code.

Streamlining the Workflow

We can dive deeper into streamlining the development workflow using an automation build tool, there are different build tools for automation in Javascript, such as Gulp, Grunt, and Webpack (newly added and preferred in 2020 😄).

In this tutorial, I will be using Gulp and there few reasons why I prefer Gulp over Grunt but one of the main reason is Gulp prefers code over configuration. Being that your tasks are written in code, gulp feels more like a build framework, giving you the tools to create tasks that fit your specific needs. Just in case you are new to Gulp check out this tutorial:

Automate Your Tasks Easily with Gulp.js

In the client code (front-end), let’s proceed to install gulp globally and also make sure it’s included as part of devDependencies:

$ npm install gulp — save-dev 
$ npm install gulp --global

Once the installation is successful, next we need to create a gulp task but before we dive into the code, let’s analyze quickly what we’re trying to achieve. We need a gulp task that’ll do the following:

1. Copy the dist folder into the Laravel public folder.
2. Get script tags that need to be injected into the Laravel welcome view.
3. Get CSS tags that need to be injected into the Laravel welcome view.
4. Inject script and CSS tags into the Laravel welcome view

To accomplish this we’ll need to install the below Gulp plugins.

1. rimraf: The UNIX command rm -rf for node.
2. cheerio: is a fast, flexible, and lean implementation of core jQuery designed specifically for the server.

To install the listed plugin, go ahead and run this command:

$ npm install rimraf cheerio --save-dev

Once the installation is successful, go ahead and create a gulpfile.js in the client directory with the following code. Now that we’ve got the gulpfile ready, it’s time to write out the task, so every time we run gulp, we want to remove the old dist folder content from the Laravel public folder, then copy the newly generated dist folder content into the Laravel public folder like this:

From the above, you’d notice we have a cssSearch and jsSearch variable; this is only an identifier to specify the section to inject the new bundled files path for CSS and JS in the welcome.blade.php file which now looks like this

You can go ahead to add a new script to your package.json that builds the app and automatically runs the ‘gulp dist’ command whenever you make changes to your client code.

"build-dev":"nodemon -e ts,html -w ./src -x 'ng build && gulp dist'"

Go ahead and run npm run build-dev , make sure your PHP server is running then navigate to the browser, you should see the angular app been served by Laravel.

Deploying to a Shared Hosting

To deploy the application to a shared hosting we don’t need to upload the client-side code, all we need is the server directory which contains the Laravel code. We also need to configure the.htaccess file in the server directory, this is to ensure that PHP starts and loads all URLs relative to the public directory.

Yeah! that’s it.

Feel free to post your questions, suggestions and 👏

Cheers!

Kingsley Solomon