Integrate and Deploy a Laravel and Angular project to a Shared hosting server.
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.
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
-o) option which automatically opens up the browser and loads up the app via
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
Each year, the Laracasts “Laravel From Scratch” series is refreshed to reflect the latest iteration of the framework…
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
$ composer create-project laravel/laravel
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
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
As developers, we often need to look at the tools we use and decide if we are using the right tool for the job. Chris…
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:
- Copy the dist folder into the Laravel public folder.
- Get script tags that need to be injected into the Laravel welcome view.
- Get CSS tags that need to be injected into the Laravel welcome view.
- Inject script and CSS tags into the Laravel welcome view
To accomplish this we’ll need to install the below Gulp plugins.
- rimraf: The UNIX command
rm -rffor node.
- 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
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 👏