Forem: Boryamba

Building a Chrome Extension Using React and Vite: Part 2 - State Management and Message Passing

Boryamba — Mon, 03 Jul 2023 14:40:46 +0000

Welcome back to our ongoing series on building a Chrome extension with React and Vite. In the first part of this tutorial series, we got started with our Chrome extension setup. If you've missed that, you can check it out here. This time, we will dive into the heart of our extension, state management, and understand how our extension's components interact with each other.

Before we move forward, let's pause and clarify the purpose of state management in our extension. State management refers to how we store and manipulate a data source accessible across various parts of our application. It's a crucial aspect of most applications as it helps us control data flow and communication throughout our application.

Our extension consists of three parts: the popup, the content script, and the background script.

The popup is our control panel for the extension, allowing us to toggle its features on and off.
The content script is responsible for modifying the website's DOM by adding checkboxes, buttons, and other UI elements as necessary.
The background script, although not mentioned in the first part, serves as a centralized data management hub, acting as our single source of truth.

You may ask, "Why do we need a background script? Can't we directly connect the popup and content script to local storage changes?" Technically, you could. However, there are a few reasons why this isn't the best practice:

Performance: Directly connecting multiple parts of your extension to the local storage can lead to performance issues. With a background script, we can centralize state management and efficiently communicate changes.
Complexity: Trying to manage and track changes across various parts of your extension can quickly get complicated. A background script simplifies state management and makes debugging easier.
Best Practice: Utilizing a background script for managing state in your extension is a common pattern in extension development. It adheres to the principles of unidirectional data flow, a core concept in React development. This pattern ensures data consistency and simplifies data flow throughout your application.
Persistence: The background script maintains its state as long as the browser is running, ensuring the extension state's persistence. It manages and responds to events from all parts of your extension consistently.

Understanding these points, it's clear that our background script plays a crucial role in coordinating state and communication between the popup and the content script. By treating the background script as our state management layer, we can keep our UI - the popup and the content script - focused on presentation and user interaction.

Let's delve into the technical aspect of our blog post now.

So, how do we establish communication between these parts? It's pretty straightforward. The background script needs to store the state. We can use various data structures to do this, such as an object, a map, a set, or others depending on your specific needs. For this tutorial, I decided to use Valtio, a simple state management library - not for any special reason, but simply to experiment with it.

The background script needs to send the state to the requested party, as well as update the state upon request. That sounds like sending and receiving messages, doesn't it?

Firstly, let's handle the state. Here are the steps:

Create a file extensionState.ts
Create a state inside the file:

import { proxy } from "valtio";

export enum Actions {
  GET_STATE = "get-state",
  SET_STATE = "set-state",
}
export type Action = `${Actions}`;

export const state = proxy({
  isBulkDeleteEnabled: false,
  isChatExportEnabled: false,
  isPromptSavingEnabled: false,
});

export type ExtensionState = typeof state;

export const updateState = (payload: Partial<typeof state>) => {
  chrome.runtime.sendMessage({ type: Actions.SET_STATE, payload });
};

I also added a few types and an action to update the state.

Next, onto background script. First, when the extension is first installed, we need to initialize our state in the local storage:

chrome.runtime.onInstalled.addListener(() => {
  chrome.storage.local.set(state);
});

Good. Now we can persist the state between page reloads, and we can also access the state from other contexts as well.

Then, we need to send the state to those who ask for it, as well as implement changes to the state:

import { Actions, ExtensionState, state } from "../state/extensionState";

interface MessageWithoutPayload {
  type: Actions.GET_STATE;
  payload?: never;
}

interface MessageWithPayload {
  type: Actions.SET_STATE;
  payload: Partial<ExtensionState>;
}

type Message = MessageWithoutPayload | MessageWithPayload;

chrome.runtime.onInstalled.addListener(() => {
  chrome.storage.local.set(state);

  chrome.runtime.onMessage.addListener((message: Message, _, sendResponse) => {
    if (message.type === Actions.GET_STATE) {
      sendResponse(state);
    }

    if (message.type === Actions.SET_STATE) {
      Object.assign(state, message.payload);
      chrome.storage.local.set(state);
    }
  });
});

