DEV Community: Andrei Canta

Self-Signed Certificates that Work in Chrome

Andrei Canta — Sat, 29 Jan 2022 23:55:11 +0000

This article was originally posted on my personal blog.

Creating a self-signed certificate is quite simple. However, Google Chrome flags most of them as insecure and doesn't even give you the "proceed" button/link.

In order to make it work, you need to add -addext "extendedKeyUsage = serverAuth" in the openssl command. Here is a complete example

openssl req \
  -x509 \
  -nodes \
  -days 365 \
  -newkey rsa:2048 \
  -keyout server.key \
  -out server.crt \
  -addext "extendedKeyUsage = serverAuth"

This command will give you two files: server.key and server.crt.

If you want to run the same command in a non-interactive mode you just add -subj "/C=US/ST=State/L=Locality/O=Organization/CN=www.example.com"

Custom NextJS Server with Typescript

Andrei Canta — Sat, 29 Jan 2022 23:38:16 +0000

This article was originally posted on my personal blog.

There is an official NextJS guide on how to create a custom server. However, it only works with JavaScript. Please follow their guide and come back.

https://nextjs.org/docs/advanced-features/custom-server

Rename server.js to server.ts.
Update the scripts in package.json

   "scripts": {
   "dev": "ts-node server.ts",
   "build": "next build",
   "start": "NODE_ENV=production ts-node server.ts"
   }

Install ts-node

   yarn add ts-node

Add this section in tsconfig.json

   {
     // ...
     "ts-node": {
       "transpileOnly": true,
       "compilerOptions": {
         "module": "commonjs"
       }
     }
   }

How to integrate Paddle.js with Next.js?

Andrei Canta — Wed, 19 Jan 2022 15:30:01 +0000

This article was originally posted on my personal blog.

First, you should add some variables into your .env file.

PADDLE_VENDOR_ID=...
PADDLE_VENDOR_AUTH_CODE=...
PADDLE_SANDBOX=true

NEXT_PUBLIC_PADDLE_VENDOR_ID=$PADDLE_VENDOR_ID
NEXT_PUBLIC_PADDLE_SANDBOX=$PADDLE_SANDBOX

Next, create a component called PaddleLoader.

import Script from "next/script";

export function PaddleLoader() {
  return (
    <Script
      src="https://cdn.paddle.com/paddle/paddle.js"
      onLoad={() => {
        if (process.env.NEXT_PUBLIC_PADDLE_SANDBOX) {
          Paddle.Environment.set("sandbox");
        }
        Paddle.Setup({
          vendor: Number(process.env.NEXT_PUBLIC_PADDLE_VENDOR_ID),
        });
      }}
    />
  );
}

Next, include PaddleLoader in your page

import { PaddleLoader } from "...";

export default function Page() {
  return (
    <>
      <PaddleLoader />
      <button
        onClick={() => {
          Paddle.Checkout.open({
            product: "...",
          });
        }}
      >
        Buy
      </button>
    </>
  );
}

If you use TypeScript, you should create a file called types.d.ts in the root of your project.

declare global {
  var Paddle: any;
}

Electron Typed IPC

Andrei Canta — Mon, 18 May 2020 12:39:50 +0000

no runtime cost (just typescript enhancements)
keeps the same API as Electron
separates events from commands to avoid confusions
- events are things that happened (IPC)
- commands are async functions you can invoke (RPC)

1. Install `electron-typed-ipc` from NPM

npm i electron-typed-ipc --save

2. Define your events/commands

type Events = {
  configUpdated: (newConfig?: Config, oldConfig?: Config) => void;
};

type Commands = {
  fetchConfig: () => Config;
  updateConfig: (newConfig: Partial<Config>) => void;
};

3. Add types to `ipcMain` and `ipcRenderer`

const typedIpcMain = ipcMain as TypedIpcMain<Events, Commands>;
const typesIpcRenderer = ipcRenderer as TypedIpcRenderer<Events, Commands>;

4. Emit events and invoke commands

// renderer.js
const config = await typedIpcRenderer.invoke('fetchConfig');

// main.js
typedIpcMain.handle('fetchConfig', () => {
  return { a: 1, b: 'text' };
});

// renderer.js
typedIpcRenderer.on('configUpdated', (_, newConfig, oldConfig) => {
  console.log(newConfig, oldConfig);
});

// main.ts
webContents
  .getAllWebContents()
  .forEach((renderer: TypedWebContents<Events>) => {
    renderer.send('configUpdated', newConfig, oldConfig);
  });

DEV Community: Andrei Canta

Self-Signed Certificates that Work in Chrome

Custom NextJS Server with Typescript

How to integrate Paddle.js with Next.js?

Electron Typed IPC

1. Install electron-typed-ipc from NPM

2. Define your events/commands

3. Add types to ipcMain and ipcRenderer

4. Emit events and invoke commands

1. Install `electron-typed-ipc` from NPM

3. Add types to `ipcMain` and `ipcRenderer`