Forem: Sebastián Duque G

Nx + NextJS + Docker: Containerizing our application

Sebastián Duque G — Wed, 28 Jun 2023 19:36:46 +0000

Introduction

In the previous blog post, we learned how to create a Next.js application using Nx and set up our development environment. Now, it's time to take our application to the next level by containerizing it with Docker. Containerization allows us to package our application along with its dependencies, ensuring consistent and portable deployments. In this follow-up blog post, we will explore the process of containerizing our Nx + Next.js application and deploying it using Docker.

Prerequisites
Step 1: Preparing the Next.js Application
Step 2: Adding a container target to the project
- Understanding our container target config
Step 2: Creating a Dockerfile
Step 3: Building the Docker Image
Step 4: Running the Docker Container
Conclusion

Prerequisites

Before proceeding, make sure you have the following prerequisites in place:

Completed the previous post steps.

Nx + NextJS + Docker: Creating the NextJS application

Sebastián Duque G ・ Jun 28 '23

#nextjs #nx #docker #tutorial
Basic understanding of Docker and containerization concepts.
Docker installed on your machine.

Step 1: Preparing the Next.js Application

Let's prepare our Next.js application for containerization.

Good news! There is not much to do here. The @nx/next plugin already takes care of most of the work for us. When we build our application using:



pnpm exec nx build my-app

