DEV Community: Valentin Degenne

Rollup/Vite Plugin hooks comparison

Valentin Degenne — Mon, 15 Jan 2024 12:27:23 +0000

Let's be honest making plugins in Rollup can be exhausting, making plugins in Vite can be exhausting, but trying to develop a utility that supports both version, with same inputs expecting the same output is where the real adventure begins.

Here's a small analysis and comparison that can help thinking things through.

Rollup

First let's run this snippet,



export default {
  input: 'src/index.js',
  output: { dir: 'dist' },
  plugins: [{
    buildStart() { console.log('build started') },
    transform(code, id) { console.log(`transforming ${id}`) },
    buildEnd() { console.log('build ended') },
  }]
}

If we run npx rollup -c, here's the output



build started
transforming src/index.js
build ended

Nothing surprising, now if we run npx rollup -cw (watch), we got



build started
transforming src/index.js
build ended

Same output but now it's waiting for changes. What happens if we change index.js? Then the output will be the same, buildStart and buildEnd hooks are always called, and transform is subsequently called on changed files only (there is a cache system).

Let's jump on Vite behavior before we can compare the two.

Vite

Here's our test config



export default defineConfig({
  plugins: [{
    buildStart() { console.log('build started') },
    transformIndexHtml() { console.log('transform index html') },
    transform(code, id) { console.log(`transforming ${id}`) },
    buildEnd() { console.log('build ended') },
  }]
})

And let's run npx vite build, here's the output:



build started
transforming src/index.js
build ended
transform index html

Very similar to Rollup. In Vite transformIndexHtml can be used to transform the final index html.

Now let see when we run Vite in watch mode (dev) using npx vite



build started
transform index html
transforming src/index.js

Ok what's going on here? Why is the index html transformed before the script and where is build ended log? The index is prior to the script because it's the first resource dynamically called during development. For the buildEnd hook, well... dev is not build so it makes sense (who is using this hook anyway?)

Comparison

Now that we have enough understanding of how both systems work, it's time to make a cheat sheet for a quick comparison:

The first thing to notice is that both Rollup and Vite have pretty similar execution for the build process. Things get tricky in watch mode.

Another thing important to note is that buildStart and transformIndexHtml can be asynchronous which means the content transformations won't actually start until these functions are actually resolved.

Few things about page loading and styling.

Valentin Degenne — Thu, 28 Dec 2023 09:36:05 +0000

One thing to keep in mind when designing a website is that the browser can fetch several resources when the page loads but has a limitation on how many it can download at a time.
So one must be wise and put all the necessary things at the beginning: code splitting can help with that.
But it's a double edged sword problem, split enough to make things load in parallel and speed up the lcp but do not split too much because it could defer the loading of some needed scripts.

StyleSheets

Applying a style from a script...

One solution to reduce the number of requests sent to your server is to slide your stylesheets directly inside your scripts.

import neededStyles from './need-styles.css' with {type: 'css'};

document.adoptedStyleSheets.push(neededStyles);

A document or shadow root can have as many stylesheets as supported and stylesheets stack on top of each other (assuming push is being used). Adding a new stylesheet doesn't discard the previously added ones but will replace the css properties in common.

modulepreload

Fetch scripts before they are even requested in others, that can speed up the load time (compared to requesting them in cascade over the network at execution time).
However preloading a module doesn't execute the script*!* (it just preloads its content).
Preloading a module won't cause a preloading cascade, every scripts need to explicitely be preloaded even the ones included inside a preloaded script:

main.js:

import './sub.js';

index.html:

<link rel="modulepreload" href="./main.js" />
<!-- The following preload is also needed
     even though `sub.js` is imported from `main.js` -->
<link rel="modulepreload" href="./sub.js" />

Firestore

Valentin Degenne — Sun, 18 Jun 2023 18:32:58 +0000

Firestore rules

If no rules are applied to a resource, no one can read/write in it.
Rules are applied to and only to the specified matched pattern and are not recursive. For instance allowing read access on /users/{uid} won't allow read access on /users/{uid}/documents/{docId}.
Only 1MB of data per document allowed.

