Connect Laravel pretty url and nuxt js - laravel

I satarted a project based on a Laravel-Nuxt Starter kit, found it here : https://bestofphp.com/repo/cretueusebiu-laravel-nuxt-php-starter-projects
I connected it to Laragon, so I can have pretty urls and making it work on Apache and MySQL. It works nocely, and when I do npm run start, I can access the website locally on localhost:3000 and it updates. However, if I use the pretty url given by Laragon, example.home, it goes to the index.html in the public server, but it doesn't update, no matter what I do. I tried npm run build, but the public folder isnt updated, the changes I do in the Vue component are only visible in localhost:3000.
What can I do to update the public folder according to the changes I do ?
Thank you !

Related

Django REST + Vue3 deployment with Passenger

I have a local app with a Django backend and Vue3 frontend, and I have to deploy it to a Dreamhost Shared Host. I've already deployed the backend with Django and Passenger and it's working (the admin panel and its API is working), but now I need to add the frontend side to the server.
I've followed the instructions to deploy a Vue app, generating the dist folder with npm run build and then adding it to my public folder in the server, but nothing happens. I can't find any tutorial or anyone trying to build something similar, so any help to understand what I should have to do is welcomed.

Vue: Having frontend in it's own Github repo?

I am working on a Laravel project and part of the app was converted to a Vue app. Ultimately, the blade file is reading from the source of /dist/app.js , which is generated after running npm run production and runs the whole Vue app. The company only wants 1 engineer to run deploys to ensure backend code doesn't get inadvertantly changed.
To make strictly frontend changes, can I technically have the src read off a CDN in the Blade file and then just remove the Vue app entirely from the github repo into it's own so I can continuously make changes on my own. That way, I can make changes and then upload the new bundle to the CDN without touching the backend repo. Is that doable?

Vue components not working on live server

My components are not being rendered when I upload my project on a live server. It works fine on my local machine after I run npm run production when I upload the changes none of the vue components are being loaded in the page. On my local machine the vuejs dev tools tells me the site is running in production but when I go to the live server in the console it says
You are running Vue in development mode.
and on the browser taskbar it says
Vue.js not detected
I have no idea how to fix it. I saw a post saying I should upload the node_modules folder to the live server. But I doubt that would change anything plus it would take too long. How can I fix this?
I found out that the server was loading an older copy of the js file. So I had to apply cache busting by adding a phantom query to the end of the file. <script type="text/javascript" src="/js/app.js?v=2.4.1"></script>

Why am I getting broken access to layouts.app (for lavravel app) on heroku hosting but not on localhost?

I am a student and have created my first Laravel App (A blog app). I have a layout/master view created named app.blade.php in resources/views/layouts folder.
I am using laravel 5.6.
It works perfectly on localhost but not on heroku hosting.
Here is my project structure
Here is my code in home.blade.php
Heroku hosting error screen below
Localhost view
clueless about this problem. I need your support.
EDIT
I solved the problem. I am on a windows system while hosting on a linux platform. So my sweet innocent windows was not updating the "Layouts" on server with "layouts".
But I am with another problem
Regards,
Arpan
but loading /login /register correctly
Now this doesn't end here,
when I type /login with the url it gives me
Now I observe that when i click the link it shows me Not secure connection and displays properly but when typing there is https but not displayed correctly.
Please help me analyse and figure out the issue.
Github repo link : https://github.com/ArpanKIIT2017/blog4b/
Its because the app was unable to find the file. But everything looks good. can you check if the file exists on remote server.
what are you using to push the files to remote server?.
try running
php artisan view:clear
on both local and heroku
Actually Heroku doesn't support SSL in free tier. So https actually won't work.
Finnaly migrated my app to postgre sql.
Problem mainly was due to the uppercase and lowercase representation of "Layouts".
So my app is Up and Running only with one problem that is heroku doesn't support file uploads. It is not storing any file upload. Searching solution for that but not related to this post.
Thank You

How to deploy a laravel5 & vuejs application?

i have a laravel 5 & vuejs application on my local server (vue js that comes with laravel). And now i want to deploy this application on real server like "000webhost.com" to test.
Laravel works fine, but Vue doesn't, I get some unexpected behaviors like blank page when assigning the id="app" to the parent element, and when i remove the id="app" the page appears and works correctly but Vue doesn't.
This is my project structure:
project structure
When uploading,, I upload the whole project without "node_modules" directory (that comes with npm install) Could this be the reason ?
You need to run npm run dev or npm run prod to create your resource bundle with the javascript and other assets. You technically don't need node_modules, so long as you build the projects on another machine and upload all that to your hosted server.

Resources