When we receive the GET_STATE message, we respond with the local valtio state because it's in sync with the local storage.
When we receive the SET_STATE message, we mutate our local state and update the local storage.

Background worker is now ready to share and update the state. How cool is that?

How about consuming the state? For this we will create a useExtensionState hook that will return the extension state. First, we get a snapshot of the state. Snapshot is a valtio's way to provide reactive state of our state (sorry for the tautology 😅):

import { useSnapshot } from "valtio";

const useExtensionState = () => {
  const extensionState = useSnapshot(state);

  return extensionState;
};

Cool. Now we have access to the extension state. But it is not the same state that exists in the background context. Or in the popup context. Or in the content script context. They all live their own independent life! So we need to sync the state. Let's use useEffect to handle side effects of retrieving the state from the local storage, or rather asking the background script to get the state for us:

import { useEffect } from "react";
import { Actions, state } from "../state/extensionState";
import { useSnapshot } from "valtio";

const useExtensionState = () => {
  const extensionState = useSnapshot(state);

  useEffect(() => {
    chrome.runtime.sendMessage({ type: Actions.GET_STATE }, (response) => {
      Object.assign(state, response);
    });
  }, []);

  return extensionState;
};

Here, we're asking the background script to get us the current state of our application, and update the local state with the retrieved value. And now we have access to the actual state of our extension. I hear someone yell "Hoozah!" — not so fast.

When the state changes, it won't be reflected in our local state. We can only receive the updated state whenever we refresh the page, which is not good, because we want REACTIVITY.

I tried subscribing to the state changes using valtio's subscribe, and whenever the state changes send notification to all parties that the state is updated, but the content script can't listen to messages sent via chrome.runtime.sendMessage, so I had two options:

Make the background script a bit more complicated, finding the active tab and sending message to that tab
Subscribe to local storage changes inside the useExtensionState hook

The second option looks easier to me so I went with it:

import { useEffect } from "react";
import { Actions, ExtensionState, state } from "../state/extensionState";
import { useSnapshot } from "valtio";

const useExtensionState = () => {
  const extensionState = useSnapshot(state);

  useEffect(() => {
    chrome.runtime.sendMessage({ type: Actions.GET_STATE }, (response) => {
      Object.assign(state, response);
    });
    const listener = (changes: {
      [key: string]: chrome.storage.StorageChange;
    }) => {
      Object.assign(
        state,
        Object.entries(changes).reduce((acc, [key, { newValue }]) => {
          acc[key as keyof ExtensionState] = newValue;
          return acc;
        }, {} as typeof state)
      );
    };

    chrome.storage.onChanged.addListener(listener);

    return () => {
      chrome.storage.onChanged.removeListener(listener);
    };
  }, []);

  return extensionState;
};

The changes is an object whose values are also an object with oldValue and newValue. Because of that, we can't directly assign our state these changes, so we have to do a little bit of data transformation. We take key-value pair from the object, and assign each key a new state value. We merge the result into our state, and that's it. We also add a cleanup function to remove unneeded listeners.

Let's test this out!

I changed the popup's App component like this:

import useExtensionState from "../hooks/useExtensionState";
import { updateState } from "../state/extensionState";

function App() {
  const extensionState = useExtensionState();

  return (
    <>
      <button
        onClick={() => {
          updateState({
            isBulkDeleteEnabled: !extensionState.isBulkDeleteEnabled,
          });
        }}
      >
        {extensionState.isBulkDeleteEnabled ? "Disable" : "Enable"}
      </button>
    </>
  );
}

Whenever the button is clicked, it should toggle the isBulkDeleteEnabled value from true to false, and vice versa. To know that it's working inside the button we render text depending on the state value.

We do the same for content script with one exception - we don't want to toggle state from content script (though you can if you want), we just want to make sure it has up to date state on each change:

import useExtensionState from "../hooks/useExtensionState";