Accept access for everyone

match /path/to/resource {
  allow read: if true;
}

Accept access if the user is connected

match /path/to/resource {
  allow read: if request.auth != null;
}

Make a resource user-specific

match /user/{uid}/path/to/resource {
  allow read: if request.auth.uid == uid;
}

!! Important !! A path to a resource is a path to a document, for instance read access on "/users/{uid}/records" is not going to make a user able to read documents in that collection, the correct path would be "/users/{uid}/records/{recordId}"

Defining a function

function isAllowed(userId) {
  return request.auth.uid == userId;
}
match /user/{userId}/path/to/resource {
  allow read, write: if isAllowed(userId);
}

JavaScript Web Modular SDK

addDoc: takes a collection and add the provided data, a document is appended to the collection with an auto-generated id.
setDoc: takes a document path (with custom id) and insert data, creates the document if it doesn't exist, if the document already exists the document is replaced (everything is replaced by the new data and data might be lost unless { merge: true } is used).
updateDoc: takes an existing document path (with custom id) and merge data, but if the document doesn't exist, the call throws an error.

onSnapshot

Can listen both on a document or a collection.
Callback on a document is called when information in the document changes but not if a collection is created/updated/removed inside of it (in fact a collection does not directly belong to a document.)
Callback on a collection is called when documents are added/updated/removed inside this collection but not if a collection is created/updated/removed inside one of the documents

arrayUnion

Doesn't work with setDoc and will replace all values.
Should be used with updateDoc.

Installing Stripe in Firebase manually.

Valentin Degenne — Thu, 15 Jun 2023 10:12:42 +0000

There is an easy way to install Stripe into Firebase using the extension available from the extensions hub.

So why going into much trouble and do it manually? Here's the reasons why I thought I'd make a tutorial for it:

Consolidating Firebase functions knowledge in general.
Having a better understanding of how Stripe and Firebase interact with each other.
Proving that it's in fact possible to do it manually and everything is clear and transparent to us.
Being able to customize the "build" and having more control if we want to implement more logic in functions.
Being able to use Stripe locally and use it with the Emulator suite.

Let's get straight to the point.

Preparation

Before trying to install anything, make sure you have already done the following.

Creating a Firebase account, creating a project inside and upgrading the project to a Blaze plan of course¹
Activating both Firestore and Authentication in the Firebase console of that project.
Installing NodeJs (+npm)
Installing git
Installing firebase command line tool (npm i -g firebase-tools)

Ok let's jump right in

0. Requirements

Important

This tutorial assumes you already have an existing local development directory of the project where you want to install Stripe functionalities on your machine.

If that's not the case, please create a directory and initialize a Firebase project. For instance

mkdir myProject
cd myProject
firebase init

During the init process make sure to install Firestore and Functions (and Emulators if you need them). The values you enter there are up to you and will not conflict with any of the steps further in this tutorial. It's important that a functions directory exists at the root of your project before continuing.

1. Cloning base files

Clone the following repository inside you project directory.

git clone https://github.com/vdegenne/install-firebase-stripe-manually.git stripe-functions

2. Inform the CLI of the new functions source (codebase)

firebase init

Make sure to follow these values:

select "Functions" feature using spacebar then Enter
select "Initialize"
choose a name for the codebase (e.g. "stripe-functions")
choose "stripe-functions" for the sub-directory name.
select "TypeScript"
use ESLint if you want
Press Enter to choose the default "No" to every "Overwrite?" notices.
Finally choose "Yes" to install the dependencies.

At this point in time you should have two codebases installed:

functions: the main functions of your app
stripe-functions: the functions relative to Stripe.

(You can see details in firebase.json)

3. Build the sources

cd stripe-functions
npm run build

Builds are in the lib directory in CommonJS format, those are the files Firebase will use during the deployment phase.

At this moment of the tutorial, if you try to deploy the functions then the CLI

