Using meteor in chrome extension - meteor

Is it possible to take for example the todos app (from the meteor examples ) and load it as a chrome extension?
Meaning the extension will display the list of the todos on my meteor web app?

You could load the webpage with the extension, yes.
If you wanted to do something more native, you would have to import the data somehow. You could create a page that outputs JSON for the todo list, and process that from within the extension.

Related

"Disable" SSR in nextjs

I want to create a Browser-Application without SSR, with React and MUI. So I found a NextJS-Template here:
https://github.com/mui/material-ui/tree/master/examples/nextjs-with-typescript
I want to disable SSR completely, let's say in the best case starting with _document.tsx, but at least the file _app.tsx and all following as for example _index.tsx should be rendered without SSR.
So, how to disable SSR "completely"?
While some might tell you to use plain React, others still use Next.js because of things like file-based routing, sane ESLint and TypeScript defaults, and fast compilation times (because of SWC). If you prefer the developer experience of Next.js over standalone React, but don't want/need SSR, then you have the option to use a static HTML export:
next export allows you to export your Next.js application to static HTML, which can be run standalone without the need of a Node.js server. It is recommended to only use next export if you don't need any of the unsupported features requiring a server.
The example template you linked to shouldn't need any additional code changes (running next export on it worked fine for me, it only threw a warning about a missing ESLint configuration which is easy to set up).
Just remove the getStaticProps, getStaticPaths and getServerSideProps from the pages you don't want to SSR and it will act like a normal react page.

How to do SSR (server-side rendering) in Svelte/TypeScript?

Svelte’s JavaScript server-side rendering API is described here: https://svelte.dev/docs#run-time-server-side-component-api
However, when I do this in TypeScript, there is no method App.render().
Do I need to change rollup.config.js (e.g. compilerOptions.generate)?
Do I need two versions of this file – one for the server and one for the client?
Can anyone help? Thanks!
Svelte Server-side component API is not directly accessible via import. Instead, you need to build the production with vite options --ssr. Otherwise, you're importing the component class extended SvelteComponent and that class has no render function.
You can check out this guide for Production SSR build: Vite Server-Side Rendering.
You don't need to set up the SSR Dev server or inject /#vite/client because svelte-hmr already does the magic under the hood.
The SSR Bundle options ssr.noExternal doesn't seem to work for me. So that I need to convert all Svelte components import into static import for a production build.
The official template relies on rollup-plugin-svelte, where similar question was asked. Essentially compiling in SSR mode does not automatically generate any HTML, in fact some post processing is required. The Svelte Server-side component API can be used for that.
There are several solutions out there for SSR:
SvelteKit
Routify
ElderJS

My single page website doesn't have API calls and url paramaters. Can I Implement Angular Universal with firebase hosting without using cloud function

I have an angular 9 application deployed in firebase. I am planning to implement Angular Universal SSR for SEO.
Could anyone please clarify my doubts regarding Angular 9 Universal + Firebase hosting.
(I am currently using Spark plan which does not includes cloud functions.)
Can I implement SSR without Firebase cloud functions ?
Also,
My website doesn't have API calls(other than Google Analythics on index.html), no database connectivity and no query string parameters. That means, my home page contents are always same**. In this case, can I use static server side rendering without cloud functions.
If this is possible, How to deploy the output to firebase ?
3.1, Will copy the dist folder contents to server works?
3.2 How to run SSR and non SSR version in my local?
Note: **My website is not static html page, I am providing some client side fuctionality using javascript/typescript code which does not have server calls.
Other than implementing Angular Universal, Is there any way to to achivbe SEO with Angular Apps?
This can be done via Angular pre rendering.
Prerendering does not requires cloud function or node support in server.
It is easy and Angular CLI version > 11 directly supports it.
Now Web crawlers can able to read the entire HTML content. Because the output of prerender is a rendered HTML file.
Steps
Install Angular Express Engine using the below command
ng add #nguniversal/express-engine --clientProject project-example
Run the below command
npm run prerender
Goto dist folder
Copy/deploy contents from the folder 'Browser' to server environment
Note that any code related to window, document, navigator will throw error and should be wrapped inside if condition like this.
if(isPlatformBrowser(this.platformId)){
// your code accessing window, document, navigator.
}

Wrap website with cordova phonegap. What happens with audio files?

I have a learn new language site, that i want to wrap in cordova phonegap.
The app needs to work offline. I also want to make it available on the app store.
The project budget is very low. I need to find a quick way to create this app within the budget and time frame.
My question.
Is it possible to just wrap the whole site? And save it all offline.
What happens to the database? Do i need to recreate the database for the app, use sqlite ect.
Some pages will have audio files, where user can listen to the word pronunciations. What happens to the audio files. Do i need to rebuild this? Or is there a quicker way.
Can all of this be achieved by using cache?
If there is a better way of doing this please let me know.
Thanks in advance
cordova-plugin-inappbrowser provides a web browser view that displays when calling cordova.InAppBrowser.open().
var ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'location=yes');
The cordova.InAppBrowser.open() function is defined to be a drop-in
replacement for the window.open() function. Existing window.open()
calls can use the InAppBrowser window, by replacing window.open:
window.open = cordova.InAppBrowser.open;
The InAppBrowser window behaves like a standard web browser, and can't access Cordova APIs. For this reason, the InAppBrowser is recommended if you need to load third-party (untrusted) content, instead of loading that into the main Cordova webview. The InAppBrowser is not subject to the whitelist, nor is opening links in the system browser.

cloning a meteor app

Copying a static website, i.e., HTML, CSS, JS is very simple.
Copying a dynamic website, i.e., is difficult due to the server-side scripts.
I'm concerned about cloning any meteor app as most of the server-side scripts are eliminated and the only thing which needs to be copied is the database, the schema can be easily obtained from the meteor live app and data can be easily scraped from the existing meteor app.
If a successful meteor app can be easily cloned, no one would prefer to develop an app on meteor.
Is there a way to stop cloning an existing meteor app?
Well, technically a meteor app can be cloned it depends on your directory/file structure & whether you're using it in development mode. If you're using one file and this sort of structure to seperate your code:
if(Meteor.isClient) {
}
if(Meteor.isServer) {
}
Because this file would be sent down to the client so someone can fetch it.
So it might be better to move to this structure
/client - Place stuff in Meteor.isClient in a new js file
/server - Place your server side code in a new js file
/public - Place other public folder stuff
So no one will see the server side scripts, so they can't clone the backend of your app.
Production mode/Dev mode
In addition if you run your Meteor app in 'production mode' the Javascript is packed, handlebars & handlebars templates are precompiled.
In my opinion, it might be actually harder to copy a Meteor app to the previous types of web apps because HTML is rendered on the client side, fetching the html files will actually get back empty html files, if you even prettify the large JS file still leaves back precompiled handlebars templates. In addition files are merged into one!
So thats when it comes to cloning it to another meteor app. Even if getting the client script is available (as with any other stack) there are even more hurdles with Meteor when it comes to replicating the server script:
DDP
Attempting to clone it to a PHP/Server side script stack might be even harder because POST/GET aren't even used, DDP is used instead.
Schema
Width regards to the schema, you can control what the client sees via Meteor.publish, so they won't actually see the whole schema

Resources