I am new to firebase. When I am trying to display the hosted blade.php files through firebase that files will be directly get downloaded. But I need to display them as web pages. So how can I achieve this goal?
Firebase Hosting is for serving static assets only. It will not interpret your PHP code/Blade template and will instead serve them uninterpreted.
If you want to serve PHP, you will need to find a PHP hosting service.
If you want to use Firebase Hosting, you'll have to serve static HTML, such as for a single-page application.
Related
I have two separate project, laravel and nuxt;
i want to, when i upload file from the laravel, it'll be stored on static folder of the nuxt project. Is there any way for that?
For that, you'll need to send your file upload to a CI that will inject it into the Nuxt project, and rebuild the whole Nuxt app.
Also, remember that static is not bundled via Webpack.
Meaning that it will be shipped raw: if it's uploaded while not being properly optimized, it'll be shipped as is (would be better suited into an /assets directory but still >> build time for the whole project required here).
Even hosting it on your Laravel server is more worth at this point.
TLDR: it's not worth to send it to Nuxt's static directory.
I recommend hosting it on a CDN or alike.
I work on a single-page application written in Vue.js 3 and built by Vue CLI 5 (Webpack 5). The app is being served from a Laravel app which is deployed to AWS by Laravel Vapor. This tool also uploads all static assets (including JS chunks) to AWS S3 and make them available via CloudFront.
I want to load all static assets used in the Vue.js app from this CDN. The URL of the CloudFront distribution is available at build time in ASSET_URL environment variable. I have written my own asset functions in both TS and SCSS which are able to resolve asset paths properly for both local development and production environment. I use these functions whenever I write a URL of a static asset (image, font, etc.) in either .scss or .vue file and everything works fine.
But I am not able to make Vue.js app load JS chunks from CDN. When I modify publicPath option in vue.config.js, Vue Router gets broken. If I try to change output.publicPath directly in Webpack config, I get an error from Vue CLI saying that I cannot modify it directly.
So I have written a script that rewrites all URLs pointing to static assets in the generated index.blade.php file (similar to index.html in a typical Vue.js project) and initial JS chunks are loaded from CDN now. However, all lazy-loaded chunks are still being loaded from the server where Laravel app is deployed. It looks like these paths are somehow defined the generated app.f73fadef.js file.
So my question is, how can I load all static assets (including JS chunks) from CDN while serving an app from a dynamic web server? Is it even possible to do this just by changing Vue CLI or Webpack config and without any dirty "hacks" (like modifying generated JS files)?
I have finally been able to solve this. The problem was caused by the following router initialization code:
createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
});
Once I remove the parameter of createWebHistory function, I was able to set publicPath option in vue.config.js to my CloudFront distribution URL and everything started to work properly. I was even able to remove my own script that changed the URLs in index.blade.php since it was no longer needed.
hi i working to spilt backend (laravel) and frontend(nuxt.js)
and i want to know best place to upload dynamic images or files on the.
backend (laravel): public folder.
or
frontend (nuxtjs): asstes/images folder.
and i want when i finished my project upload it on same server with different port.
thank you
If those are static files used in the frontend, then in the assets/images from nuxtjs.
If those are files uploaded to the server, then in the laravel backend.
I installed devdojo/chatter. Installation is fine but the /forums route does not work when i use my application directly like localhost/chatter/forums. When I serve the same application it works. Is there any way we can use this without serving.
I tried serving the application by command php artisan serve. and I get the proper page.
below is the image showing errors while using the library without serving the app.
My Laravel 5.6 app has a Vue.js frontend. The Vue.js app is in the resources directory. I have gone through several articles that use Prerender SPA plugins. These articles are for the stand alone vue.js app and have an index.html file. In Laravel's case we have index.php. How do I make my Laravel Vue.js App SEO freindly. At a minimum I would like to make the front/home page of the app SEO friendly.
I think, as an alternative solution, you can use https://prerender.io/ service (up to 250 pages Free for caching) to do the pre-rendering for your SPA application.
If you are going to implement https://prerender.io/ service, you would require to generate all the sitemap URL paths and upload them to this service via their npm plugin (prerender-spa-plugin) and configure your .htaccess file for search engine crawlers. So search engine crawlers will redirect to this pre-render service and picked your website, cached static web page for service engine indexing, and show that cached page as the search result.
For more info, you can refer below;
https://prerender.io/documentation
https://snipcart.com/blog/vue-js-seo-prerender-example
Cheers!
Definitely recommend checking out Nuxt.js! It is a production-ready framework built on top of VueJS. With Nuxt.js You can create 100% SEO-friendly app with SPA-like routing.
Check this awesome Toptal article about "Creating Server-side Rendered Vue.js Apps Using Nuxt.js"