I have one laravel project where i'm going to have multiple backends, i need to do the same thing in frontend, another laravel project where i'm going to have multiple frontends in Vue using the laravel-vue integration, for example, inside resource/js folder to have frontend1, frontend2, etc. Is there any guide or tutorial about how to do this? How to make Folder structure inside resources/js, Laravel Mix configuration, etc.?
thanks!
-
Is there a reason why you want to do this? To me it sounds a lot easier to decouple the backend and frontend. 1 project with a Laravel backend and as many projects as you want with frontend apps.Loek– Loek2019-07-04 14:46:48 +00:00Commented Jul 4, 2019 at 14:46
-
There are projects already running in this way, they have two servers one for backend, the other for frontend, both have laravel, in frontend there are multiple projects with blade but in the same laravel installation, now they want to create several projects in Vue inside the same laravel installation. I don't speak english, sorry about mistakes.Jofred Reinosa– Jofred Reinosa2019-07-06 16:11:12 +00:00Commented Jul 6, 2019 at 16:11
Add a comment
|
1 Answer
I did this recently in a project where i created resources/backend/js and resources/frontend/js where i wanted the output to be in public/frontend and public/backend. I stumbled on some issues with the manifest file but got it working in the end.
You can do this by creating a new frontend.mix.js and change the output paths to
const mix = require('laravel-mix');
mix.setPublicPath('public/frontend')
.setResourceRoot('/frontend')
mix.js('resources/frontend/js/app.js', 'public/frontend/js')
.sass('resources/frontend/sass/app.scss', 'public/frontend/css')
You will need to create a few new command to use frontend.mix.js
"scripts": {
"frontend-dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --env.mixfile=frontend.mix --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"frontend-watch": "npm run frontend-dev -- --watch",
}
Inside the original webpack.mix.js file i changed the paths to backend and left the commands untouched.
Hope this helps you.
4 Comments
Jofred Reinosa
Hi, i made a mistake in the description, there are 2 laravel intallations, one for backend, one for frontend, every one have multiple projects, backend has multiple backend projects and frontend has multiple projects, some using blade and now multiple projects using Vue but keeping the same laravel installation for frontend, But I think it is the same thing, this could help. Thanks!. I'm going to update the question.
Robbin Benard
I forgot to mention you have to point to your mix file like this
<link href="{{ mix('css/app.css', 'backend') }}" rel="stylesheet">, good luck with your project
Bill
@RobbinBenard Why would you add app.scss for backend inside the frontend.mix.js? thanks
John Smith
@RobbinBenard It almost worked. The only problem are the chunk files. They are generated inside "public/frontend/js/chunks" which is fine, but the app is trying to load them from "public/js/chunks". This is weird, it should use the same output folder. Any idea how to fix this? Thanks.