function App() {
  const extensionState = useExtensionState();
  return (
    <>
      <div>{extensionState.isBulkDeleteEnabled ? "ENABLED" : "DISABLED"}</div>
    </>
  );
}

Now, rebuild the extension yarn build, and click the refresh button in the extensions tab. Open the https://chat.openai.com/, toggle the extension by clicking its button and try clicking the button. In the popup, the Disable text switches with Enable, and in the content script (which is barely visible due to its black text color and transparent background) also changes its text.

Now you can yell "Hoozah!".

What's left is to develop a pure react application for both popup and the content script, and so I decided to conclude the tutorial on the extension development with React.

If you want to follow along to the bitter (hopefully sweeter) end, please let me know in the comments and I will continue the series.

Hope you enjoyed this series. See you next time 😊

Building a Chrome Extension Using React and Vite: Part 1 - Setting things up

Boryamba — Mon, 03 Jul 2023 13:12:57 +0000

Hello everyone 👋

For a while, I've been toying with the idea of building an extension for the ChatGPT website. I wanted to enhance its functionality by allowing multiple chat deletions and adding other useful features. But every time I started the development process, I found myself hitting a wall, particularly around Vite configuration for extension bundling or communication between different extension contexts.

After many attempts, I finally succeeded! And I thought I'd share my experience with you all ❤️. This is the first part in a series of blog posts where I will guide you through my process.

In this initial part, we'll cover the setup process: initializing the project, creating the popup, content script and background worker, and incorporating them into our manifest.json file.

The second part which shows how to connect different parts of the extension together is available here

Setup

Let's start by setting up a Vite project. Use your favorite package manager to establish a fresh Vite project. Here, I'll be using yarn:

yarn create vite

During the installation, I select React -> Typescript with SWC.

Once done, I add a few Vite plugins in the root directory of the newly created project:

yarn add -D vite-tsconfig-paths @crxjs/vite-plugin@beta

The vite-tsconfig-paths plugin supports path aliases and @crxjs/vite-plugin@beta is a library for bundling the extension.

Next, we need to register these plugins in the vite.config.ts file:

import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

import react from "@vitejs/plugin-react-swc";
import { ManifestV3Export, crx } from "@crxjs/vite-plugin";

import manifestJson from "./manifest.json";

const manifest = manifestJson as ManifestV3Export;

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [tsconfigPaths(), react(), crx({ manifest })],
});

As you can see, I've imported the manifest file and asserted it to the ManifestV3Export type. The crx plugin's typings require this to function correctly 😅. A quick note - I needed to add the manifest.json file to my tsconfig.node.json's include field to avoid a resolution error.

Now let's discuss the manifest.json file. This file provides an overview of my extension: its name, description, permissions, as well as the locations of entry files for the popup, content script, and background worker.

{
  "manifest_version": 3,
  "name": "ChatGPT Extension",
  "version": "0.0.1",
  "description": "Improve your ChatGPT experience with this extension! Bulk exports, bulk deletes, save prompts and more!",
  "permissions": [
    "activeTab",
    "cookies",
    "declarativeContent",
    "scripting",
    "storage",
    "tabs"
  ],
  "host_permissions": ["https://chat.openai.com/*"],
  "action": {
    "default_popup": "index.html"
  },
  "background": {
    "service_worker": "src/background/background.ts",
    "type": "module",
    "persistent": false
  },
  "content_scripts": [
    {
      "matches": ["https://chat.openai.com/*"],
      "js": ["src/contentScript/main.tsx"],
      "run_at": "document_end"
    }
  ]
}

Here, permissions like

activeTab, cookies, and tabs grant the extension access to various aspects of the browser's functionalities. For example, activeTab allows the extension to interact with the current tab while cookies and tabs allow access to cookie data and tab details respectively.

Next, we organize our application structure. The setup process has provided us with several files. Here's how we arrange them:

1) I create a new popup directory inside my src folder, move there main.tsx and App.tsx files, and update the index.html file to point to the new entry file location:

...
    <script type="module" src="/src/popup/main.tsx"></script>
...