You will notice in the dist/apps/my-app directory that a package.json file was created. This file will represent a subset of the workspace package.json containing only and just only the packages needed by our app (and it's workspace dependencies).

dist/apps/my-app/package.json:



{
  "name": "my-app",
  "version": "0.0.1",
  "dependencies": {
    "next": "13.4.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "typescript": "5.1.5"
  },
  "scripts": {
    "start": "next start"
  }
}

This generated package.json will help us to only install the minimum required dependencies needed by the application in our container.

If you are not using static dependency versions in your root package.json you may want to also generate a lock file to ensure dependency versions in production match with your development environment. To achieve this add the following option to your application build target:



{
    ...
    "build": {
      "executor": "@nx/next:build",
      "outputs": ["{options.outputPath}"],
      "defaultConfiguration": "production",
      "options": {
        "outputPath": "dist/apps/my-app"
      },
      "configurations": {
        "development": {
          "outputPath": "apps/my-app"
        },
        "production": {
+         "generateLockfile": true
        }
      },
      "dependsOn": ["build-custom-server"]
    },
    ...
}

Step 2: Adding a `container` target to the project

We want to run the container build process the same way as we lint, build and test our app: with a project target. To achieve this, we will make use the awesome @nx-tools/nx-container Nx plugin.

The @nx-tools/nx-container Nx plugin provides first class support for Container builds in your Nx workspace. It supports Docker, Podman and Kaniko engines. Leave a star in its repo and take a look there for advanced configuration.

Start by installing the plugin, run:



pnpm add -D @nx-tools/nx-container

Tip: You can optionally follow the docs about using the @nx-tools/container-metadata package to enable automatic image tagging with OCI Image Format Specification labels.

Next, let's setup our project to be containerized:



pnpm exec nx g @nx-tools/nx-container:init my-app --template next --engine docker

You will see a new container target added to the application's project.json. Let's configure the target as shown below:

apps/my-app/project.json:



{
  ...
  "targets": {
    ...
    "container": {
      "executor": "@nx-tools/nx-container:build",
      "dependsOn": ["build"],
      "defaultConfiguration": "local",
      "options": {
        "engine": "docker",
        "context": "dist/apps/my-app",
        "file": "apps/my-app/Dockerfile"
      },
      "configurations": {
        "local": {
          "tags": ["my-app:latest"],
          "push": false
        },
        "production": {
          "tags": ["my.image-registry.com/my-app:latest"],
          "push": true
        }
      }
    }
  },
  ...
}

You can replace the production configuration with what better suits your needs. You are also free to add all the necessary configurations.

Understanding our `container` target config

We have configured the container target to make use of Docker as the container engine with some additional options:

context: we are telling docker to use our app's output directory as the context passed to the image build process. This way we don't waste memory passing the whole monorepo when we only need some specific files.
push: For the local configuration this option is turned off as we don't want to push the built image to the registry by default.
file: Here we specify where to find the Dockerfile used for the container image build, this path is relative to the workspace root.

Step 2: Creating a Dockerfile

A Dockerfile is a text file that contains instructions for building a Docker image. In this step, we will create a Dockerfile for our Next.js application. We'll define the base image, copy the application code, and specify the required dependencies.



# Install dependencies only when needed
FROM docker.io/node:lts-alpine as dependencies

RUN apk add --no-cache libc6-compat
WORKDIR /usr/src/app
COPY .npmrc package.json ./
RUN npm install --only=production

# Production image, copy all the files and run next
FROM docker.io/node:lts-alpine as runner
RUN apk add --no-cache dumb-init

ENV NODE_ENV production
ENV PORT 3000
ENV HOST 0.0.0.0
ENV NEXT_TELEMETRY_DISABLED 1

WORKDIR /usr/src/app

# Copy installed dependencies from dependencies stage
COPY --from=dependencies /usr/src/app/node_modules ./node_modules

# Copy built application files
COPY ./ ./

# Run the application under "node" user by default
RUN chown -R node:node .
USER node
EXPOSE 3000

# If you are using the custom server implementation:
CMD ["dumb-init", "node", "server/main.js"]

# If you are using the NextJS built-int server:
# CMD ["dumb-init", "npm", "start"]

Important: If you are also using pnpm and enabled the generateLockfile option for build target, you may want to first install pnpm in the dependencies stage to make use of the generated pnpm-lock.yaml file.

You will also need to copy the pnpm-lock.yaml before running the installation command:
+ RUN npm install -g pnpm
- COPY .npmrc package.json ./
+ COPY .npmrc package.json pnpm-lock.yaml ./
- RUN npm install --only=production
+ RUN pnpm install --frozen-lockfile --prod

To improve the efficiency of our Docker builds and reduce the image size, we are leveraging the concept of multi-stage builds. Using a multi-stage build allow us to separate the dependencies installation environment from the runtime environment. This way, as an example, we can remove sensitive data like private registries authentication tokens from our app runtime container.

Step 3: Building the Docker Image

With the Dockerfile in place and our container target configured, we'll proceed to build the Docker image. We'll use the container target to execute the build process, which involves pulling the base image, installing dependencies, and creating the final image.

To build our image, run:



pnpm exec nx container my-app

This will first build our application and it's dependencies prior to run the docker container build. To visualize this tasks dependencies you can run:



pnpm exec nx container my-app --graph

You will find the following task dependency structure.

Step 4: Running the Docker Container

Once the Docker image is built, we'll run it as a container to verify that our application is working correctly within the containerized environment.

To start our container, run:



docker run -p 3000:3000 -t my-app:latest

You will get and output like:



➜ docker run -p 3000:3000 -t my-app:latest
shared-util-nextjs-server
[ ready ] on http://0.0.0.0:3000

You can now visit http://localhost:3000 to access your NextJS application.

You can even send an HTTP request to your exposed API endpoints:



➜ curl http://localhost:3000/api/hello
Hello, from API!

Great! 🎉

Conclusion

Containerization provides numerous benefits, including improved portability, scalability, and reproducibility of our applications. In this follow-up blog post, we've learned how to containerize our Nx + Next.js application using Docker. By leveraging Docker, we can simplify the deployment process and ensure consistent behavior across different environments.

Stay tuned for more exciting topics as we continue our journey with Nx, Next.js, and Docker!

You can find all related code in the following Github repo:

sebastiandg7 / nx-nextjs-docker

An Nx workspace containing a NextJS app ready to be deployed as a Docker container.

Nx + Next.js + Docker

This repository contains the code implementation of the steps described in the blog posts titled:

Overview

The blog post provides a detailed guide on setting up a Next.js application using Nx and Docker, following best practices and leveraging the capabilities of the Nx workspace.

The repository contains all the necessary code and configuration files to follow along with the steps outlined in the blog post.

Prerequisites

To successfully run the Next.js application and Dockerize it, ensure that you have the following dependencies installed on your system:

Docker (version 23)
Node.js (version 18)
pnpm (version 8)

You can alternatively use Volta to setup the right tooling for this project.

Getting Started

To get started, follow the steps below:

Clone the…

View on GitHub

Nx + NextJS + Docker: Creating the NextJS application

Sebastián Duque G — Wed, 28 Jun 2023 04:58:28 +0000

Introduction

Welcome to this blog post, where we will guide you through the process of creating a NextJS application using Nx and Docker. In this tutorial, we will cover the following steps:

Creating a monorepo workspace using modern tooling.
Adding a NextJS application with a custom server implementation to the workspace.
Building and shipping the app in an optimized Docker container with minimal dependencies.

⚠️ Warning: If you prefer not to use a custom server implementation for your NextJS project, you can skip the steps related to the server. We will provide alternate configurations for the built-in NextJS server.

Prerequisites
Step 1: Set up your environment
Step 2: Create your Nx workspace
- Install the required Nx plugins
Step 3: Generating our Next.js application
Step 4: Adding some workspace libraries
Step 5: Fixing our build-custom-server target
Conclusion

Prerequisites

To complete this tutorial, we will be using the following tools:

JS Tool Manager: Volta v1.1.1
JS Runtime: Node v18
Package manager: pnpm v8
Monorepo build system: Nx v16.4.0
App framework: NextJS v13
Container engine: Docker v23.0.4 | Buildx v0.10.4

You will need to have Docker installed. We will guide you installing the remaining tools.

Let's get started!

Step 1: Set up your environment

First, let's install Volta by following the instructions here:



curl https://get.volta.sh | bash

Once Volta is installed, enable Volta's PNPM feature:



echo "export VOLTA_FEATURE_PNPM=1 >> ~/.zshrc"

Warning: If you're not using zsh as your shell, update the respective shell configuration file for your system.

Next, let's install Node v18:



volta install node@18
node -v

Now, install pnpm:



volta install pnpm@8
pnpm -v

Step 2: Create your Nx workspace

With our tooling set up, it's time to create our Nx workspace. Run the following command:



pnpm dlx create-nx-workspace@16.4.0 myorg --pm pnpm --nxCloud --preset empty

You can opt out of using Nx Cloud by passing --nxCloud false, but we recommend giving it a shot!

Navigate into the workspace directory and pin the Node and pnpm versions we're using for this project:



cd myorg
volta pin node@18
volta pin pnpm@8

Make sure your package.json file reflects the pinned versions:



{
  ...
  "volta": {
    "node": "18.16.1",
    "pnpm": "8.6.5"
  }
}

Install the required Nx plugins

We'll be using Nx in an Integrated Monorepo setup, which relies on Nx plugins to handle most of the heavy lifting. Let's install the NextJs and ESBuild plugins:



pnpm add -D @nx/next@16.4.0 @nx/esbuild@16.4.0

Step 3: Generating our Next.js application

Now that we have the @nx/next plugin installed we can run generators to scaffold NextJS code in our workspace.

In your terminal, run the following command to generate the NextJS application:



pnpm exec nx g @nx/next:app my-app --customServer -s css --appDir

Replace my-app with the desired name for your application.

This command will generate a new directory named my-app inside the apps folder of your Nx workspace, containing the initial NextJS application structure.

Tip: to know more about the included generators, run pnpm nx list @nx/next in your terminal.

You will notice in the apps/my-app/next.config.js the usage of the withNx next plugin from @nx/next.



//@ts-check

// eslint-disable-next-line @typescript-eslint/no-var-requires
const { composePlugins, withNx } = require('@nx/next');

/**
 * @type {import('@nx/next/plugins/with-nx').WithNxOptions}
 **/
const nextConfig = {
  nx: {
    // Set this to true if you would like to use SVGR
    // See: https://github.com/gregberge/svgr
    svgr: false,
  },
};

const plugins = [
  // Add more Next.js plugins to this list if needed.
  withNx,
];

module.exports = composePlugins(...plugins)(nextConfig);

This plugin, among other things, is in charge of automatically passing the workspace libs your app is using to the NextJS transpilePackages config so you don't have to manually do it. Read more about it here.

Note: As of the moment of writing this post, @nx/next v16.4.0 generates a custom server build target that fails if you try to serve your application:



➜ pnpm exec nx serve my-app

> nx run my-app:serve:development

/.../nx-nextjs-docker/node_modules/.pnpm/@nx+js@16.4.0_nx@16.4.0_typescript@5.1.5/node_modules/@nx/js/src/executors/node/node.impl.js:235
                throw new Error(`Could not find ${fileToRun}. Make sure your build succeeded.`);
                      ^
Error: Could not find /.../nx-nextjs-docker/dist/apps/my-app/main.js. Make sure your build succeeded.

we will fix this later 🙂.

In the meanwhile you can build and run your NextJS app this way:



pnpm exec nx build my-app
cd ./dist/apps/my-app
# If using a custom server
node server/main.js
# If not using a custom server
npm start

Step 4: Adding some workspace libraries

Let's create a feature library for our application



pnpm exec nx g @nx/next:lib feature-main --directory my-app --buildable

Next, let's use this library in our root page:

apps/my-app/app/page.tsx:



+import { MyAppFeatureMain } from '@myorg/my-app/feature-main';
import styles from './page.module.css';

export default async function Index() {
  /*
   * Replace the elements below with your own.
   *
   * Note: The corresponding styles are in the ./index.css file.
   */
  return (
    <div className={styles.page}>
      <div className="wrapper">
        <div className="container">
+         <MyAppFeatureMain />
          <div id="welcome">
            <h1>
              <span> Hello there, </span>
              Welcome my-app 👋
            </h1>
          </div>

Now, let's add a utility library with an example function that will be used by our custom server implementation:



pnpm exec nx g @nx/js:lib util-nextjs-server --directory shared

Next, let's use this utility library in the server/main.ts file:

apps/my-app/server/main.ts:



import { createServer } from 'http';
import { parse } from 'url';
import * as path from 'path';
import next from 'next';
+import { sharedUtilNextjsServer } from '@myorg/shared/util-nextjs-server';

// .... 

async function main() {
+ console.log(sharedUtilNextjsServer());

  const nextApp = next({ dev, dir });
  const handle = nextApp.getRequestHandler();
  // ....

At this point, if you run the Nx graph:



pnpm exec nx graph

your workspace should look something similar to this:

Great! 🎉

Step 5: Fixing our `build-custom-server` target

Now it's time to fix all the build errors we are having with our custom server build. If you are not using a custom server, everything should be working at this point.

To fix our build-custom-server target we will configure this target using the @nx/esbuild nx plugin, similar to what @nx/node generated apps do for their build target. Read more about it here.

In the previous steps, we installed the @nx/esbuild plugin in our workspace. Let's now call its init generator to install all the required dependencies this plugin needs:



pnpm exec nx g @nx/esbuild:init

Next, let's update our NextJS app's project.json and configure the build-custom-server target as shown below:

apps/my-app/project.json:



{
  ...
  "targets": {
    ...
    "build-custom-server": {
      "executor": "@nx/esbuild:esbuild",
      "defaultConfiguration": "production",
      "options": {
        "outputPath": "dist/apps/my-app",
        "main": "apps/my-app/server/main.ts",
        "tsConfig": "apps/my-app/tsconfig.server.json",
        "clean": false,
        "assets": [],
        "platform": "node",
        "outputFileName": "server/main.js",
        "format": ["cjs"],
        "bundle": true,
        "thirdParty": false,
        "esbuildOptions": {
          "sourcemap": true,
          "outExtension": {
            ".js": ".js"
          }
        }
     },
     "configurations": {
        "development": {
          "sourcemap": true
        },
        "production": {
          "sourcemap": false,
          "assets": [".npmrc"]
        }
     }
    },
    ...
  }
}

This new build configuration for our custom server will bundle all the imported libraries into a single file, which is perfect for deploying our application without needing the rest of our monorepo dependencies (and results in smaller containers 👀).

If you encounter the following error while building the my-app project:



error TS5069: Option 'tsBuildInfoFile' cannot be specified without specifying option 'incremental' or option 'composite'.

remove the "tsBuildInfoFile" line from the tsconfig.server.json file:

apps/my-app/tsconfig.server.json:



{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "module": "commonjs",
    "noEmit": false,
    "incremental": true,
-   "tsBuildInfoFile": "../../tmp/buildcache/apps/my-app/server",
    "types": ["node"]
  },
  "include": ["server/**/*.ts"]
}

Now that our build-custom-server target is working, let's tell Nx to first build the project dependencies before building the custom server. Add the following to your nx.json:



{
  "targetDefaults": {
    ...
    "build-custom-server": {
      "dependsOn": ["^build"]
    },
    ...
  },
}

To locally serve your application, run:



pnpm exec nx serve my-app

Conclusion

Your NextJS app is now ready to work with a custom server and use workspace libraries in the server.ts or in any other place of your application 🥳

In the next post of this series, we will address building our application for production and packing it into a container in the most efficient way possible. You can find it here:

Nx + NextJS + Docker: Containerizing our application

Sebastián Duque G ・ Jun 28 '23

You can find all related code in the following Github repo:

sebastiandg7 / nx-nextjs-docker

An Nx workspace containing a NextJS app ready to be deployed as a Docker container.

Nx + Next.js + Docker

This repository contains the code implementation of the steps described in the blog posts titled:

Overview

The blog post provides a detailed guide on setting up a Next.js application using Nx and Docker, following best practices and leveraging the capabilities of the Nx workspace.

The repository contains all the necessary code and configuration files to follow along with the steps outlined in the blog post.

Prerequisites

To successfully run the Next.js application and Dockerize it, ensure that you have the following dependencies installed on your system:

Docker (version 23)
Node.js (version 18)
pnpm (version 8)

You can alternatively use Volta to setup the right tooling for this project.

Getting Started

To get started, follow the steps below:

Clone the…

View on GitHub

Modern Shopify Themes Development with Nx-Shopify

Sebastián Duque G — Fri, 14 May 2021 14:03:18 +0000

TL;DR

Nx-Shopify is an Nx plugin for developing Shopify themes with performance, modern tooling, and ergonomics in mind.

Check the Getting Started guide and the full docs at the Nx-Shopify official website.

trafilea / nx-shopify

Nx plugin for developing performance-first Shopify themes 🚀

Nx-Shopify

🔎 An Nx plugin for developing performance-first Shopify themes 🚀

Be it you need to build a custom Shopify store theme, develop a generic theme or even maintain multiple stores/themes with shared code across them, this Nx plugin helps you power-up your development experience

Getting Started

Install the Nx CLI globally

# npm
$ npm install --global nx

# yarn
$ yarn add --global nx

# pnpm
$ pnpm install --global nx

Create an empty Nx workspace (or use an existing one)

$ npx create-nx-workspace my-org --preset=empty
$ cd ./my-org

Install the Nx-Shopify plugin as a devDependency

# npm
$ npm install --save-dev @trafilea/nx-shopify

# yarn
$ yarn add --save-dev @trafilea/nx-shopify

# pnpm
$ pnpm install --save-dev @trafilea/nx-shopify

Generate a Shopify theme using the Nx CLI

$ nx generate @trafilea/nx-shopify:theme my-theme

Check the generators and executors provided by the plugin

$ nx list @trafilea/nx-shopify

Documentation

🤓 Read the full…

View on GitHub

A little history: Shopify Slate & Themekit

Before being deprecated in January 2020, Shopify's official toolkit for developing Shopify themes was Slate. Slate provided a theme development environment that enabled the developer to have a better project structure than the regular directories found in a Shopify theme. With the deprecation of Slate, the only official tool for theme development left is Themekit.

Themekit acts like a bridge between the developer's local files and the files found in a Shopify store's theme. The folder structure of a Themekit theme is meant more for the theme rendering process than for code maintainability or multiple developers constantly working on the same code base. Additionally, a Themekit project provides little to zero build tooling for the application code.

This is how a basic Themekit project looks like:

Given the context above, the need to have a well-defined project structure, dev ergonomics, high-quality code, and use of modern web technologies, were limited due to lack of tooling.

At Trafilea, we heavily use Shopify themes and are constantly making changes to them according to our business needs and growth. Providing our developers a functional, stable, and feature-rich development experience is crucial, this why we built and open-sourced Nx-Shopify.

Nx-Shopify 🚀

Nx-Shopify is an Nx plugin that adds support for modern Shopify Themes development to an Nx workspace. It comes with various features including:

TypeScript based.
Styling with SASS and PostCSS.
Out of the box unit testing with Jest.
Out of the box code formatting using Prettier and ESLint.
Multiple application and Themekit environments.
Code lazy loading.
Code generator for creating new themes with separate configs.
Code generators for creating theme blocks such as layouts, templates, sections, and snippets.
React integration via @nrwl/react.
Webpack extended configuration.
➕ all features included in an Nx workspace.

Nx-Shopify makes use of Shopify Themekit under the hood, so every project built with Nx-Shopify will be compliant with the themekit project format, in case you need to run specific themekit commands in your project. TIP: you can add custom targets for your projects using the Nx run commands executor.

Ok, but...

What is Nx?

Nx is a set of dev tools for monorepos designed to provide a great development experience in a plug-and-play way. According to their website: "Nx is a suite of powerful, extensible dev tools to help you architect, test, and build at any scale — integrating seamlessly with modern technologies and libraries while providing a robust CLI, caching, dependency management, and more."

Watch this 35 seconds video to have a general overview of some of the things Nx does:

(We ❤️ Nx)

Code Generators

Most Nx plugins include code generators to facilitate developers' life so they can focus on what really matters. Nx-Shopify includes generators for:

A fresh generated Shopify theme would look like this:

Every theme block is organized in a component-based/cohesive design with its respective Liquid, styles, Typescript, and test files. You can also nest blocks under another block's directory if that makes sense to you. You have control of your theme project architecture.

CLI commands

The CLI commands that can be executed against a theme are known in Nx as executors. The list of executors included with Nx-Shopify are:

build - Builds the theme to a Themekit compliant structure ready to be deployed to Shopify
serve - Runs a local web & assets server for local theme development
test - Runs Jest tests against the theme code.
deploy - Deploys a built theme to Shopify according to the Themekit environment configured in the config.yml file

You get a list of all plugin's generators and executors by running the following command in your workspace:

nx list @trafilea/nx-shopify

React integration via `@nrwl/react`

Do not miss the React integration step-by-step guide on our docs site.

Star ⭐ the repo, check the docs, and power up your Shopify themes development experience!

trafilea / nx-shopify

Nx plugin for developing performance-first Shopify themes 🚀

Nx-Shopify

🔎 An Nx plugin for developing performance-first Shopify themes 🚀

Getting Started

Install the Nx CLI globally

# npm
$ npm install --global nx

# yarn
$ yarn add --global nx

# pnpm
$ pnpm install --global nx

Create an empty Nx workspace (or use an existing one)

$ npx create-nx-workspace my-org --preset=empty
$ cd ./my-org

Install the Nx-Shopify plugin as a devDependency

# npm
$ npm install --save-dev @trafilea/nx-shopify

# yarn
$ yarn add --save-dev @trafilea/nx-shopify

# pnpm
$ pnpm install --save-dev @trafilea/nx-shopify

Generate a Shopify theme using the Nx CLI

$ nx generate @trafilea/nx-shopify:theme my-theme

Check the generators and executors provided by the plugin

$ nx list @trafilea/nx-shopify

Documentation

🤓 Read the full…

View on GitHub

Could you review my first react app since 3 years ago?

Sebastián Duque G — Mon, 23 Mar 2020 05:15:42 +0000

I just built a very little react app for a technical interview. I come from a solid Angular background, the last time I wrote a react component was back in 2017. So, I've made my best effort to write this app in a clean, solid and consistent architecture.

I would like to receive some feedback from you. Best practices, anti-patterns, code styling, architecture, S.O.L.I.D., component composition... everything is welcome! Could give it a check? :)

sebastiandg7 / tf-react-coding-test

React coding test - Use of Nx workspaces, hooks, ref forwarding, lazy loading, dynamic redux modules, formik, yup, react-input-mask

Welcome to tf-react-coding-test 👋

react coding challenge

🏠 Homepage

✨ Demo - Also hosted in surge.sh (over HTTP, API calls will work)

Usage

Install

npm install

Serve

npm start react-coding-test

Dependency graph

npm run dep-graph

Used libs & techniques

Nx: workspace & dev tools
standard-version: automatic versioning & changelog generation
Lazy loading: lazy load application features
Redux Dynamic Modules: modular Redux state management loaded on demand
Faker.js: fake data generation
Formik: forms handling
Yup: data validation
destyle.css: CSS reset

Workspace setup

You can find all the generated code script under ./tools/workspace-setup.sh (suitable for worksapce architecture replication)

Author

👤 Sebastián Duque Gutiérrez

Twitter: @sebastiandg7
Github: @sebastiandg7
LinkedIn: @sebastianduqueg

🤝 Contributing

Contributions, issues and feature requests are welcome!

Feel free to check issues page.

Show your support

Give a ⭐️ if this project helped you!

This README was generated with ❤️ by readme-md-generator

View on GitHub

Thank you!

PD: CSS is not my best strength (currently working on getting better at it!)

Stay home, stay safe and wash your hands regularly.

How do you handle role/permissions updates with JWT?

Sebastián Duque G — Thu, 29 Aug 2019 15:59:23 +0000

Usually, JWT implementations in a REST Api backend save the user roles and/or permissions inside the JWT token claims. In this cases, clients make use of this claims to restrict user's interaction with some of the app features.

There are some user, or server, actions that update the user's authorization roles/permissions. However, the last emitted JWT token has not expired yet so it still has the old roles/permissions in it's claims.

How do you or your team handle this scenarios in order to update user's authorization in client side apps?

I've seen many options out there:

Create a token version and update it in server side to compare with new request
Keep token lifetime short
Use refresh token mechanism and invalidate the user's current token

I want to hear you...

Forem: Sebastián Duque G

Nx + NextJS + Docker: Containerizing our application

Introduction

Table of Contents

Prerequisites

Nx + NextJS + Docker: Creating the NextJS application

Sebastián Duque G ・ Jun 28 '23

Step 1: Preparing the Next.js Application

Step 2: Adding a container target to the project

Understanding our container target config

Step 2: Creating a Dockerfile

Step 3: Building the Docker Image

Step 4: Running the Docker Container

Conclusion

sebastiandg7 / nx-nextjs-docker

An Nx workspace containing a NextJS app ready to be deployed as a Docker container.

Nx + Next.js + Docker

Overview

Prerequisites

Getting Started

Nx + NextJS + Docker: Creating the NextJS application

Introduction

Table of Contents

Prerequisites

Step 1: Set up your environment

Step 2: Create your Nx workspace

Install the required Nx plugins

Step 3: Generating our Next.js application

Step 4: Adding some workspace libraries

Step 5: Fixing our build-custom-server target

Conclusion

Nx + NextJS + Docker: Containerizing our application

Sebastián Duque G ・ Jun 28 '23

sebastiandg7 / nx-nextjs-docker

An Nx workspace containing a NextJS app ready to be deployed as a Docker container.

Nx + Next.js + Docker

Overview

Prerequisites

Getting Started

Modern Shopify Themes Development with Nx-Shopify

TL;DR

trafilea / nx-shopify

Nx plugin for developing performance-first Shopify themes 🚀

Nx-Shopify

Getting Started

Documentation

A little history: Shopify Slate & Themekit

Nx-Shopify 🚀

What is Nx?

Code Generators

CLI commands

React integration via @nrwl/react

trafilea / nx-shopify

Nx plugin for developing performance-first Shopify themes 🚀

Nx-Shopify

Getting Started

Documentation

Could you review my first react app since 3 years ago?

sebastiandg7 / tf-react-coding-test

React coding test - Use of Nx workspaces, hooks, ref forwarding, lazy loading, dynamic redux modules, formik, yup, react-input-mask

Welcome to tf-react-coding-test 👋

🏠 Homepage

✨ Demo - Also hosted in surge.sh (over HTTP, API calls will work)

Usage

Install

Serve

Dependency graph

Used libs & techniques

Workspace setup

Author

🤝 Contributing

Show your support

How do you handle role/permissions updates with JWT?

Step 2: Adding a `container` target to the project

Understanding our `container` target config

Step 5: Fixing our `build-custom-server` target

React integration via `@nrwl/react`