I'm developing a hobby project on blazor hosted on githubpages.
I want to add a database to it, and I'm trying to use firebase storage for the thing, but all tutorials I see require npm and seem to be server-side oriented or at least only for Node or React or those.
Likewise, I found other tutorials on how to do that from ASP hosted Blazor app, on the server side. Does not fit my solution.
Is it possible to access it from the client's raw JS code or, even better, from blazor WASM client side itself?
You can add it to the bottom of the body tag, like so:
<body>
<!-- Insert this script at the bottom of the HTML, but before you use any Firebase services -->
<script type="module">
import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.15.0/firebase-app.js'
// If you enabled Analytics in your project, add the Firebase SDK for Google Analytics
import { getAnalytics } from 'https://www.gstatic.com/firebasejs/9.15.0/firebase-analytics.js'
// Add Firebase products that you want to use
import { getAuth } from 'https://www.gstatic.com/firebasejs/9.15.0/firebase-auth.js'
import { getFirestore } from 'https://www.gstatic.com/firebasejs/9.15.0/firebase-firestore.js'
</script>
</body>
Source, if you need more info: https://firebase.google.com/docs/web/alt-setup
Also, if you need a db maybe you want Firestore or Realtime Database instead of Storage.
Related
I recently started working with Svelte via SvelteKit and I have a few questions about this framework to which I haven't been able to find any direct answers in the source/documentation:
SvelteKit has SSR and in the documentation it says:
All server-side code, including endpoints, has access to fetch in case you need to request data from external APIs.
What code is server-side rendered besides endpoints and how it decides this? All the code from scripts from svelte pages runs on the client or some of it runs on the server?
In order to make use of SSR locally you need an adapter for it or does svelte start a server on its own?
How does SSR work in a production environment like Netlify for example. Is the netlify adapter is used for SSR (running the endpoints in a netlify function)? If a netlify adapter is not provided, how/where would the endpoints run?
If I want to use custom netlify functions in a sveltekit project what configurations are needed (besides netlify.toml and netlify adapter) in order for netlify to recognize the functions from inside the functions directory?
What is the difference here between SSR and prerendering? SSR is used only for endpoints and other js code and prerendering is used for generating the Html to send it to the client which will then be hydrated, with the compiled js code, also sent to the browser?
Thanks!
By default, pages are also server-side rendered when you first visit a site. When you navigate to a subsequent pages they will be client-side rendered.
Adapters are only used in production. If you run npm run dev for local development you still get SSR. In production, how exactly SSR is run depends on the adapter you choose. An adapter is required for production. adapter-node runs SSR on a Node server, adapter-netlify runs SSR in Netlify functions, etc.
See here for discussion of custom Netlify functions: https://github.com/sveltejs/kit/issues/1249
SSR is used for pages as well, but prerendering means that rendering happens at build time instead of when a visitor visits the page. See this proposed documentation for more info: https://github.com/sveltejs/kit/pull/1525
Pages are SSR when you first visit the site, including all the code in the script tag of your svelte page. However, as you navigate to other pages, the code will be run on the client and the page will be dynamically rendered as Sveltekit makes a single page web app look like it has different pages with the history API.
You can decide which code runs on the server and which runs on the client. If you don't do anything special, Sveltekit and your deployment environment will decide that for you. If you want some code to run only in browser (perhaps it needs to use the window object or need authentication), you can use the browser variable.
import { browser } from '$app/environment';
if (browser) {
// Code that runs only in browser
}
You can also put the code in the onMount function, which will be run when the component first mounts, which only happens in browser.
import { onMount } from 'svelte';
onMount(() => {
// Do stuff
})
If you want SSR, you can put the function in the load function in route/+page.js. One typical use case is for a blog entry that grabs the content from the database and populates and formats the content. If you get to the page from a URL, or refresh page, the code in the load function will be executed on the server. If you navigate to the page from elsewhere in your web app, the code will be run on the client, but it will look like SSR as the UI will refresh only after the load function returns (you won't see loading screen or a blank page). See the official docs for more for more.
import { error } from '#sveltejs/kit';
/** #type {import('./$types').PageLoad} */
export function load({ params }) {
if (params.slug === 'hello-world') {
return {
title: 'Hello world!',
content: 'Welcome to our blog. Lorem ipsum dolor sit amet...'
};
}
throw error(404, 'Not found');
}
I am not very sure about how to use Netlify function, as Ben mentions, you can see the discussion on https://github.com/sveltejs/kit/issues/1249. Although I think that you might be able to implement the same functionality with +page.server.js, and the "Actions" to invoke them.
Good day to any that bother to read and possibly respond to this query. I am currently trying to begin my small project that involves the use of Firebase. Being my first time using firebase I guided myself mostly by the tutorials that I was able to gather from youtube and the instructions given out by Firebase when they ask you in creating a new project. I feel I am stuck in this part of the instructions.
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="/__/firebase/7.13.2/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="/__/firebase/7.13.2/firebase-analytics.js"></script>
<!-- Initialize Firebase -->
<script src="/__/firebase/init.js"></script>
It says to add it to the bottom of the tag. Did so, then tried to add some stuff to the db by following this tutorial : https://www.youtube.com/watch?v=7lEU1UEw3YI&t=726s
But alast I get nothing.
I am quite last, I have asked a couple of my clastmates and they say they either havent tried Firebase yet or their project doesnt require Cloud Base storage.
This line of code below, is when you use Firebase Hosting
<script src="/__/firebase/7.14.0/firebase-app.js"></script>
if you are on your own server / localhost use
<script src="https://www.gstatic.com/firebasejs/7.14.0/firebase-app.js"></script>
See this
Add Firebase SDKs and initialize Firebase on From Hosting URLs tab and From the CDN tab
I'm a bit new to vue and nuxt, and I'm using firebase authentication with a custom token generation.
I'm looking for the best place to put the onAuthChange listener,
I'm trying to figure out if this should be implemented as middleware or maybe it could go somehow into the nuxt config
obviously, I want it to listen to the entire application all the time.
I found what I was looking for if someone else will ever encounter this question as well,
I've moved the listener to plugins and added the plugin to the nuxt.config.js file under the plugins section.
I have a Meteor webapp. (e.g. http://www.merafi.com). I want to scrape the website using Google Apps Script. I wrote a small script for this.
function myFunction() {
const url = 'http://www.merafi.com';
const response = UrlFetchApp.fetch(url, {muteHttpExceptions: true});
return response.getContentText();
}
The script is used inside a Google Spreadsheet as a macro.
=myFunction()
The problem with scraping a Meteor webapp is that I get an empty body with only script tags within it. How do I get the content inside the body tag?
Some crawler like PhantomJS or NightmareJS is required to run the Meteor JS after the page is loaded. Unfortunately, Google Apps Script environment does not allow to load external dependencies / packages. The Apps Script API does not have any method which loads a page in a separate iframe / webview. This is not possible using Google Apps Script.
Thanks to #Floo and #CodeChimp for answering the question in comments.
A) <script src="https://apis.google.com/js/api:client.js"></script>
versus
B) <script src="https://apis.google.com/js/client.js"></script>
The only differnence being the api: before client.js.
CDN A is used in the Google Sign-In for Websites docs in the Building a button with a custom graphic section.
CDN B is used almost in the Google API Client Library for JavaScript (Beta) docs.
They both appear to work interchangeably.
Short answer: there is no difference
Long answer:
The Google JS client CDN is a bit weird because the actual JS you get is dynamically created based on the file name you provide.
You can load multiple components of the library by constructing the URL as module1:module2:module3.js
api is the core part and is always loaded even if you don't add it to the list of modules, because it handles loading the other modules.
Theoretically you could just include api.js and then dynamically load extra modules by calling gapi.load("module", callback) which is exactly what happens when you load api:client.js or just client.js
If for example you would want to use the API Client Library together with the new sign-in methods you could include api:client:auth2.js or client:auth2.js.
And for extra confusion you could even include https://apis.google.com/js/.js which is the same as https://apis.google.com/js/api.js
Use links only from the documentation!
Simple to check this:
1) Add to header of your page this script:
<script src="https://apis.google.com/js/client.js"></script>
Open DevTools -> Network
I see:
2) Change link to other script
<script src="https://apis.google.com/js/api.js"></script>
Open DevTools -> Network
I see:
api.js is the core, when client.js is the module.
Here a completely different content: https://apis.google.com/js/platform.js