Forem: sven Gaubert

Guide to nextjs + turbopack ⚡️🏎️

sven Gaubert — Mon, 03 Mar 2025 07:58:35 +0000

I really like Next.js, but it's commonly known to become really slow when your project grows.
On my side, I could wait sometimes 40 seconds 🤯 to have one page compiled and displayed when developing smartrole.ai, a big monorepo with turborepo, nextjs, pnpm, tailwind and prisma amongst others.
I've tried to play with NextJS settings, like webpack, serverExternalPackages, or modularizeImports, but nothing really works.

TBH, I was even considering switching to another framework.😢 Then comes Rust in the game, with Turbopack...
Enabling Turbopack is not straightforward at all, but it’s worth it: now it's just a matter of 1 or 2 seconds to compile ! 🤩

So here's a guide on how I achieved this leap in performance and tackled some common issues along the way.

Installation

The easy part. In package.json, simply add --turbo:

"scripts": {
  "dev": "next dev --turbo"
}

Note: you also have --turbopack options, which does the same, except you can't configure it using the experimental.turbo option.

Remove the webpacksection from your next.config.ts, as Turbopack comes as a replacement of webpack.

Troubleshooting Common Issues

Package resolves to a different version

When working with Turbopack, you might encounter an error like this:

The request prettier/standalone matches serverExternalPackages (or the default list).
The package resolves to a different version when requested from the project directory (3.5.1) compared to the package requested from the importing module (3.4.2).
Make sure to install the same version of the package in both locations.

Solution: To resolve version mismatches, add pnpm.overrides to package.json:

"pnpm": {
    "overrides": {
      "prettier": "3.5.2"
    }
  },

Package can't be external

If you encounter an error stating that a package cannot be external, you might see something like this:

Package @libsql/client (serverExternalPackages or default list) can't be external
The request @libsql/client matches serverExternalPackages (or the default list), but it can't be external:
The request could not be resolved by Node.js from the project directory.
Packages that should be external need to be installed in the project directory, so they can be resolved from the output files.
Try to install the package into the project directory.
Next.js package not found

Solution: Create a .npmrc file at the root of your monorepo with the following content to ensure all dependencies are installed correctly:

legacy-peer-deps=true
public-hoist-pattern[]=*import-in-the-middle*
public-hoist-pattern[]=*require-in-the-middle*
public-hoist-pattern[]=*motion/react*
public-hoist-pattern[]=*motion*
public-hoist-pattern[]=*keyv*
public-hoist-pattern[]=*chart.js*
public-hoist-pattern[]=*@prisma/client*
public-hoist-pattern[]=*@aws-sdk/client-s3*

For further context, refer to the GitHub issue related to this problem.

Next.js package not found

Sometimes, Turbopack may fail to locate the Next.js package, resulting in an error like:

- Execution of get_entrypoints_with_issues failed
- Execution of Project::entrypoints failed
- Execution of AppProject::routes failed
- Execution of directory_tree_to_entrypoints_internal failed
- Execution of directory_tree_to_entrypoints_internal failed
- Execution of directory_tree_to_loader_tree failed
- Execution of *FileSystemPath::join failed
- Execution of get_next_package failed
- Next.js package not found]

Solution: To fix this, delete the pnpm-lock.yaml file. This can help resolve dependency resolution issues.

See the GitHub discussion for more details.

The "path" argument must be of type string. Received undefined

It appears with next 15.2.0

Solution: Downgrade to a more stable version by setting your Next.js version in package.json to 15.1.7.

Refer to this GitHub issue for more insights.

Seed your project in the freemium jungle🌴🌴

sven Gaubert — Tue, 28 Apr 2020 12:52:07 +0000

So many freemium services to help you launch your side project or startup!

Here is a step-by-step guide to setting up a complete project, from logo design to marketing and of course hosting. WITH ONLY FREE(MIUM) services !!

TLDR;

For those who are in a hurry, we will present the following products in this article:

Development

