
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
@quintype/framework
Advanced tools
Libraries to help build Quintype Node.js apps
This is the framework that powers Malibu.
Please see Isomorphic Rendering for an overview of the architecture of this library.
The Documentation is available here: https://developers.quintype.com/quintype-node-framework
Please see malibu for a reference application using this architecture.
Some Topics which are not covered in the documentation (yet), are below
In your server.js, you will notice something like the following
isomorphicRoutes(app, {
generateRoutes: generateRoutes,
loadData: loadData,
pickComponent: pickComponent,
});
This highlights the three important places to put stuff for an isomorphic app
pageType
, typically in app/server/routes.js
(see the routing section above)pageType
, typically in app/server/load-data.js
. This returns a promise with required data.pageType
, typically in app/isomorphic/pick-component.js
. This must be a pure componentSince is difficult to force Service Workers to update, there is a provision to do such a thing. Add the following to the correct places. Whenever a change is to be forcefully pushed, update the version in app-version.js. The next AJAX page load via /route-data.json
will force the service worker to update in the background (and the next refresh will have changes).
Ideally, you will have to push this after purging caches on /shell.html and the service worker.
// app/isomorphic/app-version.js
module.exports = 1;
// app/server/app.js
import {isomorphicRoutes} from "@quintype/framework/server/routes";
isomorphicRoutes(app, {
...
appVersion: require("../isomorphic/app-version")
...
});
// app/client/app.js
startApp(renderApplication, CUSTOM_REDUCERS, {
...
appVersion: require("../isomorphic/app-version")
...
});
// views/js/service-worker.ejs
const REQUIRED_ASSETS = [
{url: '/shell.html', revision: '<%= appVersion %>'},
...
];
The response of the /route-data.json will look like the following:
{
appVersion: 42,
title: "This is the title of the page",
// When multi domain support is enabled, this will be the canonical url of the domainSlug.
// See multi domain support for more information
currentHostUrl: "https://canonical-root.your-host.com",
primaryHostUrl: "https://www.your-host.com",
// your loadData function is responsible for loading this entire data
data: {
pageType: "story-page",
story: {}
}
}
Multi domain support is achieved by assigning a section to a domain via the domain manager in the editor. Once this is done, add the following entries into your publisher/config.yml
.
# publisher/config.yml
domain_mapping:
subdomain.my-domain.com: sub
another.my-domain.com: another
Doing this will enable a field called domainSlug
to be passed to various functions, such as generateRoutes
and loadData
. This can be used to load data specific to the domain.
Further, /route-data.json
will have two more fields at the root level. domainSlug
, which is the slug of the loaded domain. currentHostUrl
specifies which domain you are on. The currentHostUrl
is used by the link field to decide if it should do an ajax navigation or not.
assetify
function, please annotate the application-js with id="app-js". The hostname specified here is assumed to be the cdnStarting in @quintype/framework
v3, we are introducing multi domain support. The configuration for section page locations is now controlled by the editor. Please switch to using generateCommonRoutes
to generate story page, and section page routes.
import { generateCommonRoutes } from "@quintype/framework/server/generate-routes";
export function generateRoutes(config, domainSlug) {
return generateCommonRoutes(config, domainSlug, {
sectionPageRoutes: true,
storyPageRoutes: true,
});
}
OneSignal interferes with our service worker, so a few changes have to be made to enable PWA with OneSignal.
// app/server/app.js
import {isomorphicRoutes} from "@quintype/framework/server/routes";
isomorphicRoutes(app, {
...
oneSignalServiceWorkers: true
...
});
// app/client/app.js
startApp(renderApplication, CUSTOM_REDUCERS, {
enableServiceWorker: true,
serviceWorkerLocation: "/OneSignalSDKWorker.js", // OneSignal will automatically register the service worker
})
Steps to Integrate FCM in your project
firebaseConfig
can either be an object or a function that returns the firebase config objectExample:
startApp(renderApplication,
CUSTOM_REDUCERS,
{
enableServiceWorker: process.env.NODE_ENV === "production",
firebaseConfig: {
messagingSenderId: --YOUR KEY-- ,
projectId: --YOUR KEY--,
apiKey: --YOUR KEY--,
storageBucket: --YOUR KEY--,
authDomain: --YOUR KEY--,
appId: --YOUR KEY--,
}
...
})
isomorphicRoutes(app, {
...
fcmServerKey: (config) => <ServerKey> || fcmServerKey: <ServerKey> {(function|string)}
...
});
You should have service worker script named firebase-messaging-sw.js in /public
Example of the script:
importScripts("https://www.gstatic.com/firebasejs/9.6.10/firebase-app-compat.js");
importScripts("https://www.gstatic.com/firebasejs/9.6.10/firebase-messaging-compat.js");
firebase.initializeApp({
messagingSenderId: --YOUR KEY-- ,
projectId: --YOUR KEY--,
apiKey: --YOUR KEY--,
storageBucket: --YOUR KEY--,
authDomain: --YOUR KEY--,
appId: --YOUR KEY--,
});
self.addEventListener('notificationclick', (event) => {
const url = event.notification.data.url;
if(url) {
clients.openWindow(url);
}
clients.openWindow(-- YOUR Sketches Host --);
}, false);
const messaging = firebase.messaging();
messaging.onBackgroundMessage(function(payload) {
const data = payload["data"];
const notificationTitle = data.title || ""
const notificationOptions = {
body: data.body,
icon: data["hero_image_s3_url"],
image: data["hero_image_s3_url"],
data: {
url: data["click_action"],
}
};
self.registration.showNotification(notificationTitle,
notificationOptions);
});
Make sure that the page data should have config with key fcmMessageSenderId refer doStartApp function in app/client/start.js.
This can be used where /route-data.json
is not accessible (example preview).
Add the following:
<script type="text/javascript">
var staticPageStoreContent = <%- JSON.stringify(store.getState()) -%>;
</script>
The store will be initialized from staticPageStoreContent
(to be documented)
Make sure you do all of the following techniques to reduce page load time (notes to document these later)
<script type="application/json" id="initial-page">
{ "config": {} }
</script>
<script type="application/json" id="static-page">
{ "config": {} }
</script>
Preloading app.js and /route-data.json can be triggered by passing preloadJS true, and preloadRouteData true to isomorphic handler
FIXME: Write notes on host_to_api_host
, host_to_automatic_api_host
, wildcard_to_api_host
and skip_warm_config
sh <(curl https://raw.githubusercontent.com/quintype/quintype-node-framework/master/scripts/framework-2-to-3-migration)
git diff --cached
FAQs
Libraries to help build Quintype Node.js apps
The npm package @quintype/framework receives a total of 457 weekly downloads. As such, @quintype/framework popularity was classified as not popular.
We found that @quintype/framework demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.