The popup runs in its own context, independently from the background workers or content scripts. It doesn't have access to the DOM, which is why we'll be using a content script for that purpose.

2) I duplicate the popup directory, rename it to contentScript, and within the main.tsx script, create a new div element to append it to the document's body. Then, I render my application into the created div:

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import "../index.css";

const root = document.createElement("div");
root.id = "chatgpt-content-script-root";

document.body.appendChild(root);

ReactDOM.createRoot(root).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

This approach ensures: a) there is a root element to render our application into; b) we will not have conflicts with the website's existing DOM elements, ensuring our extension doesn't interfere with the website's functionality or vice versa.

3) Lastly, we create a background script inside the background folder. For now, let's insert a dummy console.log just to ensure everything is working correctly.

Now comes the exciting part: testing our setup:

1) yarn build - this command builds my extension into a dist directory.
2) Enable developer mode in Google Chrome extensions.
3) Load the extension by clicking the Load unpacked button and selecting the dist directory.
4) Open https://chat.openai.com/ - at this point, you should notice the website's user interface has been modified by a Vite counter. When you click the extension button, guess what pops up? 😏 The last thing we need to test is the background script. Right-click anywhere inside the extension popup and select Inspect popup. Here, you should see your dummy console.log.

Yay! Congratulations to us! 🎉 We've just created our first Google Chrome extension. It currently doesn't do much more than adjusting the website's layout, but it's just the beginning.

In case you face any issues during setup, ensure to double-check your file structure and the content of your manifest.json file. Most errors at this stage come from misconfigurations in these areas.

Stay tuned for the next part where I'll set up communication between different contexts of our extension.

In the meantime, if you've tried these steps and have feedback, or if you'd like me to explain anything in more detail, please leave a comment below. I'd love to hear from you!

Custom Formik components with Typescript and Chakra UI

Boryamba — Fri, 27 Aug 2021 11:17:55 +0000

Resources:

foreword

Hello everyone.

I will be using create next-app throughout the post but everything in here is appliable to regular React (CRA) applications.

I expect you to be familiar with Chakra UI and Formik

Let's get started =)

Let's start with creating a new NextJS app:

yarn create next-app MyNextApp --typescript

Open created folder in your IDE, then install Formik and Chakra UI

yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4 formik

Next we create a new folder components and a file named CustomInput.tsx

Inside that file create a new Functional component named CustomInput:

export const CustomInput: FC = ({ label, ...props }) => {
  const [field, meta] = useField(props);

  return (
    <FormControl isInvalid={meta.touched && !!meta.error}>
      <FormLabel>
        {label}
      </FormLabel>
      <Input {...field} />
    </FormControl>
  );
}

At this moment Typescript will yell at us saying it doesn't know what're the label and props, we need to explain to that silly what those things are. So we need an interface which can be written two ways: either by extending JSX.IntrinsicElements['input'] interface or by intersecting FieldHookConfig<string> type:

// intersecting
interface ICustomFieldProps {
  label: string;
}

// FieldHookConfig accepts value type as an argument,
// it is 'string' for input elements
export const CustomInput: FC<FieldHookConfig<string> & ICustomFieldProps> = ({ 
  label,
  ...props
}) => { 
...
}

// extending
interface ICustomFieldProps extends JSX.IntrinsicElements['input'] {
  label: string;
  name: string;
}

export const CustomInput: FC<ICustomFieldProps> = ({ label, ...props }) => { 
...
}

Choose whatever way you like.

Now let's create our form. Open pages/index.tsx file, delete everything in between div and replace div with Formik component.

Add some dummy initialValue and onSubmit to Formik component, place <Form> and <CustomInput /> inside <Formik>:

const Home: NextPage = () => {
  return (
    <Formik initialValues={{name:''}} onSubmit={(val) => alert(val.name)}>
      <Form>
        <CustomInput name='name' label='name' />
        <Button type='submit'>Submit</Button>
      </Form>
    </Formik>
  )
}

export default Home

Ta-da. We now have a form built with Chakra UI and managed by Formik.