Logo branding with Tailor Brands
Code versioning on a private repo, with Github or Gitlab
Authentication with Google or Facebook account
Double Authentication with Google Authenticator
Database with MongoDB Atlas
Storage with Cloudinary
Hosting & API with Netlify or Vercel
Emailing with Mailgun or Mailjet
Payment with Stripe or Paypal
Performance Check with Lighthouse & WebPageTest

Marketing

Newsletter with Mailchimp
Seo with UberSuggest
Analytics with the aptly named Google Analytics
Live chat with Hubspot or Freshchat

Quick Notice

This choice is purely subjective, and there are many great services created every day, with a freemium offer. We tried to choose well-known services with an interesting free offer and no trial period.

Also, some of the provided links are sponsored 💸. No worries, we didn't choose those services because of their affiliation program, but because they are simply the best.

If you feel a must-have is missing, please feel free to contact us!

Logo Branding

Tailor Brands is a team of experts who are dedicated to streamlining the branding procedure for startups and small businesses. It makes it branding accessible for all regardless of their background in design, skill level, and budget size. Tailor Brands has created a platform where branding and logo design has been made so much easier and fun with its huge amount of designing and branding tools. For this reason, it has 14 million users who have created about 500 million unique designs on this platform.

You can design a logo for your company for free in a matter of minutes! There are six steps you need to follow for the design of your logo and by the end, you will be able to download the logo in the form of an EPS file or SVG.

Code Versioning on a private repo

It's a long time since you had to set up your own SVN server. ;-)

Now, simple choose a free service between Github (acquired by Microsoft in 2018) or Gitlab.

Unlimited private and public projects
Unlimited collaborators
Free minutes for Continuous Integration (CI) and Delivery (CD)
Project Issue Board

Also Bitbucket is a good alternative, but only 5 collaborators per repo.

Authentication with Google or Facebook account

OAuth protocol is used for authentication using Google or Facebook. Just register your client on Facebook Developpers or Google Console, then your client can call those services with the requested information (user profile, email, ...), the user will be redirected to the authentication service login page, and finally your server will receive the access token, with the requested information. And all this at no cost!

Double Authentication with Google Authenticator

Two-Factor Authentication (2FA) It's a must-have if your service uses sensitive data and you want to add an extra layer of protection. 2 classical options: send an SMS to the user to double authenticate him/her, but you'll have to pay the SMS, or use Google Authenticator for free! There are plenty of tutorial available on internet to setup Google Authenticator, for example this one for PHP.

Database with MongoDB Atlas

MongoDB Atlas provides the easiest way to manage and host data in the cloud. Optimization and monitoring of database pain can be reduced by using extended set tools and features that are included in MongoDB Atlas.

Choose your favorite cloud providers (AWS, Google Cloud or Azure), then your region (be careful to choose the same region as the server hosting your site), and that's it! You have a mongodb database entirely on the Cloud, with a good 500MB of storage.

Another interesting alternative is FaunaDB, with a generous 5Gb of storage, (yes, 5Gb for free!) but the Fauna Query Language (FQL) can be a little confusing at first.

Storage with Cloudinary

Cloudinary is a media management platform that provides an end-to-end solution for all your video and image needs. Its key features are file storage and upload, cloud asset management, video, and image manipulation (thumbnails, resizing, etc...), fast deliver, optimization and presentation. There is a secure cloud system for the storage of videos and images.

Images and videos can be directly uploaded from the browser, or using Cloudinary's SDKs & upload API.

Also, you can upload some private assets, only accessible with a signed Urls.

And every month, you'll have 25 credits for free! For an example usage, 2GB of image storage (2 credits), 4GB of bandwidth (4 credits) and 4000 monthly transformations (4 credits) will need 10 credits.

Web Hosting & API with Netlify or Vercel

Forget about hosting your own servers, setting up kubernetes (arghh), and receiving the invoice at the end of the month! At least, at the beginning when launching your project (and even further).