// ------------- START DEPRECATED -----------------

3. Build sources

From here we should take few minutes to think how to integrate the functions, there are few possible solutions:

a. I don't need to emulate Stripe during development

If the end goal is to just install stripe functions in GC and we don't need to use it with the emulator, then it's pretty straightforward, just run npm run build and jump right to the next chapter.

b. I need to emulate and I don't have existing functions

This case is also easy to cover, just create a directory called functions at the root of your project and copy all the content of the cloned repository inside this freshly created directory. Then

cd functions
npm run build

And jump to the next chapter.

c. I need to emulate and I have existing functions

To avoid conflicts with your existing files rename src/index.ts to a name of your choice (e.g. stripe.ts) and any other filenames that may conflict with yours.

If you don't use TS then build the sources (npm run build) and copy all content from /lib to your existing functions directory (the files are in CommonJS format, if you are using ESM then you'll have to find a way to compile them).

If you are already using TS then copy all the files from src to your existing functions directory. Make sure to install the dependencies needed by these files (take package.json as a reference, the files need specific versions) and then build and jump to the next chapter.

(In both cases above don't forget to import/export all the components coming from the stripe index file into your main index file)
// ------------- END DEPRECATED -----------------

- Initializing the project in a directory (`firebase init`) + installing the functions emulator during that same process.

¹ The Blaze Plan is what will unlock the "functions" feature in Firabase.

(here's the link to github repository)

Firebase functions "in short"

Valentin Degenne — Wed, 14 Jun 2023 11:17:31 +0000

Firebase functions let you write the logic of your application on the servers of Google.

A function is like a callback that gets executed whenever something happens in your application, i.e. when a user is created/deleted, when your Firestore database changes, etc...

You can then execute anything that you want on these special events.

Source of truth

All the development you are doing on your local machine is considered source of truth. That means every time you need to augment the functionality of your application you have to develop your functions locally and push/deploy them on the cloud.
But the contrary is not true, for instance if you delete a function directly from the console there is no way to reflect the change locally.

Blaze Plan

If you want to use cloud functions you will need to upgrade your project to a Firebase Blaze Plan (more details here).
Don't worry you don't have to pay to switch to that plan because Spark plan is included (but I would still recommend you set a billing alert.)

Google Cloud

Behind the scene Firebase is just a candy-wrapped and user-friendly platform for introducing new users to the Google Cloud world. For instance when you create a Firebase function, in reality the function is just installed on Google Cloud servers.
You can check installed functions and their details at any time going to the cloud functions page

Config

Configs let you pass environmental variables in your functions at runtime. There are few ways of doing that:

functions.config

This is considered the old way, you can use the following command to register a runtime value

firebase functions:config:set MY_KEY="something"

(note: This will save the value in the cloud directly and they will be included inside each deployed functions)

Use firebase functions:config:get > .runtimeconfig.json to save the config object inside functions directory, and then you can retrieve values in your functions with the following:

const {config} = require('firebase-functions/v1');

console.log(config().MY_KEY);

But if your function is defined as a v2 function you should use v2 accessories

v2

In Firebase v2 you have 3 options:

Parameterized configuration

const {defineString, defineInt, ...} = require('firebase-functions/params');

const myParam = defineString('MY_PARAM');
console.log(myParam.values());

During emulation/deployment you'll be asked to enter a default value for your params, and a .env.<project_id> file will be created inside the functions directory (more info there)

dotenv

To use this configuration pattern, create .env file in the functions directory.
Then you can access them in your functions using process.env.<VAR>.
you can have different .env.<type> file and use firebase use to use one or another (more details there)

If you need to migrate from v1 to dotenv, you can use this command firebase functions:config:export. That will export the config values in appropriate dot env files.

secrets

This is considered most secured and also convenient (but with convenience comes a cost?).

More details here

(firestore-stripe-payments create a GC secret during the installation)

For more details about config please read this

Be aware: environment variables are not being loaded during deployment
Here's a possible solution

import {config} from 'dotenv';
config();
// now process.env.<VARNAME> will be available

(note that config() only interprets values in .env by default)

Emulator

We can use firebase command tool to try out our functions before deployment using the emulator.

firebase emulators:start --only functions

Deploying

Once you are done with the development phase, you can deploy your functions using

firebase deploy --only functions

Firebase will create an endpoint for all the exposed functions.

During deployment the JavaScript files are being packaged and sent to the cloud.

Codebases

You can have different functions codebases within your project. This allows you to organize functions into different directories/environments.

It can also help for the deployment as you are able to filter and deploy only functions from a specified codebase, e.g.

firebase deploy --only functions:<codebase_name>

To create a new codebase just run firebase init and select "Functions" and follow the prompts.

Logger

import {logger} from 'firebase-functions';

You can also use the logger from gcloud package (TODO)

Miscellaneous information

You can code split functions into various files as far as you import-export them inside the index.js file (which is the entry point defined in package.json)

[ Article in Progress ]

My journey as I try to install Stripe in my app.

Valentin Degenne — Wed, 14 Jun 2023 09:38:30 +0000

Stripe is at core a REST API (somewhere) that you can use to manage a payment system for your application.

Fortunately, if you already use Firebase, the process of installing Stripe is extremely simplified, but it doesn't mean that it is just few buttons to push.

Here's a succinct list of all the steps:

Create a Stripe account.

Creating a stripe account is easy. By default Stripe comes with a testing environment (test key, ...). That means you don't need to provide your banking informations until you bring your app to production.

Install the Stripe extension into Firebase

Before installing the extension, you'll need to do few things:

Make sure to upgrade your project to Blaze Plan. Upgrading your account is necessary because the extension installs some "functions" which is how Firebase and Stripe services communicate together on special events.
Install Firestore and Authentication Firebase services before continuing.

Once that's done, you can install the firestore-stripe-payments extension from the extensions hub or directly from Firebase "extensions" section.

The installation takes few minutes.
And when it finishes successfully, you are ready to go.

However for me that's where things started to be confusing. And that's where we should start to ask the right questions:

- What does the extension install exactly?

Primarily the extension installs a bunch of functions. (If you are not familiar with functions and what they do please read this). Basically functions are like callbacks that are executed on special events (when a user is created/deleted, when a document is pushed inside a path in Firestore, etc...).

You can check all the installed functions inside your project going to the functions page in Firebase console:

(note: you can always see more details about functions going to the Cloud functions dedicated page)

The first function of interest is the first one. Basically Stripe API creates a checkout session when you push a checkout session document inside the checkout_sessions collection associated with a user. In turn Firebase will update this document with a session ID returned by Stripe API. You can then use this session ID to redirect the user on a Stripe customized checkout page providing this id.

- Is it possible to see the implementation of the functions?

Not directly inside Firebase, but here's the source page

Things that Stripe extension modifies in the cloud

Add a "Firebase Extensions firestore-stripe-payments service account"
Add the Stripe API key in Google Cloud Secret Manager. This key is used for Firebase functions to securely communicate with the Stripe API.

Article still in progress.....

My journey as I learn Firebase

Valentin Degenne — Fri, 09 Jun 2023 14:21:16 +0000

I've learned Firebase in the past but because I've not used it since then it was like learning it all over again, I write this post more as a reference than an actually tutorial.

One thing is for sure Firebase is a bit tough to learn. It is supposed to be easy to use, but the doc is so intimidating and there are so many different concepts revolving around the platform that I found it rather exhausting to approach.

I feel like the first thing most people would want to know is what is the most conventional way to use it, and my answer would be: firebase !

firebase-tools

Do not try to configure something from the console if there is a way to configure it locally on your computer using the firebase command line tool:

sudo npm install -g firebase-tools

This simple execution will make firebase command line tool available on your system.

From there you probably want to initialize a project, make sure you created the project in the console (on the website yeah) first, then in your project directory on your machine run this command (I would suggest you read all the article before running this command as it is one setup and have a lot to digest):

firebase init

Proceed to read to have a small grasp of firebase core features:

Authentication

There is not much to say, that helps to create a login environment for you app. Make sure to activate this feature in the console if you need it.

Firestore

This feature is like live database but more modern (?). I personally prefer using this because it can easily scale and is maybe more intuitive for new comers. You would also need to activate that in your console.

Functions

An easy way to understand what functions are, is to imagine Homer Simpson behind the central console patiently waiting for any signal.

Signals can be of all kind (e.g. "user connected", "new account created", "new data inserted inside the database (firestore)", etc...).
When a signal is received Homer pushes a button to call the appropriate action/function, now a function can be anything you define. For instance you may want to push initialization data inside firestore when a new user register on your website.
firebase init will ask you if you want to write functions using JavaScript or TypeScript. I would recommend using JavaScript here because using ES Modules you still get type checking, and it lifts the burden to have to build every time you modify a file.

As I said signals are various events Firebase listened to, and when a particular event occurs, it runs a function if you've defined it.
Firebase provides a JavaScript package called firebase-functions and it's really straightforward. It provides an interface for signals so it easily reads what it does. Let's look at a small code snippet:

import functions from 'firebase-functions/v1';
import {beforeUserSignedIn} from 'firebase-functions/v2/identity';

export const onUserCreate = functions.auth.user().onCreate(
  (user, context) => { /* ... */ }
);

export const onBeforeSignin = beforeUserSignedIn((e) => {
  // ...
});

All functions are accessible from the firebase-functions/v1 path, here we use the functions.auth.user().onCreate signal to run a function ((user, context) => ...) when a new user is created.

You can access most of functions from v1, but a better way to access functions/signals is to use v2, in the example you can see that we easily import beforeUserSignedIn function/signal and use it in the code, it helps with readability.

A function needs to be exported for Firebase to register it, the names onUserCreate and onBeforeSignin in this example are custom names, it doesn't have to be these values and you can write any name you want as far as they do not conflict.

Querying your firestore from functions file

There is a difference between registering a function using firebase-functions interface, and querying the firestore which can be achieve with the firebase-admin package.
While firebase-functions provides a way to create functions, the firebase-admin module can be used to do various things related to Firebase features, the latter helps you write various logic execution when a function is triggered. Here's an example of how to populate data in firestore when a new user is created:

import functions from 'firebase-functions/v1';
import admin from 'firebase-admin';

admin.initializeApp();

export const onUserCreate = functions.auth.user().onCreate(
  async (user, context) => {
    const firestore = admin.firestore();
    const userRef = firestore.doc(`users/${user.uid}`);

    await userRef.set({
      premium: false,
      bookmarks: [],
      website: ''
    });
});

Emulators

If you've installed some emulators during firebase init, you can run them using the following command:

firebase emulators:start

and access http:localhost:4000 to meet with the UI.

From here you have to tell your app to use the various emulators endpoint rather than the remote ones
For instance for Authentication you would use :

import {getAuth, connectAuthEmulator} from 'firebase/auth';

export const firebaseAuth = getAuth();
connectAuthEmulator(firebaseAuth, 'http://127.0.0.1:9099');

I finally understand TypeScript `outDir`, `include`, `exclude` configuration properties...

Valentin Degenne — Wed, 18 Nov 2020 21:45:41 +0000

It took me a while to understand the behavior behind these TypeScript properties and that was driving me nuts at times. Every time I start a new project I forget what they are because you don't use them often, just when you set up your project scaffold. So that's why I write this small post, to remember.

Let's use this base for our examples

.
├── node_modules
├── src
│   ├── main.ts
│   └── test
│       └── a.ts
└── test

outDir

outDir is default to each individual file location. So for instance the compiler will output the file src/test/a.ts as src/test/a.js, quite simple.
It's important to understand that not using outDir or using "./" as its value is not the same thing !

include

include is default to ["**/*"] which translates to compile every ts files encountered recursively from the root (defined by the rootDir property).

Now here's the tricky part, when you don't use outDir the interpreter uses the full paths, so for instance the file src/test/a.ts (matched by src/**/*) will go in the same absolute path matched by src/**/* (therefore src/test/a.js).

But when you use outDir the wildcards are what is really interpreted by the compiler, so for instance when you use "outDir": "./" the file src/test/a.ts will go in the location matched by the wildcards in the expression src/**/* therefore prepended outDir ./ plus test/a.ts (not src/test/a.ts !), src here is not part of the match, it's just a reference to find the files.

exclude

Now you may ask, if the root is my project why won't ts files in node_modules get compiled as well ? The reason is because the default value of exclude is node_modules.

one example

If you want your compilation to have this final structure :

.
├── main.js
├── node_modules
├── src
│   ├── main.ts
│   └── test
│       └── a.ts
└── test
    └── a.js

you would use tsconfig.json like that

{
  "compilerOptions": {
    "outDir": "./"
  },
  "include": [ "src/**/*" ],
  "exclude": []
}

ngxtop

Valentin Degenne — Wed, 13 May 2020 20:15:34 +0000

If you are looking for a fast way for live monitoring your server http(s) traffics here's a tool that is easy to install : ngxtop

All you need is to have python and pip installed on your system :

apt-get install python python-pip

And then use pip to install the tool

pip install ngxtop

If the installation fails, there is a big chance that you need to update the setup tools as well and try again :

pip install --upgrade setuptools
pip install ngxtop

After the tool is installed you can type ngxtop. The tool assumes you didn't modify the access log in your nginx configuration (/var/log/nginx/access.log) and run successfully.

Next you can visit one page of your server and you should see live update in the terminal.

More details on the github

Further

If you search for a more advanced tool you should also consider checking goaccess. goaccess is more like a log analyzer, it is also real-time but the stats is made from all the data in the log versus ngxtop that starts making stats from the moment you run the command.

i3-dmenu-desktop and desktop applications

Valentin Degenne — Tue, 05 May 2020 23:23:49 +0000

Here is three locations your desktop launchers (e.g. i3-dmenu-desktop) might look inside to list desktop applications :

/usr/share/applications
/usr/local/share/applications
~/.local/share/applications

Note that in reality it searches for "applications" folder inside the folders listed under the environment variable $XDG_DATA_DIRS.

DEV Community: Valentin Degenne

Rollup/Vite Plugin hooks comparison

Rollup

Vite

Comparison

Few things about page loading and styling.

StyleSheets

Applying a style from a script...

modulepreload

Firestore

Firestore rules

Accept access for everyone

Accept access if the user is connected

Make a resource user-specific

Defining a function

JavaScript Web Modular SDK

onSnapshot

arrayUnion

Installing Stripe in Firebase manually.

Preparation

0. Requirements

1. Cloning base files

2. Inform the CLI of the new functions source (codebase)

3. Build the sources

3. Build sources

a. I don't need to emulate Stripe during development

b. I need to emulate and I don't have existing functions

c. I need to emulate and I have existing functions

- Initializing the project in a directory (firebase init) + installing the functions emulator during that same process.

Firebase functions "in short"

Source of truth

Blaze Plan

Google Cloud

Config

functions.config

v2

Emulator

Deploying

Codebases

Logger

Miscellaneous information

My journey as I try to install Stripe in my app.

Create a Stripe account.

Install the Stripe extension into Firebase

- What does the extension install exactly?

- Is it possible to see the implementation of the functions?

Things that Stripe extension modifies in the cloud

Article still in progress.....

My journey as I learn Firebase

firebase-tools

Authentication

Firestore

Functions

Querying your firestore from functions file

Emulators

I finally understand TypeScript `outDir`, `include`, `exclude` configuration properties...

outDir

include

exclude

one example

ngxtop

Further

i3-dmenu-desktop and desktop applications

- Initializing the project in a directory (`firebase init`) + installing the functions emulator during that same process.