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.
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
I am assuming you have two folders for your project:
clientwhere your vue.js code goes in, andserverwhere 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.
project/public and I have my server pointing to API app entry point, how do I make it display frontend, I can point my server either to api or spa –
Fizz Check out my new project Laravue-SPA. It's a framework that pulls together Laravel, Vue.js and Vuetify to create a single page application.
It's brand new and still pre alpha release but I'll be happy to provide support and fix bugs as they're discovered!
Plus it will introduce you to the concepts needed to create an SPA even if you go off in your own direction.
© 2022 - 2024 — McMap. All rights reserved.