Just choose between Netlify or Vercel (ex Zeit.co, ex Now.sh), to host your website, your API (using serverless), and even with a micro service approach!

On both services, you can deploy your site manually from your local (and save minutes of build time), or deploy automatically from your Git repository when commits are added.

Once deployed, your service will benefit from a global CDN for your website, and your api from an auto-scalable serverless environment.

An interesting freemium alternative is Heroku, but it suffers a couple of convenient. First, the service is less handy to use than Netlify or Vercel. And once you've got traffic, the cost will increase significantly.

Also Firebase is a great option, but the interface is a bit complicated, and I found this technology a bit invasive (you have to install the Javascript SDK into your app), so it will be difficult to move your service to another provider if you are not satisfied.

Payment with Stripe or Paypal

Stripe is a payment gateway platform, which handles many countries, currencies and payment methods (Visa, mastercard, Alipay, Apple Pay, Giropay, iDEAL, SEPA, Wechat and many more).

No setup fees or monthly subscription, only a % on each transaction (e.g USA=2.9%+30¢, France 1.4%+€0.25, Singapore 3.4%+$0.50).

Stripe supports one-time payments or subscriptions, using direct API or checkout (a payment page hosted by Stripe). And it supports Strong Customer Authentication (SCA), aka 3D Secure.

⚠️Stripe also manage products, skus & inventory, but some apis have been deprecated (orders API), so I would strongly recommend to use the service as a payment gateway only.

Another good option is Paypal of course, a bit older so you can easily be lost in the documentation, but it works well.

Same same than Stripe, Paypal only takes a % on each transaction (e.g USA=2.9%+30¢, France 2.9%+€0.35, Singapore 4.4%+$0.30).

Emailing with Mailgun or Mailjet

I've used Mailgun for years, and this service is doing one thing really well: sending and receiving emails.

It provides a complete track record of your received and sent emails through applications and websites. SMPT or API are the two methods that can be used to interact with the service. You can also define some emails templates to use, which is great, but no visual editor year. And with the flex plan, you can send up to 5,000 emails / month for free.

Mailjet (acquired by... Mailgun (!) in 2019) is also a great service to send and receive emails, 6,000 emails per month, save unlimited contacts, with an API, SMTP Relay, & Webhooks, send newsletters, etc...

Also a key feature in Mailjet is the Visual Email template editor. So easy to update emails content, in Html or MJML to design responsive emails.

Newsletter with Mailchimp

Mailchimp is an amazing tool to send newsletter or automated emails (welcome email, order notifications, etc...), with multiple features.

The free plan comes with 10,000 emails per month, and 2000 contacts.

Mailjet is also a good option to send newsletter, but no automation in the free tiers.

Search Engine Optimization (SEO)

Ubersuggest is a really complete tool provided by Neil Patel, a famous SEO expert. This tool allows you to dig into searches and keywords to help you increase your page rank.

Neil's newsletter also provides high quality content to train you in SEO.

Performance Check

Google Lighthouse is an easy going tool to audit your website and measure performance, accessibility and SEO best practices.

You can launch Lighthouse directly from your chrome dev tools, or from the command line, or online from the Google PageSpeed Insights website.

WebpageTest is also an handy tool to measure the performance of your website, even if the design is soooo 80's 😝. The project is open-sourced by the way.

Analytics with Google Analytics

Google analytics is one of the most popular service to analyze the visitors on your website in detail, for free.

This service can provide you with valuable insights such as track your video, mobile applications and social networking sites.

Live chat with Hubspot or Freshchat

Finally, once your website is up and running, Hubspot and Freshchat will help you interacting with your customers with a live chat. You're not online ? Those services will notify you by email or on Slack, so you can

Too much services to integrate ? Don't worry 😉

At Fullstack Rocket, we want to help entrepreneurs get their idea off the ground. We have integrated most of these free services into easy-to-deploy solutions.

Our service is quite new, but we have already a few solutions that handle common features, like user registration and login, email template creation, asset storage, and much more.

