Published in


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

photo by freephotocc
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.

$ npm install -g @angular/cli

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.

$ 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.

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 😄).

$ npm install gulp — save-dev 
$ npm install gulp --global
  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
  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.
$ npm install rimraf cheerio --save-dev
"build-dev":"nodemon -e ts,html -w ./src -x 'ng build && gulp dist'"

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.



Learn concept that diffuse rapidly in the world

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Kingsley Solomon

Hi there! I’m Kingsley Solomon, a software engineer, and an enthusiastic product designer. #fullstack #frontend #backend #JS #PHP — https://johnkingzy.dev