Forem: Chun

Conditionally load scripts in NextJS using environment variables

Chun — Fri, 21 Oct 2022 09:10:20 +0000

Introduction

Recently I added Google Analytics to my NextJS project, but it caused some errors when running the Cypress tests during the CI/CD workflow.

Therefore, I wanted to only include the scripts during the production build, but not include them during the Cypress tests.

Here is my _app.tsx:

/** _app.tsx **/

import Head from 'next/head';
import Script from 'next/script';

function MyApp() {
  return (
    <>
      <Head>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
      </Head>
      <header>
        {process.env.NEXT_PUBLIC_LOAD_SCRIPTS &&
          process.env.NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID && (
            <Script id="google-analytics" strategy="afterInteractive">
              {`
                window.dataLayer = window.dataLayer || [];
                function gtag(){dataLayer.push(arguments);}
                gtag('js', new Date());

                gtag('config', '${process.env.NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID}');
              `}
            </Script>
          )}
        {process.env.NEXT_PUBLIC_LOAD_SCRIPTS &&
          process.env.NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID && (
            <Script
              src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID}`}
              strategy="afterInteractive"
            />
          )}
      </header>
      <main>{/* content */}</main>
    </>
  );
}

export default MyApp;

Explained

process.env.NEXT_PUBLIC_LOAD_SCRIPTS refers to the environment variable NEXT_PUBLIC_LOAD_SCRIPTS.

Notice the prefix "NEXT_PUBLIC_", this is the NextJS convention to expose the environment variable to the browser.

Without "NEXT_PUBLIC_", the environment variable will be undefined in the browser and not load the script.

process.env.NEXT_PUBLIC_LOAD_SCRIPTS will be controlled during the CI/CD workflow.

{process.env.NEXT_PUBLIC_LOAD_SCRIPTS &&
  process.env.NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID && (
    <Script id="google-analytics" strategy="afterInteractive">
      {`
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', '${process.env.NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID}');
      `}
    </Script>
)}

Conclusion

As you can see, it is quite simple to conditionally load scripts in NextJS using environment variables.

Feel free to comment if you have any questions or suggestions.

Why I built a bot to find delivery slots (UK)

Chun — Sun, 03 May 2020 18:26:56 +0000

Since the lockdown it has been difficult to get a delivery slot from a supermarket. Some grocery stores have implemented a queuing system to access the site (Ocado) or even stopped letting new users register (Sainsbury).

After another unsuccessful day of refreshing, I thought there must be an easier way. Therefore, with all this extra time at home, I decided to build a bot to alert me to available groceries slots. To my surprise, it really wasn’t too difficult at all.

Looking at requests

Depending on the site, you can see what sort of requests are made when viewing the delivery booking page by using Chrome inspector and looking in the network tab. From there it’s a just a matter of saving the cookies and automating the requests.

When the cookies expired the request would be denied. So, I added a headless browser function to login and save the cookies automatically for next time.

Hosting

I built the bot to be hosted with AWS Lambda functions, so I didn't need to leave my computer on all night or have an instance running 24/7. This was very easy to set up and deploy using Serverless.

Captcha

Unsurprisingly, the captcha code would come up for some sites when the bot was trying to log in. There wasn’t much I could do about this, so I just skipped the stores that had this implemented (Ocado and Morrisons).

Alerts

I got my bot working with Asda and Tesco, and it would check every 10 minutes for any available slots. I found this interval to be enough, because unlike concert tickets, delivery slots don’t sell out as soon as they became available, plus I didn’t want to spam the site with traffic.

Conclusion

This was fun to build, but by no means necessary. There are now quite a few local and smaller grocery stores providing delivery service. I would encourage you to check those out if you can.

If you still want to use one of the main supermarkets, try a bit later at night or in the morning. Friday and Saturday almost always have no slots available, but some free slots start showing up on Sunday afternoon.

Disclaimer: I only booked one slot per week to ensure I wasn’t taking up slots unnecessarily.

Use Web Workers in Create React App without ejecting and TypeScript

Chun — Sun, 23 Feb 2020 21:53:26 +0000

Web Workers are incredibly useful if you need to do some heavy processing without hanging the UI.

This tutorial is aimed at implementing web workers in a create-react-app project without ejecting and avoiding TypeScript errors. If you want to know how to set up a React project you should check out my previous post

Web Workers

In a normal web app, all the JS is running in the main thread, so this means if you execute a very intensive function you could potentially hang the UI until the function has finished, which is not a good user experience. This can be avoided by using web workers because they run scripts in background threads.

Web Workers execute a script from a static file that is separate from your main JS file. Previously, this meant that you would need to eject from create-react-app in order to modify the webpack config and export a separate file. However, with recent developments you can now use web workers in CRA without ejecting!

comlink-loader

There's a great package called comlink-loader that allows you to call functions from a web worker like a class method, and skip the postMessage and onmessage exchange described in the docs.

Install the package:

npm install -D comlink-loader

or 

yarn add comlink-loader

Create the worker

Create a directory called worker and it will contain three files:

custom.d.ts
index.ts
worker.ts

worker.ts is where you will keep the functions that you want executed in a background thread:

/* ./worker/worker.ts */

export function processData(data: string): string {

  // Process the data without stalling the UI

  return data;
}

custom.d.ts is a TypeScript declaration file to avoid compilation errors.

For type safety, add your functions from worker.ts to the class as a method and the return type should be wrapped in a promise.

/* ./worker/custom.d.ts */

declare module 'comlink-loader!*' {
  class WebpackWorker extends Worker {
    constructor();

    // Add any custom functions to this class.
    // Make note that the return type needs to be wrapped in a promise.
    processData(data: string): Promise<string>;
  }

  export = WebpackWorker;
}

index.ts contains the inline loader so you don't have to eject and modify the webpack config

/* ./worker/index.ts */

// eslint-disable-next-line
import Worker from 'comlink-loader!./worker'; // inline loader

export default Worker;

Depending on your linter rules, you may get a build error:

Unexpected '!' in 'comlink-loader!./worker'. Do not use import syntax to configure webpack loader

This is not a problem and the rule can be disabled for the line (see lines 3 and 4 above).

Import into React app

Now the fun part, simply import the worker into your React app and create a new instance to start using it:

/* App.tsx */

import Worker from './worker'

// Create new instance
const instance = new Worker();

const onClick = () => {
  const data = 'Some data';

  return new Promise(async resolve => {

    // Use a web worker to process the data
    const processed = await instance.processData(data);

    resolve(processed);
  });
};

Conclusion

It is quite simple to implement a web worker into your React app, and it will be a major improvement to the user experience if your app does a lot of heavy processing.

If you have any suggestions or questions feel free to leave a comment.

Set up a new React project with TypeScript, ESLint and Prettier

Chun — Sun, 19 Jan 2020 17:28:41 +0000

This is my workflow when I set up a new project, it should only take a few minutes to get everything up and running.

Create React App

The easiest way to create a new React project is to use the create react app, and you can easily have it set up with TypeScript too.

npx create-react-app my-app --template typescript
# or
yarn create react-app my-app --template typescript

ESLint

Next, you will want to install ESLint, and plugins for TypeScript:

yarn add -D eslint eslint-plugin-react @typescript-eslint/eslint-plugin @typescript-eslint/parser

Then in your project directory, create .eslintrc.js:

module.exports = {
  parser: '@typescript-eslint/parser',
  extends: [
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
  },
  rules: {},
  settings: {
    react: {
      version: 'detect', // Tells eslint-plugin-react to automatically detect the version of React to use
    },
  },
  env: {
    jest: true,
  },
};

Now, you will have basic linting rules for TS:

Prettier

Install Prettier for formatting your code:

yarn add -D prettier eslint-plugin-prettier eslint-config-prettier

Create .prettierrc.json, and add the following:

{
  "trailingComma": "es5",
  "printWidth": 100,
  "semi": true,
  "singleQuote": true
}

Then modify the eslintrc.js, and add these two lines:

extends: [
  ...
  'prettier/@typescript-eslint', // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
  'plugin:prettier/recommended', // Enables eslint-plugin-prettier and displays prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
],

With the Prettier extension installed in VS Code, it will show any formatting errors:

VS Code

I would recommend turning on formatOnSave, and fix all ESLint error on save, to make your life even easier:

{
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
  },
}

Finally

I hope you found it useful, please let know if you have any feedback.