We are also looking for talented developers who want to offer and sell their own solution. If you are interested in monetizing your project, contact us!

Conclusion

There are so many high quality freemium services, this article has presented some of them, and I'm sure you will have many in mind, so please share with us, and I will update this article accordingly.

Also, a couple of advices to conclude:

before developing a feature, check if it doesn't already exist in the cloud.
Keep in mind that conditions of use can change overnight,
Prefer well-known services to services that are too new.
Check carefully the different plans offered to avoid surprises if your service generates traffic.

And happy coding ! 🤓

Authentication using Netlify, lambda… and PassportJS 👮‍♀️

sven Gaubert — Tue, 11 Feb 2020 23:07:56 +0000

This article was originally written on Medium

You can easily use ExpressJS and PassportJS to do authentication on Netlify with lambda functions.

TLDR;

For those in a hurry, an online demo is available, and source code of the sample project is available here:

svengau / netlify-authentification-sample

Authentication with netlify lambda functions, PassportJS and Express

Example of netlify authentication with Passportjs

This project shows how to use the very popular PassportJS library (normally available under expressjs) with the Netlify platform running under AWS Lambda.

We took the example of Google OAuth, but you can use any PassportJS strategy (Twitter, Facebook, Local, JWT, Github, ...).

You can clone on you local with:

git@github.com:svengau/netlify-authentification-sample.git

Alternatively you can deploy straight to Netlify with this one-click Deploy:

Once deployed, don't forget to configure the 3 following env variables:

GOOGLE_AUTH_CLIENT_ID: your google client id
GOOGLE_AUTH_CLIENT_SECRET: your google client secret key
SESSION_SECRET: a random session secret

Live Demo

You may test out a deployed version of this project here: https://netlify-authentification-sample.netlify.com/

View on GitHub

Netlify & the identity module

Netlify is a great product to deploy static apps or even with API (using lambda functions). The service also manages authentication with the identity module: this module may match your requirement, but the free offer has some limitations, and the first paid offer costs $99/month/site! If you have several sites, it can quickly become very expensive.

In the following example, I will show you how to use the very popular PassportJS library to authenticate with Google Auth. With PassportJS, you have more than 500 authentication strategies (Twitter, Facebook, Local, JWT, Github,…) to choose from, for free!

Configuration from scratch

Netlify provides a create-react-app-lambda boilerplate to start an application with create-react-app and lamdba, but we will start from scratch with create-react-app.

So, let’s go! we’ll create a React app, with lambda functions, that will load an express application to be able to use passportJS and Google strategy. No need for a database, we will store everything in cookies thanks to the client-session library.

1. Install the netlify CLI in global mode:

npm install netlify-cli -g

2. Create the React application, with the following dependencies:

npx create-react-app netlify-authentification-sampleyarn add serverless-http passport passport-google-oauth20 lodash client-sessions cookie-parseryarn add -D netlify-lambda npm-run-all http-proxy-middleware env-cmd

3. Add a proxy as described in the facebook doc, to point the url /netlify/functions to our API:

const proxy = require("http-proxy-middleware");module.exports = function setupProxy(app) {  
  app.use(  
    proxy("/.netlify/functions/", {  
     target: "http://localhost:8888/"  
    })   
  );  
};

4. Create the file netlify.toml, to configure the build:

[build]  
command = “yarn build”   
functions = “build-lambda”   
publish = “build”

5. The src/lambda directory (but not the subdirectories) contains all the lambda functions. Create an src/lambda/auth.js function that will support authentication:

import serverless from "serverless-http";  
import app from "./lib/express";  
exports.handler = serverless(app);

This function will be accessible from /.netlify/functions/auth

6. And configure the express application, with the cookie parser, client session and passport:

