Ah yes, client folder seems very similar. But it's inside of the other codebase, that's quite different. In my case spring boot app is in osbo/rest-api and nuxt is in osbo/nuxt - they are basically totally separate. That's what got me confused.
In this case, how would you typically build and deploy this to run? Do you just run two different scripts from the main folder, deploy two things and still end up with two separate services? Or does laravel end up hosting nuxt generated code?
Nuxt has "generate" option where you'd end up getting ready html/CSS/js to host, and if this code structure gives you that, and laravel then serves it, then it's not quite the same as option 3. And if you end up with two independent services, then whilst it can work from one folder, I'm not sure if I see the benefit of keeping it all in one project.
As said, I don't know much about laravel and how it's typically used with nuxt, so perhaps that's normal - but I just can't see a benefit of keeping these two protects blended into one if you're after the nuxt universal/two separate services route.
I can only speak to the development / local server, because that's all I have tested so far. Production might be more complicated, I'm not sure though.
laravel-nuxt/ --> root folder, this has all the laravel code (folders like app, bootstrap, config, resources, etc). See github.com/cretueusebiu/laravel-nuxt
laravel-nuxt/client --> this has all the nuxt.js code (typically the 'client' folder doesnt exist in a laravel app)
See github.com/cretueusebiu/laravel-nuxt
To run this on my local / dev server, I basically need 2 commands, both run from the root laravel-nuxt/ folder:
OneStepAtATime:laravel-nuxt kp$ npm run dev
> @ dev /Users/kp/Code/LARAVEL_WORKING_CODE/NUXT/laravel-nuxt
> nuxt -c client/nuxt.config.js
nuxt: Call build:before hooks (1) +0ms
nuxt:build App root: /Users/kp/Code/LARAVEL_WORKING_CODE/NUXT/laravel-nuxt/client +0ms
nuxt:build Generating /Users/kp/Code/LARAVEL_WORKING_CODE/NUXT/laravel-nuxt/.nuxt files... +0ms
nuxt:build Generating files... +18ms
nuxt:build Generating routes... +12ms
nuxt:build Building files... +26ms
nuxt:build Adding webpack middleware... +3s
████████████████████ 20% building modules{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
████████████████████ 100%
Build completed in 8.119s
DONE Compiled successfully in -2877ms 12:46:55 AM
OPEN http://localhost:3000
You then go to localhost:3000 and it just works. Nuxt calls the Laravel APIs.
What do you think, given this description?
I'm not familiar with the nuxt "generate" option..so I am confused / curious what you think.
What is the benefit of the two separate services route?
Technically the 'client' folder could be external to the Laravel app (laravel-nuxt), and I have done exactly that in Laravel -> Vuejs SPA apps, but never with Nuxt. I just started with the codebase above. What is the drawback of having them all in one project?
If you end up with two servers (Node.js running Nuxt/Vue on 3000 and Laravel server on 8000), then I think you are indeed on route 3 :)
Overall, you can keep it this way as it works, but there doesn't seem to be a requirement to keep it all in one folder. To a degree it's personal preference. I would/do keep things that run as separate processes and involve different tech in separate directories - just to make it easier for anybody looking into this code to see where the boundaries are (it also makes managing deployments easier for example). But, it's just a minor point, as long as you end up with these two servers running, all is fine and will work:)
Generate option: it's just an option in Nuxt to generate a static site. It will create a dist folder with everything (HTML/CSS/JS rather than .vue files) inside ready to be deployed.
That's good to know, Lili! I was worried that I was going down a wrong path! I agree with you, keeping the folders separate and managing the deployments separately makes a lot of sense. Right now, since it's just me and I don't have a team, I'm going to keep them all in one folder (though I may make the 'client' folder it's own git repo and the master repo include it as a git submodule: git-scm.com/book/en/v2/Git-Tools-S...)
One thing that is still confusing to me is why this repo has a router.js github.com/cretueusebiu/laravel-nu...
I thought Nuxt automatically compiles the routes based on the files in the directory. Not sure if you have an idea what this is for...
Re: router.js - you are absolutely right, Nuxt will create router.js based on /pages folder structure (you can see this in sample project for this post too). Not sure why there is one in your source code... Maybe a leftover from another approach? Or maybe sth went wrong in code generation in Nuxt template? Either way, you should not need it, and I'm not sure what happens if you have it (will it override Nuxt, or just be ignored?).
Thanks Lili. Upon digging deeper this is what I found / filed: github.com/cretueusebiu/laravel-nu...
He is essentially overriding the default Nuxt functionality of auto-creating routes because he likes doing it the manual way. So yeah, I've asked him to remove it and he seems open to the idea.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Actually is the structure that different?
Compare the 'client' folder at github.com/cretueusebiu/laravel-nu...
with github.com/lilianaziolek/blog-exam...
Sounds good, look forward to reading more posts from you on this topic, and chatting 1:1 :)
Ah yes, client folder seems very similar. But it's inside of the other codebase, that's quite different. In my case spring boot app is in osbo/rest-api and nuxt is in osbo/nuxt - they are basically totally separate. That's what got me confused.
In this case, how would you typically build and deploy this to run? Do you just run two different scripts from the main folder, deploy two things and still end up with two separate services? Or does laravel end up hosting nuxt generated code?
Nuxt has "generate" option where you'd end up getting ready html/CSS/js to host, and if this code structure gives you that, and laravel then serves it, then it's not quite the same as option 3. And if you end up with two independent services, then whilst it can work from one folder, I'm not sure if I see the benefit of keeping it all in one project.
As said, I don't know much about laravel and how it's typically used with nuxt, so perhaps that's normal - but I just can't see a benefit of keeping these two protects blended into one if you're after the nuxt universal/two separate services route.
I can only speak to the development / local server, because that's all I have tested so far. Production might be more complicated, I'm not sure though.
To run this on my local / dev server, I basically need 2 commands, both run from the root laravel-nuxt/ folder:
php artisan serve ---> laravel starts listening on port 8000. Laravel development server started: 127.0.0.1:8000 and hosts the APIs in app/Http/Controllers: github.com/cretueusebiu/laravel-nu...
npm run dev --> this starts nuxt on localhost:3000.
You then go to localhost:3000 and it just works. Nuxt calls the Laravel APIs.
What do you think, given this description?
I'm not familiar with the nuxt "generate" option..so I am confused / curious what you think.
What is the benefit of the two separate services route?
Technically the 'client' folder could be external to the Laravel app (laravel-nuxt), and I have done exactly that in Laravel -> Vuejs SPA apps, but never with Nuxt. I just started with the codebase above. What is the drawback of having them all in one project?
ps. also left you a message
If you end up with two servers (Node.js running Nuxt/Vue on 3000 and Laravel server on 8000), then I think you are indeed on route 3 :)
Overall, you can keep it this way as it works, but there doesn't seem to be a requirement to keep it all in one folder. To a degree it's personal preference. I would/do keep things that run as separate processes and involve different tech in separate directories - just to make it easier for anybody looking into this code to see where the boundaries are (it also makes managing deployments easier for example). But, it's just a minor point, as long as you end up with these two servers running, all is fine and will work:)
Generate option: it's just an option in Nuxt to generate a static site. It will create a dist folder with everything (HTML/CSS/JS rather than .vue files) inside ready to be deployed.
That's good to know, Lili! I was worried that I was going down a wrong path! I agree with you, keeping the folders separate and managing the deployments separately makes a lot of sense. Right now, since it's just me and I don't have a team, I'm going to keep them all in one folder (though I may make the 'client' folder it's own git repo and the master repo include it as a git submodule: git-scm.com/book/en/v2/Git-Tools-S...)
One thing that is still confusing to me is why this repo has a router.js
github.com/cretueusebiu/laravel-nu...
I thought Nuxt automatically compiles the routes based on the files in the directory. Not sure if you have an idea what this is for...
Re: router.js - you are absolutely right, Nuxt will create router.js based on /pages folder structure (you can see this in sample project for this post too). Not sure why there is one in your source code... Maybe a leftover from another approach? Or maybe sth went wrong in code generation in Nuxt template? Either way, you should not need it, and I'm not sure what happens if you have it (will it override Nuxt, or just be ignored?).
Thanks Lili. Upon digging deeper this is what I found / filed: github.com/cretueusebiu/laravel-nu...
He is essentially overriding the default Nuxt functionality of auto-creating routes because he likes doing it the manual way. So yeah, I've asked him to remove it and he seems open to the idea.