In a Laravel app folder structure we have app/resources/js folder. Below is a screenshot.
Currently, this is my app.js:
import Vue from 'vue';
Vue.config.devtools = true;
import App from './App.vue';
// stores
import store from './store.js';
import router from './router';
import Toast from "vue-toastification";
import "vue-toastification/dist/index.css";
import BootstrapVue from 'bootstrap-vue';
import VueBreadcrumbs from 'vue-breadcrumbs';
import VueTelInput from 'vue-tel-input';
import * as VueGoogleMaps from 'vue2-google-maps';
import InstantSearch from "vue-instantsearch";
import VueScrollTo from 'vue-scrollto';
Vue.component('pagination', require('laravel-vue-pagination'));
Vue.use(BootstrapVue);
Vue.use(Toast);
Vue.use(VueBreadcrumbs);
Vue.use(VueTelInput);
Vue.use(VueGoogleMaps, {
load: {
key: 'AIzaSyA3ledDGo41q45IhcLHRLOHOEQJeB-Gpn8',
},
});
Vue.use(InstantSearch);
Vue.use(VueScrollTo);
new Vue({
el: '#app',
data: {
searchClient: algoliasearch(
'6FJV2N9KB4',
'f41056171c4fa14034d3e3f08b7cb696',
),
},
router,
store,
render: h => h(App)
});
gtag('set', 'page', router.currentRoute.path);
gtag('send', 'pageview');
router.afterEach(( to, from ) => {
gtag('set', 'page', to.path);
gtag('send', 'pageview');
});
I don’t have a lot of experience with express.js (or node.js for backend), can I just copy the code from app.js in the quickstart demo, into the app.js file from my Laravel application?
app.js (from quickstart-calls-javascript demo app):
const express = require('express');
const app = new express();
const port = 7000;
app.use(express.static('dist'));
app.use(express.static('./'));
app.get('/', (req, res) => {
res.sendfile('index.html');
});
app.listen(port, () => {
console.log(`SAMPLE SERVER LISTENING ON 127.0.0.1:${port}`);
});
I’m not really sure how this works. Thank you.