app.use(cookieParser());  
app.use(  
  sessions({  
    cookieName: "session",  
    secret: process.env.SESSION_SECRET,  
    cookie: {  
      ephemeral: false,  
      secure: false  
    }  
  })  
);  
app.use(passport.initialize());  
app.use(passport.session());  
passport.serializeUser(  
  (user, cb) => cb(user ? null : "null user", user)  
);  
passport.deserializeUser(  
  (user, cb) => cb(user ? null : "null user", user)  
);

7. Add the PassportJS strategy for Google:

router.use((req, _res, next) => {  
  const {  
    query: { host }  
  } = req;if (!passport._strategy(Strategy.name) && host) {  
    console.info(`Init Google Auth strategy on host ${host}`);  
    passport.use(  
      new Strategy(  
        {  
          clientID: process.env.GOOGLE_AUTH_CLIENT_ID,  
          clientSecret: process.env.GOOGLE_AUTH_CLIENT_SECRET,  
          callbackURL: `${host}/.netlify/functions/auth/google/callback`,  
          passReqToCallback: true  
        },  
        async function(req, _token, _tokenSecret, profile, done) {  
          console.info("load user profile", profile);  
          const user = {  
            id: profile.id,  
            image: get("photos[0].value")(profile),  
            userName: profile.displayName  
          };  
          req.user = user;  
          return done(null, user);  
        }  
      )  
    );  
  }  
  next();  
});  
router.get(  
  "/google",  
  passport.authenticate("google", {  
    scope: [  
      "[https://www.googleapis.com/auth/userinfo.profile](https://www.googleapis.com/auth/userinfo.profile)",  
      "[https://www.googleapis.com/auth/userinfo.email](https://www.googleapis.com/auth/userinfo.email)"  
    ]  
  })  
);  
router.get(  
  "/google/callback",  
  passport.authenticate("google", { failureRedirect: "/" }),  
  function callback(req, res) {  
    console.info(`login user ${req.user && req.user.id} and redirect`);  
    return req.login(req.user, async function callbackLogin(loginErr) {  
      if (loginErr) {  
        throw loginErr;  
      }  
      return res.redirect("/");  
    });  
Note: these settings are sensitive and private, and should not be commuted in git. You will also have to declare them in the netlify interface in the “Build & Deploy > Environment” section.  
  }  
);

As you can see, the host parameter is sent by the client, because within a lambda function, you can access the host or requested url.

8. Store the private keys in .env file:

GOOGLE_AUTH_CLIENT_ID=<youclientID>.apps.googleusercontent.com  
GOOGLE_AUTH_CLIENT_SECRET=<youClientSecretKey>  
SESSION_SECRET=<ARandomString>

Note 1: these settings are sensitive and private, and should not be commited in git. You will also have to declare them in the netlify interface in the “Build & Deploy > Environment” section.

Note 2: If you have public settings in your application, you can also declare them only once in netlify.toml, in the “build.environment” section

And voila ! 🎉

Now, you just have to start your app locally with yarn dev

Deployment on Netlify

Really simple, 2 methods:

deployment directly from the git repository. For more details, see the netlify documentation
command line deployment, with: netlify deploy

once deployed, configure the environment variables in the netlify interface, the same way you’ve done it in .env file:

GOOGLE_AUTH_CLIENT_ID
GOOGLE_AUTH_CLIENT_SECRET
SECRET_SESSION

Conclusion

You can easily use express and PassportJS with Netlify, and it’s a bless 👼. It’s interesting for the following reasons:

ExpressJS has a very rich ecosystem
you have an existing project under express and want to make a smooth migration
you know express well

However, there are some limitations to be taken into account. According to the documentation, all serverless functions are deployed with:

us-east-1 AWS Lambda region
1024MB of memory
10 second execution limit

So if you start using express, try to keep your application small (if necessary, you can split it over several endpoints), use a database in the same region as your Netlify application (us-east-1), and no heavy operations that last long.

Finally…

A little self-promotion 😇 does not hurt: At FullStack Rocket, we have developed pre-packaged offers that can be deployed directly on Netlify, for a free hosting cost if you don’t have traffic. Ideal for startups who want to test their concept quickly ! You will earn time and money !

