Deploy Vue SPA with Laravel Backend

Question

I am trying to figure out how I will deploy a Vue SPA with a Laravel backend on Ubuntu on DigitalOcean

I am currently able to deploy Laravel apps on Digital Ocean with no problem at all. My new challenge is that I am creating an SPA with the Vue-Webpack template and using a standalone Laravel app as backend.

I am not sure how I will deploy this and structure my folders on Ubuntu.

aimme · Accepted Answer

one way is to keep your projects in /var/www/ side by side in two folders(laravel-api and vue-app). another way is placing your app contents inside laravel-app's resources folder. configure nginx or apache to serve the laravel api backend only.

see http://vuejs-templates.github.io/webpack/backend.html

update config/index.js

var path = require('path')

module.exports = {
  build: {
    index: path.resolve(__dirname, 'dist/index.html'),
    assetsRoot: path.resolve(__dirname, 'dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    productionSourceMap: true
  },
  dev: {
    port: 8080,
    proxyTable: {}
  }
}

from the docs

build.index

Must be an absolute path on your local file system.

This is where the index.html (with injected asset URLs) will be generated.

If you are using this template with a backend-framework, you can edit index.html accordingly and point this path to a view file rendered by your backend app, e.g. app/views/layouts/application.html.erb for a Rails app, or resources/views/index.blade.php for a Laravel app.

build.assetsRoot

Must be an absolute path on your local file system.

This should point to the root directory that contains all the static assets for your app. For example, public/ for both Rails/Laravel.

What you should do is serve your main index file through Laravel routes or some other method of serving. lets say you have home.blade.php as index file

1 - show application entry point

routes.php / web.php

Route::get('/', function() {
    return view('home');
});

this index file should contain the app element. then you should use vue-router for navigation which will add # after index url.

Here is how to configure javacript part

2 - Install and Import VueRouter to /resources/assets/js/bootstrap.js

3 - Use Vue router with Vue ( Vue.use(VueRouter);)

bootstrap.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import axios from 'axios';

window.Vue = Vue;
Vue.use(VueRouter);


window.axios = axios;
window.axios.defaults.headers.common = {
    'X-Requested-With': 'XMLHttpRequest'
};

4 - Create /resources/assets/js/routes.js file

5 - Import vue router

6 - define routes

7 - Export routes

routes.js

import VueRouter from 'vue-router';

let routes = [
    {
        path: '/',
        component: require('./views/Home')
    },
    {
        path: '/another',
        component: require('./views/Another')
    }

];

export default new VueRouter({
    routes
})

8 - Create /resources/assets/js/ app.js file which would be the javascript main app

9- require the bootstrap.js and Import routes.js file we created

10 - Use it set router: router (as we are using ES6 just router as defined below would be considered as router:router)

11 - Thats the new Vue app there

app.js

require('./bootstrap');

import router from './routes';


new Vue({
    el: '#app',
    router
    //app works go here
});

12 - Use app.js in the home.blade.php

13 - Add router links

14 - Add router view

home.blade.php

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>My App</title>
    </head>
    <body>
        <div id="app">
            <section class="section">
                <div class="container">
                    <nav class="tabs is-boxed">
                       <div class="container">
                           <ul>
                             <router-link tag="li" to="/" exact>
                                <a>Home</a>
                             </router-link>

                             <router-link tag="li" to="/another">
                                <a>Another</a>
                              </router-link>
                           </ul>
                        </div>
                    </nav>
                    <router-view></router-view>
                </div>
              </section>
           </div>

        <script src="/js/app.js"></script>
    </body>
</html>

15 - Remember to run webpack.

Good luck

Abdelaziz Mokhnache · Answer

I am assuming you have two folders for your project: client where your vue.js code goes in, and server where your backend code lives.

The short answer

Just copy the SPA build files (located in client/dist folder by default) into your server/public folder and deploy it (The same thing is true with express for Node.js).

But you can do it better

Surely you want to avoid the manual work of copying static files from client/dist to server/public on every build you do. This is easy, all you need is just changing the build folder in your client/config/index.js and make it your server/public instead of the default client/dist.

client/config/index.js:

build: {
  // change "../dist" to "../../server/public" in both rules
  index: path.resolve(__dirname, '../dist/index.html'),
  assetsRoot: path.resolve(__dirname, '../dist'),
}

This is the recommended way to do it as described in the webpack template guide.

Deploy Vue SPA with Laravel Backend

Tags:

laravel

vue.js

single-page-application

aviattor

2 Answers

aimme

Abdelaziz Mokhnache

Recent Activity

Donate For Us

Deploy Vue SPA with Laravel Backend

Tags:

laravel

vue.js

single-page-application

aviattor

2 Answers

aimme

Abdelaziz Mokhnache

Related questions

Recent Activity

Donate For Us