But. If you're using NextJS and you open devtools console, you will see a big fat error:

Warning: Prop `id` did not match.

We can fix this by adding id to our form elements explicitly. Inside CustomInput.tsx add id attribute to Input and FormLabel components and htmlFor attribute to FormLabel:

export const CustomInput: FC<IFormikFieldProps & FieldHookConfig<string>> = ({
  label,
  ...props
}) => {
  const [field, meta] = useField(props);

  return (
    <FormControl isInvalid={meta.touched && !!meta.error}>
      <FormLabel
        id={`${props.id}-${props.name}-label`}
        htmlFor={`${props.id}-${props.name}-input`}
      >
        {label}
      </FormLabel>
      <Input 
        {...field}
        id={`${props.id}-${props.name}-input`} 
      />
    </FormControl>
  );
};

Cool. It's done.

notes:

for select, you must pass props.children to Chakra UI's Select component explicitly:

<Select {...field} id={`${props.id}-${props.name}-select`}>
  {props.children}
</Select>

you can add FormErrorMessage component, too

Thanks for reading =)

AWS Elastic Beanstalk: redirect http to https (and www to non-www)

Boryamba — Mon, 16 Aug 2021 16:24:40 +0000

Table of content:

Create dockerized NextJS app - part 1
Deploy dockerized app to AWS EB - part 2
Connect custom domain to our application - previous part

Hello everyone.

In previous parts we created dockerized NextJS app, deployed it to AWS EB and connected our app to custom domain.

In this part we are going to set up redirects from http to https (for security reasons) and from www to non-www (for SEO reasons).

Everything in here is within AWS Free tier.

Also please pay attention that all links to AWS I provide use my region of choice, if you're using different AWS region make sure to change it before making any changes!

Setting up redirects

To set up redirects we need to open EC2 Load Balancers Console, select our balancer and open Listeners tab.

We will start with redirecting http to https:

In HTTP listener row Rules column click View/edit rules
Switch to Edit rules mode - open Pen tab
Click on Pen icon on the left of HTTP 80: default action
Delete default action in THEN column
Click Add action -> Redirect to
Enter port 443 on the right of protocol dropdown and click check icon to save changes
Click Update.

Next we will redirect www to non-www:

Switch to Add rules mode
Click Insert rule
IF column select Host header
Inside is field enter www.yourwebsite
THEN column click Add action -> Redirect to
Enter port 443 and save changes

We also want to set redirection from www to non-www on https connections:

Go back to Listeners tab
Click View/edit rules in HTTPS row
Add new rule:
1. IF host header is www.yourdomain
2. THEN redirect to
3. Set port 443
4. Change Origin host, path, query to Custom
5. Replace value of Host field with your website domain
Save changes.

You now have fully functional https website that is being served completely free of charge (within Free tier quota of course).

Hope you liked the series. Bye-bye =)

Adding custom domain for AWS Elastic Beanstalk application

Boryamba — Mon, 16 Aug 2021 15:38:21 +0000

Table of content:

Create dockerized NextJS app - part 1
Deploy dockerized app to AWS EB - previous part
Connect domain to Route53
Set up SSL
Set up redirects - next part

Hello everyone.

In previous part we created dockerized NextJS app and deployed it to AWS EB.

In this part we are going to connect custom domain to our Elastic Beanstalk application (to make website url fancy, like mysuperwebsite.com), obtain SSL certificate for our website and set up secure https connection to our website!

Everything in here is within AWS Free tier (except for domain, which can be bought for as cheap as $1).

Also please pay attention that all links to AWS I provide use my region of choice, if you're using different AWS region make sure to change it before making any changes!

Lets get started =))

Use custom domain for your application

This step requires you to have, guess it, custom domain.

First thing we need to do is to create a new hosted zone:

Open Route53 console page and click Create hosted zone
Fill in domain name (optionally description), in my case it is borisnovikov.xyz
Select Type - Public hosted zone and click Create hosted zone

Now we need to visit our domain registrar and change domain nameservers.

I'm using Namecheap but the process should be similar for every domain provider: place each value of NS record (from AWS Hosted zone) to Domain registrar nameservers