And Happy coding ! 😎

When GraphQL meets gRPC… 😍

sven Gaubert — Tue, 11 Feb 2020 11:16:39 +0000

This article was originally written on Medium

Context

At Aiptrade, we have a micro-service architecture, deployed on Kubernetes:

backend services discuss with each others via pub-sub,
and ONLY one frontend service to manage the API. Argh.

This frontend service has grown and is now fat, so it’s time to truncate it, and move to a Backend for Frontend (BFF) architecture.

At first, we tried GraphQL schema stitching, which sounds really awesome, but it comes with some problems: conflict management between types of the same name, heterogeneous error handling, and we were also worried about performance, since a graphQL request is parsed twice.

So we turned to gRPC. Very promising on paper, library available in several languages, with a typed contract similar to GraphQL, used for several years by Google internally, in short the Holy Grail! 🤩

I won’t explain GraphQL gRPC nor protobuffer, there are plenty of articles and the official documentation is good. So let’s dig into the project.

The sample project

Our PoC will allow us to create… well… blog posts as usual 😄, and is composed with:

a graphQL server, in front of the client as our unique BFF entry point. Its role is mainly to validate input data (required / optional fields, type, …) and filter output data. The validation here is important since required & optional fields have been dropped from proto3. It also acts as a client to the gRPC micro-service.
a gRPC server, to perform all functional operations. Here to create and list some blog posts.
those 2 micro-services will be hosted on k8, so we will also implement a Health check mechanism, in gRPC please!

Sample Architecture diagram with GraphQL & gRPC (cc cloudcraft.co)

Setup

For the GraphQL Server, apollo-server does the job perfectly. And it offers a very convenient graphQL playground to run our queries.

For gRPC, We will use NodeJS for the server and client side, because gRPC libraries on NodeJS can dynamically generate the code at runtime, which is awesome to quickly do a PoC, unlike other libraries available on other platforms (Go, PHP, Java, Python,…), that require the protoc compiler to generate a stub at build time. If you prefer working with static generated code, here a really interesting article.

On the client side, the official gRPC client works like a charm. It can handle interceptors, but doesn’t support Promises. If you prefer working with async / await, grpc-caller is a good alternative.
On the server side, The official gRPC-node library doesn’t support interceptors, so we have chosen mali, a really simple and easy to use library for gRPC, which supports metadata and middlewares (aka interceptors).

To run the PoC:

