Repository files navigation

Example config your Laravel project with two builds (public and admin)

1. Create Laravel Project

   laravel new my-projectcd my-project# remove existing frontend scaffoldrm -rf package.json webpack.mix.js yarn.lock resources/js resources/sass public/js public/css

2. Create a Vue CLI 4 project in the Laravel '/resources/frontend/'

   cd resources/frontendvue create app#and (if you need admin build)vue create admin

3. Configure Vue CLI 4 project

   Create/resources/frontend/app/vue.config.js:

   module.exports={devServer:{proxy:'http://laravel.test'},// output built static files to Laravel's public dir.// note the "build" script in package.json needs to be modified as well.outputDir:'../../../public/assets/app',publicPath:process.env.NODE_ENV==='production'    ?'/assets/app/'    :'/',// modify the location of the generated HTML file.indexPath:process.env.NODE_ENV==='production'    ?'../../../resources/views/app.blade.php'    :'index.html'}

   Edit/resources/frontend/app/package.json

   "scripts": {  "serve": "vue-cli-service serve",- "build": "vue-cli-service build",+ "build": "rm -rf ../../../public/assets/app/{js,css,img} && vue-cli-service build --no-clean",  "lint": "vue-cli-service lint"},

   and (if you need admin build)

   Create/resources/frontend/admin/vue.config.js:

   module.exports={// proxy API requests to Valet during developmentdevServer:{proxy:'http://laravel.test/admin'},// output built static files to Laravel's public dir.// note the "build" script in package.json needs to be modified as well.outputDir:'../../../public/assets/admin',publicPath:process.env.NODE_ENV==='production'    ?'/assets/admin/'    :'/admin',// modify the location of the generated HTML file.// make sure to do this only in production.indexPath:process.env.NODE_ENV==='production'    ?'../../../resources/views/admin.blade.php'    :'index.html'}

   Edit/resources/frontend/admin/package.json

   "scripts": {  "serve": "vue-cli-service serve",- "build": "vue-cli-service build",+ "build": "rm -rf ../../../public/assets/admin/{js,css,img} && vue-cli-service build --no-clean",  "lint": "vue-cli-service lint"},

4. Configure Laravel routes for SPA.

   routes/web.php

   <?php// For admin applicationRoute::get('/admin{any}','FrontendController@admin')->where('any','.*');// For public applicationRoute::any('/{any}','FrontendController@app')->where('any','^(?!api).*$');

   app/Http/Controllers/FrontendController.php

   <?phpnamespaceApp\Http\Controllers;useIlluminate\Http\Request;class FrontendControllerextends Controller{// For admin applicationpublicfunctionadmin()    {returnview('admin');    }// For public applicationpublicfunctionapp()    {returnview('app');    }}

5. Changebase: process.env.BASE_URL inrouter.js for correct Vue Router

   // For Appbase:'/',// For Adminbase:'/admin/',

6. Addpackage.json in root (if you want useyarn run in root)

   {"name":"laravel","version":"0.2.0","private":true,"scripts":{// For public application"prepare:app":"cd resources/frontend/app && yarn install","serve:app":"cd resources/frontend/app && yarn run serve","build:app":"cd resources/frontend/app && yarn run build","lint:app":"cd resources/frontend/app && yarn run lint","test:app":"cd resources/frontend/app && yarn run test:unit",// For admin application"prepare:admin":"cd resources/frontend/admin && yarn install","serve:admin":"cd resources/frontend/admin && yarn run serve","build:admin":"cd resources/frontend/admin && yarn run build","lint:admin":"cd resources/frontend/admin && yarn run lint","test:admin":"cd resources/frontend/admin && yarn run test:unit"}}