It can take up to 48 hours to register new nameservers.

To access website using our domain we need to add two alias records of type A: one for our main domain (borisnovikov.xyz) and the other is for subdomain (www website version):

On Hosted zone page click Create record
Switch Alias toggler
Record type - A
Route traffic to - Beanstalk, then select region and environment
Click Create record

Same for www but add www prefix to Record name field.

Wait a few minutes and voi la - our website is now accessible with our domain

Setting up SSL

To set up SSL we need to obtain SSL certificate:

Visit AWS Certificate Manager.
Under Provision certificates click Get started
Click Request a certificate
Add two domain names: one for your website and the other for www version

Here I added wildcard domain (*.borisnovikov.xyz) - it will cover all subdomains including www or any other.

Click Next, select DNS Validation and keep clicking Next until Validation step.

Because we delegated domain management to AWS by setting nameservers, we need to validate ownership by expanding any domain and clicking Create record in Route 53. Click Continue.

SSL certificate will be issued after a while (it can take up to 48 hours - usually within 30 minutes after nameservers delegation is completed).

Adding secure connection to our website

Next step is to add https listener to load balancer.

First we need to modify Load Balancer security group to allow secure connections:

Open EC2 Dashboard
In sidebar click Load Balancers
Select your Load balancer and scroll down Description tab until Security section
Copy security group name and open link near it

On the Security groups page search the page (Ctrl+F in most browsers) for security group name you copied earlier, click on Security group ID.

On opened page click Edit inbound rules, then click Add rule.

Set HTTPS Type, Source - Anywhere IPv4, save rule and close the page.

Now we will set https listener:

On Load Balancers page select your load balancer
Select Listeners tab and copy default rule for HTTP listener (forwarding to ...)
Click button Add listener
Select HTTPS protocol from the dropdown
In Default actions click Add action -> Forward to
From the Target group dropdown select the same group you copied earlier from HTTP listener default action
From Security policy dropdown select suitable policy (default ELBSecurityPolicy-2016-08 policy is recommended). More about policies here
Select Default SSL Certificate you created earlier.
Click Add listener.

Tada! You can now access your website via https protocol =)

In the next part we are going to set up redirects from http to https, from www to non-www. Hope to see you there =)

Thanks for reading.

Deploying dockerized NextJS App to AWS Elastic Beanstalk

Boryamba — Mon, 16 Aug 2021 14:16:04 +0000

Table of content:

Create dockerized NextJS app - previous part
Manual upload
- New Beanstalk application
- Existing Beanstalk application
Beanstalk CLI
- Install EB CLI
- Initialize application
- Deploy
- Update
Add custom domain - next part
Set up redirects - part 4

Hello everyone.

In previous part we created dockerized NextJS app. Now it's time to deploy.

Everything in here is within AWS Free tier.

Also please pay attention that all links to AWS I provide use my region of choice, if you're using different AWS region make sure to change it before making any changes!

Deployment to Beanstalk

There are two ways to deploy our app to Beanstalk:

Manual upload to Beanstalk
Beanstalk CLI

Manual upload to Beanstalk

In your project folder delete node_modules directory (and .next if present), archive leftovers into zip archive. Switch to AWS Console.

New Beanstalk application

If you don't have a Beanstalk application, we need to create one:

Open AWS Console Beanstalk welcome page
Click Create application button
Fill in application name and select platform Docker

In Application code section select Upload your code, in Source code origin select Local file and choose created zip archive.

Finally, click Create application. It will take a few minutes to deploy our app.

Existing Beanstalk application

If you already have a Beanstalk application, we need to create a new application for our NextJS app (skip to create new environment if you want to use existing Beanstalk application):

In EB Console jump to Applications tab in the sidebar
Click Create new application
Fill in application name and click Create

Now it's time to create a new environment for our Next app:

Open created application (if you was following previous step, you already there)
Tap Create a new environment
On Select environment tier step leave defaults (Web server environment) and click Select
Select Docker platform and upload your zip archive