git clone [git@github.com](mailto:git@github.com):svengau/grpc-graphql-sample.gitcd post-api && npm i && npm start  
cd graphql-api && npm i && npm start🚀 Server ready at [http://localhost:4000/graphql](http://localhost:4000/graphql)

and run the following query:

mutation {  
 addPost(data: { title: “helloooo” }) {  
   message  
   result { \_id title body }  
 }  
}

The wedding contract

The gRPC server exposes 2 proto3 contracts:

Post.proto, a sample contract to create and list blog posts.
Health.proto, a contract proposed by gRPC to check service Health from Kubernetes.

The proto3 contract, in the post.proto file:

message Post {  
  string \_id = 1;  
  string title = 2;  
  string body = 3;  
}message Posts {  
  int32 page = 1;  
  int32 limit = 2;  
  int32 count = 3;  
  repeated Post nodes = 4;  
}message addPostRequest {  
  reserved 1; // \_id  
  required string title = 2;  
  string body = 3;  
}message listPostRequest {  
  optional string page = 1 \[default = 1\];  
  optional string limit = 2;  
  optional string \_id = 3;  
}service PostService {  
  rpc addPost (addPostRequest) returns (Post) {}  
  rpc listPosts (listPostRequest) returns (Posts) {}  
}

And to serve the proto file, as simple as:

import Mali from "mali";this.server = new Mali();this.server.addService("\[...\]/Post.proto", "PostService");  
this.server.use({ PostService: { addPost, listPost } })this.server.start("0.0.0.0:50051");

Security

gRPC supports natively 2 mechanisms:

SSL/TLS: this will encrypt all the data exchanged between the client and the server, and works at the channel level.
Token-based authentication with Google: aka OAuth2 tokens, and must be used on an encrypted channel.

SSL/TLS is a must have since Google doesn’t allow any unencrypted connections with its services. We won’t use token-based authentication, but a simple mechanism based on an API key to illustrate how work interceptors. By the way, Google Cloud Endpoints uses also a similar mechanism to restrict access to their API.

SSL

To generate SSL certificates for CA, client and server, just launch in post-api:

src/cert/generate\_using\_openssl.sh

I’ve also put another sample script which uses certrap, a convenient tool provided by Foursquare.

Once generated, the certificates use is well-documented in the official gRPC site, basically:

const credentials = grpc.ServerCredentials.createSsl(  
 fs.readFileSync(\_\_dirname + ‘/cert/ca.crt’),  
 \[{  
   cert\_chain: fs.readFileSync(\_\_dirname + ‘/cert/server.crt’),  
   private\_key: fs.readFileSync(\_\_dirname + ‘/cert/server.key’)  
 }\], true);this.server.start("0.0.0.0:50051", credentials);

And on the client side:

const packageDefinition = protoLoader.loadSync(... + '/Post.proto');const  proto = grpc.loadPackageDefinition(packageDefinition);let credentials = grpc.credentials.createSsl(  
 fs.readFileSync(\_\_dirname + ‘/../cert/ca.crt’),  
 fs.readFileSync(\_\_dirname + ‘/../cert/client.key’),  
 fs.readFileSync(\_\_dirname + ‘/../cert/client.crt’)  
 );const options = {  
 "grpc.ssl\_target\_name\_override": "localhost",  
};const client = proto.sample.PostService(host, credentials, options);

️Small tip 💡: the certificates have been generated to use with localhost, so the option grpc.ssl_target_name_override allows us to reuse the same certificates with a remote gRPC server. Without this option, you have to generate new certificate with the right domain name.

Sample authorization mechanism using interceptors

Mali offers a great mechanism to intercept calls done to the API. You can intercept globally, at the service level, or at the operation level. In our case, Health service stays insecure, and we secure the PostService like this:

function **auth(apiKey: string)** {  
 return async function(ctx: any, next: any) {  
   const apiKeyProvided:string = ctx.request.get("x-api-key");  
   if (!apiKeyProvided || apiKeyProvided !== apiKey) {  
     throw new Error(‘invalid.apiKey’);  
   }  
   await next();  
  }  
}this.server = new Mali()  
this.server.addService("\[...\]/Post.proto", "PostService");  
this.server.use("PostService", **auth("myapikey")**);  
this.server.use({ PostService: { addPost, listPost } });

On the client side, you can pass the API key, through metadata, globally:

import \* as grpc from 'grpc';const interceptorAuth:any = (options:any, nextCall:any) =>  
   new grpc.InterceptingCall(nextCall(options), {  
     start: function(metadata, listener, next) {  
       metadata.add(‘x-api-key’, API\_KEY);  
       next(metadata, listener);  
     }  
   });const client = new proto.sample.PostService(  
  host, credentials, {interceptors: \[interceptorAuth\]}  
);

Or you can pass metadata at the operation level:

import \* as grpc from 'grpc';const metadata = new grpc.Metadata();  
metadata.add(‘x-api-key’, API\_KEY);client.listPosts({page: 1}, metadata, (err:any, response:any) => {  
 console.log(‘Post list’, err, response);  
 });

Error handling

With grpc-node, you have to catch all exceptions, which could quickly become a pain …. Fortunately, Mali catches exceptions for you and sends back to the graphQL server as an error.

Error thrown by gRPC and send back using GraphQL API

Deployment on K8

Kubernetes doesn’t support gRPC health checks natively, but gRPC comes with:

a sample proto contract to implement, with a Check method.
the tool grpc-health-probe to install in your docker image, which will call the Check method.

grpc-health-probe needs to be configured to run with SSL and the command line is a bit long:

/bin/grpc\_health\_probe   
 -tls   
 -tls-server-name localhost   
 -tls-ca-cert cert/ca.crt   
 -tls-client-cert cert/client.crt   
 -tls-client-key cert/client.key   
 -addr=:4000

So I’ve put it in a script calledbin/grpc-health-probe.sh

Once the Check service up and running, you just need to configure k8 with:

spec:  
 containers:  
 - name: server  
  image: "\[YOUR-DOCKER-IMAGE\]"  
  ports:  
   - containerPort: 4000  
   readinessProbe:  
    exec:  
     command: \["/usr/src/app/src/bin/grpc\_health\_probe.sh", ":4000"\]  
     initialDelaySeconds: 5  
   livenessProbe:  
    exec:  
     command: \["/usr/src/app/src/bin/grpc\_health\_probe.sh", ":4000"\]  
     initialDelaySeconds: 10

Conclusion

gRPC and GraphQL work great together:

GraphQL is in charge of setting up a contract with the outside world,
while gRPC is in charge of communication between micro-services within the company.

Not all gRPC libraries are at the same level, both in terms of documentation and code. Better reading the doc carefully (proto version, authentication, interceptor support) before starting with a library.

For Nodejs, server-side interceptors are sorely lacking in the official library.

Fortunately, Mali offers a very good alternative.

Retrieve the project on Github:

svengau / grpc-graphql-sample

grpc / graphql sample project

gRPC / graphQL sample project

this PoC will allow us to create blog posts, and is composed with:

a graphQL server, in front of the client as our unique BFF entry point. Its role is mainly to validate input data (required / optional fields, type, …) and filter output data. The validation here is important since required & optional fields have been dropped from proto3. It also acts as a client to the gRPC micro-service.
a gRPC server, to perform all functional operations. Here to create and list some blog posts.

To run the PoC, install NodeJs, Mongodb and Git, and launch the following commands:

git clone git@github.com:svengau/grpc-graphql-sample.git
cd post-api && npm start
cd graphql-api && npm start
🚀 Server ready at http://localhost:4000/graphql

and run the following query:

mutation {
 addPost(data: { title: "helloooo" }) {
   message
   result { _id title body }
 }
}
```

View on GitHub

And Happy coding ! 😎

Forem: sven Gaubert

Guide to nextjs + turbopack ⚡️🏎️

Installation

Troubleshooting Common Issues

Package resolves to a different version

Package can't be external

Next.js package not found

The "path" argument must be of type string. Received undefined

Seed your project in the freemium jungle🌴🌴

TLDR;

Logo Branding

Code Versioning on a private repo

Authentication with Google or Facebook account

Double Authentication with Google Authenticator

Database with MongoDB Atlas

Storage with Cloudinary

Web Hosting & API with Netlify or Vercel

Payment with Stripe or Paypal

Emailing with Mailgun or Mailjet

Newsletter with Mailchimp

Search Engine Optimization (SEO)

Performance Check

Analytics with Google Analytics

Live chat with Hubspot or Freshchat

Too much services to integrate ? Don't worry 😉

Conclusion

Authentication using Netlify, lambda… and PassportJS 👮‍♀️

TLDR;

svengau / netlify-authentification-sample

Authentication with netlify lambda functions, PassportJS and Express

Example of netlify authentication with Passportjs

Live Demo

Netlify & the identity module

Configuration from scratch

Deployment on Netlify

Conclusion

Finally…

When GraphQL meets gRPC… 😍

Context

The sample project

Setup

The wedding contract

Security

SSL

Sample authorization mechanism using interceptors

Error handling

Deployment on K8

Conclusion

svengau / grpc-graphql-sample

grpc / graphql sample project

gRPC / graphQL sample project

References