Finally, click Create environment.

After it's done you'll be provided with a URL for your application.

To update application, open environment in EB console and click Upload and deploy

Elastic Beanstalk CLI

First you need to install EB CLI.

Follow instructions there to install it using script.

If for some reason it's not working (i.e. you're using Arch linux), follow the procedures there.

Initialize application

After it's installed and checked to work, we need to initialize our app:

eb init -r eu-west-1 -p docker my-dockerized-next-app

-r eu-west-1 flag tells what region to use
-p docker flag tells that we're using docker
my-dockerized-next-app sets application name

If you don't specify region flag, use eb status or check config.yml file to find what region is used.

You can use application name that already exists in AWS EB Console - every environment you create with EB CLI will be created within existing EB application.

Deploy

Before proceeding, make sure all your files are commited - EB CLI will produce incorrect result if they are not.

Now we can deploy our app to AWS:

eb create --elb-type application my-nextjs-env

--elb-type application tells to use Application Load Balancer - without this flag Classic Load Balancer (which is outdated) will be used
my-nextjs-env sets environment name

If environment with provided name already exists within selected application, it will be updated.

Update

To update application, commit your changes and execute eb deploy command.

In the next part we are going to connect our domain to EB application. Hope to see you there =)

Thanks for reading.

Creating dockerized NextJS Application

Boryamba — Mon, 16 Aug 2021 12:41:55 +0000

Resources:

Create NextJS docker container

Table of content:

Create NextJS app
Dockerize NextJS app
Deploy dockerized app to AWS EB - next part
Add custom domain - part 3
Set up redirects - part 4

Hello everyone.

I assume that you already have Docker, NodeJS and YARN installed.

Create NextJS app

To create a new Nextjs app execute yarn create next-app app-name or you can pick an example app from there and create a new app with supplied command.

I'm going to pick blog starter example.
In the How to use section copy command

yarn create next-app --example blog-starter-typescript blog-starter-typescript-app

paste it in your terminal and hit enter.

Dockerize NextJS app

Open this awesome post and copy the final version of docker configuration.

Inside the root folder of your project (where package.json file is) create a new file named Dockerfile, paste copied configuration into it.

We need to tweak it a little (otherwise AWS will complain - try out yourself without deleting if you're curious):

delete image aliases (AS %alias_name% part of FROM statement)
replace used aliases with image indices (--from=deps becomes --from=0 and --from=BUILD_IMAGE becomes --from=1)

Our final Dockerfile:

# dependencies image
FROM node:14-alpine
WORKDIR /app
COPY package.json yarn.lock ./
RUN yarn install --frozen-lockfile

# build image
FROM node:14-alpine
WORKDIR /app
COPY --from=0 /app/node_modules ./node_modules
COPY . .
RUN yarn build
RUN rm -rf node_modules
RUN yarn install --production --frozen-lockfile --ignore-scripts --prefer-offline

# build output image
FROM node:14-alpine

ENV NODE_ENV production

RUN addgroup -g 1001 -S nodejs
RUN adduser -S nextjs -u 1001
WORKDIR /app
COPY --from=1 --chown=nextjs:nodejs /app/package.json /app/yarn.lock ./
COPY --from=1 --chown=nextjs:nodejs /app/node_modules ./node_modules
COPY --from=1 --chown=nextjs:nodejs /app/public ./public
COPY --from=1 --chown=nextjs:nodejs /app/.next ./.next

USER nextjs

EXPOSE 3000

CMD [ "yarn", "start" ]

Also create .dockerignore file near Dockerfile and insert two directory names into it:

node_modules
.next

To make sure it works run the following commands:

docker build -t example-nextjs-app . - builds our image
docker run -p 3000:3000 example-nextjs-app - runs our image

Now open localhost:3000 in your browser - you should see your app up and running. Yay =)

To stop docker image either kill (close) the terminal or stop the image:

execute command docker ps
copy container id
execute command docker stop container id

In the next part we are going to deploy our application to AWS Elastic Beanstalk. Hope to see you in the =)

Thanks for reading.