DEV Community: Devin Shoemaker

Configure ESLint for Next.js

Devin Shoemaker — Fri, 19 Feb 2021 02:17:31 +0000

By default, Next.js does not come with any linting solution. ESLint is commonly used for linting modern web applications, and is a good companion to Next.js.

Install ESLint Dependencies

First, we need to install these ESLint dependencies:

npm install --save-dev eslint eslint-plugin-react

# or

yarn add --dev eslint eslint-plugin-react

eslint is the CLI and main package responsible for linting your project.

eslint-plugin-react is a plugin for ESLint with rules specific to React.

Generate ESLint Config

ESLint requires a config in the root of the project, which can be easily generated with the CLI.

npx eslint --init

# or

yarn run eslint --init

This command will prompt you for a series of questions:

Select To check syntax and find problems
Select JavaScript modules as the type of module your project uses
Select React as the type of framework your project uses
Select whether your project uses TypeScript. Note: if you do not already have TypeScript configured then your linter will fail. However, you can easily set this up later with this guide: [[eslint-typescript]].
Select Browser as the environment where your code will run in
Select what format you want the ESLint config to be in. I personally prefer JSON.
If prompted to install dependencies, click Yes

You should now have an .eslintrc.* file generated at the root of your project.

ESLint can now be used with the following commands:

npx eslint pages/*

# or

yarn run pages/*

The commands above will only lint the files inside pages/, but you can customize this however you see fit. You can also specify multiple directories: pages/* components/*

For more information on using the CLI, visit the official documentation.

Update ESLint Config for Next.js

If you run ESLint as-is then you'll likely have some linting errors. To fix this, we need to update the ESLint config rules to fit Next.js.

The first thing we need to fix is the warning: Warning: React version not specified in eslint-plugin-react settings

To get rid of this, we can add settings property at the root of our config:

{
    "settings": {
        "react": {
            "version": "detect"
        }
    },
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended"
    ],
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
    }
}

Open the ESLint config that was generated and edit the rules object:

{
    "settings": {
        "react": {
            "version": "detect"
        }
    },
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended"
    ],
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "react/prop-types": "off",
        "react/react-in-jsx-scope": "off"
    }
}

The react/prop-types rule enforces that all components have prop-types defined. While we can use prop-types with Next.js, TypeScript is typically preferred.

The react/react-in-jsx-scope rule will throw an error if a component files not import React. With React 17, which Next.js now ships with, it is no longer necessary to import React and thus this rule can be disabled.

Finally, we need to update the env property to include node since Next.js supports Server Side Rendering in Node.

{
    "settings": {
        "react": {
            "version": "detect"
        }
    },
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended"
    ],
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "react/prop-types": "off",
        "react/react-in-jsx-scope": "off"
    }
}

Ignore Unnecessary Files

Now that we have ESLint working properly with Next.js, we need to add a file to tell ESLint to ignore certain files that we do not want linted.

Create a file called .eslintignore at the root of your project with these contents:

**/node_modules/*
**/out/*
**/.next/*

Add Lint Script to package.json

The scripts property in your package.json can be updated to add a lint script to make linting easier:

{
  "name": "my-site",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint ./ --ext js,jsx,ts,tsx"
  },
  "dependencies": {
    "next": "10.0.5",
    "react": "17.0.1",
    "react-dom": "17.0.1"
  },
  "devDependencies": {
    "eslint": "^7.18.0",
    "eslint-plugin-react": "^7.22.0"
  }
}

In this lint script we are calling the ESLint CLI, telling it to lint files under the current folder (./), and looking for files with the extensions js, jsx, ts, or tsx.

References

ESLint Getting started
Start a clean Next.js project with TypeScript, ESLint and Prettier from scratch

Use Tailwind CSS with React Apps in Nx

Devin Shoemaker — Sun, 07 Feb 2021 01:23:06 +0000

Tailwind is a popular utility-based CSS framework that enables developers to rapidly implement and iterate on design. Responsive design and dark mode are easier than ever to implement, and so far I have been very happy with Tailwind and even use it on my site.

Install Tailwind Dependencies

Nx 11 still uses PostCSS 7, so we have to install Tailwind dependencies in PostCSS 7 compatibility mode.

npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

# or

yarn add tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Initialize Tailwind

npx tailwindcss init -p

Purge CSS

Tailwind requires us to specify the files that we should purge the CSS from. Without purging CSS, all of the Tailwind styles are loaded into the application which is quite large. When we purge the CSS, we can remove all the unused styles.

Update tailwind.config.js:

module.exports = {
  purge: ['./apps/my-app/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Make sure to replace my-app with the name of your application. If additional applications are added to your workspace that will use Tailwind then you will need to add another string to the purge property accordingly.

Extend Webpack Config

The default @nrwl/react Webpack config does not include the PostCSS loader, so we need to override it.

Create a file called react-tailwind.webpack.config.js:

const nrwlConfig = require('@nrwl/react/plugins/webpack.js');

module.exports = (config) => {
  nrwlConfig(config);
  return {
    ...config,
    module: {
      rules: [
        ...config.module.rules,
        {
          test: /\.css$|\.scss$|\.sass$|\.less$|\.styl$/,
          use: [
            {
              loader: 'postcss-loader',
            },
          ],
        },
      ],
    },
  };
};

Next, update your workspace.json and replace the webpackConfig for your app:

"webpackConfig": "react-tailwind.webpack.config.js"

Import Tailwind Styles

Next, in order to use the Tailwind styles, you must import them in your root component:

import 'tailwindcss/tailwind.css';

Now you should be able to use Tailwind CSS classes within your Nx React application.

Nxtend Nx 11 Support and Plugin Updates

Devin Shoemaker — Tue, 05 Jan 2021 13:58:08 +0000

The Nxtend plugins have been updated to support Nx 11, and with that are coming some changes. Nxtend plugin versions will now be more closely aligned with Nx, and the Ionic and Capacitor plugins will be more closely aligned with their respective projects. A lot of work have gone into the updates of each of these plugins. Features have been added, bugs have been fixed, and there were even some breaking changes. However, I think that Nxtend is the most sustainable and maintanable than ever.

Read more for details on updates and upgrades...

Ionic React

This plugin has some more dramatic changes compared to the rest. I have determined that some changes needed to be made to ensure the longevity of this project, and that resulted in the removal of some functionality. This is a breaking change in terms of interfacing with the plugin schematics, but it should not break existing applications. In this case, a number of options have been removed from the application schematic.

This includes:

--classComponent
--style
--pascalCaseComponent
--skipFromat
--linter
--js

In exchange, this plugin now supports generating several of the official starter templates, such as tabs and sidemenu. These changes more closely align this plugin with the Ionic CLI and will make the project vastly more maintainable. In the future I want to support more schematics such as libraries, pages, and more, and I want to be able add these enhancements in a scalable manner.

I hope the users of this plugin will understand this decision. Removing functionality is never a good user experience, but I believe that this change will pay dividends in the future.

Features

add additional Ionic starter templates to application schematic
support custom Nx layouts
update Ionic to 5.5.2

Bug Fixes

fix generating an application in a sub-directory with Capacitor enabled

BREAKING CHANGES

remove classComponent option from application schematic (now defaults to functional components)
remove style option from the application schematic (now defaults to CSS)
remove pascalCaseComponent option from the application schematic (now defaults to true)
remove skipFormat option from the application schematic (now defaults to false)
remove linter option from the application schematic (now defaults to ESLint)
remove js option from the application schematic (now defaults to true)

Ionic Angular

Features

Nx 11 support (Nx 11 now required)
update Ionic to 5.5.2
add additional Ionic starter templates to application schematic
support none as a unit test and e2e config for the application schematic

Bug Fixes

fix generating an application in a sub-directory with Capacitor enabled

Capacitor

Features

Nx 11 support (Nx 11 now required)
update Capacitor to 2.4.5
added cap builder for a more generic interface with the Capacitor CLI

Upgrading

If you are utilizing the @nxtend/capacitor plugin then you should upgrade this first:

nx migrate @nxtend/capacitor

yarn install
# or
npm install

nx migrate --run-migrations migrations.json

yarn install
# or
npm install

Next, you can upgrade the @nxtend/ionic-react plugin:

nx migrate @nxtend/ionic-react

yarn install
# or
npm install

nx migrate --run-migrations migrations.json

yarn install
# or
npm install

Or the @nxtend/ionic-angular plugin:

nx migrate @nxtend/ionic-react

yarn install
# or
npm install

nx migrate --run-migrations migrations.json

yarn install
# or
npm install

For information on upgrading the plugin, visit the nxtend upgrades documentation.

Release @nxtend/ionic-angular 1.0.0

Devin Shoemaker — Fri, 13 Nov 2020 15:17:45 +0000

Earlier this year I released the Nxtend Ionic React plugin for Nx. From the beginning I intended to support all of the frameworks that Ionic officially supports, and today, Ionic Angular support has been added to Nx with the Nxtend Ionic Angular plugin.

Ionic combined with Capacitor enables developers to build high quality cross platform applications with web technology. Nx offers extensible tooling for monorepos, which can be a powerful combination with Ionic. Using Nx, large applications can be broken down into smaller libraries that are more maintainable and faster to test and build by using Nx's affected commands. Large organizations may have multiple applications that could benefit from sharing code, and Nx makes that easy as well.

To start developing cross platform application with Ionic Angular in an Nx workspace, visit the official Getting Started guide.

Release @nxtend/ionic-react 4.0.0

Devin Shoemaker — Thu, 05 Nov 2020 03:00:20 +0000

Nxtend Ionic React v4 includes typical quality of life fixes with dependency updates, but has some breaking changes to the API. These changes will improve the maintainability of this project and will help prepare the plugin for future capabilities. For more details on these changes, read below.

Features

update Ionic to 5.4.1
add ionic.config.json to application
update starter template

BREAKING CHANGES

don't install and configure Cypress Testing Library
removed disableSanitizer flag from application schematic

One of the major changes of this release is that @nxtend/ionic-react will no longer add and configure Cypress Testing Library dependencies. We are big fans of the project, but maintaining the dependencies and breaking changes has become more effort than it's worth for this plugin. If you are generating a new project then I would highly recommend you configure this yourself. If you need help getting started, then please visit the official documentation.

The latest updates from the Ionic React blank starter template have also been added to the plugin.

The disableSanitizer flag has been removed from the application schematic. This plugin supports many permutations due to the amount of configuration options when generating an application, and as many of these permutations are end-to-end testing as much as possible. Every new option that is added increases the level of maintenance required as well as the test times, and at this point, it does not seem worth it to continue supporting the disableSanitizer flag. The built-in Ionic sanitizer should only be disabled unless it explicitely needs to, and this process is well documented in the official Ionic documentation.

Nxtend Capacitor has also been updated, so it is recommended you update that plugin as well.

For information on upgrading the plugin, visit the nxtend upgrades documentation.

Release @nxtend/capacitor 2.0.2

Devin Shoemaker — Thu, 05 Nov 2020 02:56:22 +0000

Nxtend Capacitor v2 is here! This release has a number of big changes that warrated a major release. Capacitor project structures have been changed, Nx Console support has been improved, and dependencies have been updated. That being said, a manual migration is needed to support upcoming capabilities. Read the full blog post for more information on updating the plugin and migrating your projects. Please note, due to an npm issue, the current release is 2.0.2.

Fixes

fix Windows support

Features

update Capacitor to 2.4.2
add Capacitor configs to frontend application
add or update package.json in project folder when generating a Capacitor project
add builder configurations for Nx Console
add add-plugin schematic for adding Capacitor plugins

BREAKING CHANGES

Capacitor plugins must now be added to both the root and project-level package.json

One of the major changes in this release is that Capacitor configurations are not added to a dedicated application (e.g. my-app-cap) but rather added directly to the associated frontend project. This also means that the you will need to run @nxtend/capacitor builder commands from the frontend project as well (e.g. nx run my-app:sync --project android).

Another notable change is that the capacitor-project schematic will now add or update the package.json in the project folder. This was done to increase compatibility with the Capacitor CLI and from now on Capacitor plugins should be added both to the root and project-level package.json. To help with this, an add-plugin schematic has been added.

For more details on migrating your Capacitor project, visit the MIGRATION.md.

For information on upgrading the plugin, visit the nxtend upgrades documentation.

Change Nx Default Affected Branch to Main

Devin Shoemaker — Tue, 22 Sep 2020 02:32:25 +0000

The Nx affected commands are a powerful way to scale monorepos by only rebuilding and retested the apps and libraries that could be affected by a particular change. This is accomplished by comparing hashes of the files modified in the current branch compared to the base branch which defaults to master. It's easy to pass in a different branch as a parameter with --base, however, you can also change this default in the workspace nx.json.

First, make sure that you have created the new base branch. In this example, we will be using main as our base branch.

Next, edit the workspace nx.json. If you do not have the affected property then you will need to add that first, and then you can customize the base branch.

{
  "npmScope": "nxtend",
  "affected": {
    "defaultBase": "main"
  },
  ...
}

Lastly, this feature is only available in Nx 9.5 or higher. If you are currently on a version of Nx lower than this then I recommend upgrading to the latest version of Nx, or at least the latest version of Nx 9.

Upgrade to latest version:

nx migrate latest

Upgrade to Nx 9.7:

nx migrate @nrwl/workspace@9.7.0

Release @nxtend/ionic-react 3.1.0

Devin Shoemaker — Tue, 15 Sep 2020 02:03:11 +0000

This is a pretty typical maintenance release with a few package updates. The most notable change is @testing-library/cypress which introduces some breaking changes which you can read about below, or in the release notes.

Features

update @nxtend/capacitor to 1.1.0
update Ionic to 5.3.2
update Ionicons to 5.1.2
update @testing-library/cypress to 7.0.0
update @testing-library/jest-dom to 5.11.4
update @testing-library/user-event to 12.1.5

BREAKING CHANGES

@testing-library/cypress
- get and query queries (which have been deprecated) have now been removed. Use find queries only.
- TS: TypeScript type definitions have been brought into this module and no longer needs to be referenced from DefinitelyTyped

For information on upgrading the plugin, visit the nxtend upgrades documentation.

@nxtend/ionic-react 3.0.3

Devin Shoemaker — Fri, 17 Jul 2020 03:13:08 +0000

This version of the @nxtend/ionic-react plugin includes a few quality of life improvements regarding dependency management.

Bug Fixes

add @nrwl/react version based on the users Nx version
don't unnecessarily add @nxtend/ionic-react dependency in init schematic
add @nxtend/capacitor 1.0.0 instead of *

Previously, @nxtend/ionic-react would add the latest version of @nrwl/react to the users package.json which could cause issues if the user was using an older version of Nx. Now, the plugin will look at the users local version of Nx and will install the same version of @nrwl/react.

An update has also been made that avoids adding @nxtend/ionic-react unnecessarily when using ng add.

Finally, the plugin will install version 1.0.0 of @nxtend/capacitor instead of version *.

For information on upgrading the plugin, visit the nxtend upgrades documentation.

@nxtend/ionic-react 3.0.2

Devin Shoemaker — Sat, 11 Jul 2020 18:07:20 +0000

This is a minor update to fix a bug where the user was forced to manually install the @nxtend/capacitor plugin before generating an application with @nxtend/ionic-react.

Bug Fixes

properly initialize Capacitor plugin

The @nxtend/capacitor plugin was not being initialized properly with the @nxtend/ionic-react:init schematic. This resulted in an error being thrown if an Ionic React application was attempted to be generated if @nxtend/capacitor had not been added to the users workspace manually.

This change ensures that the @nxtend/capacitor plugin is added to the users package.json and is initialized before generating an application with Capacitor enabled.

Unit and e2e tests have also been added to ensure this functionality doesn't break in the future.

For information on upgrading the plugin, visit the nxtend upgrades documentation.

Nx Brings High-Quality CLI Tooling to React

Devin Shoemaker — Mon, 06 Jul 2020 20:30:33 +0000

I have been a fan of both Angular and React for a while now. I think both options have their strenghths and weaknesses, but one of the things that I (and many others) like most about Angular is its CLI. If you've never used Angular, then you probably don't know what you're missing. And if you've used Angular in the past then you likely miss the power that the CLI offers. While Nx offers many benefits beyond this, one of my favorite features is that it brings the power of the Angular CLI to React and other frameworks through plugins.

For those unfamiliar with the Angular CLI, it can:

Generate new applications
Generate new components and other pieces of code in a consistent manner with schematics
Unify serve, test, lint, etc., commands with builders
Update dependencies and files with migrations
Be extended with third-party libraries that integrate with the CLI

The Nx CLI uses the same technology and helps bring these features to any framework supported by first or third-party plugins. Here are a few things that you can generate with the standard @nrwl/react plugin for Nx:

Application
Component
Library
Redux slice
Storybook configuration

While these things may seem trivial, the reduced copy and paste can go a long way, and defaults for these commands can be set in the Nx workspace.json.

Nx was originally developed for Angular, but over time it has embraced React and other frameworks in an agnostic way and I highly recommend React developers look at this technology for their next project. If you're interested in learning more then I suggest following the official Nx React tutorial.

An important thing to note is that Nx is not a framework and does not intend to be one. In fact, Nx currently supports both create-react-app style applications with the @nrwl/react plugin, as well as Next.js and Gatsby with @nrwl/next and @nrwl/gatsby respectively.

Build Cross-Platform Applications in a Monorepo with Nx, Ionic, and Capacitor

Devin Shoemaker — Mon, 06 Jul 2020 00:42:55 +0000

Background and Motivation

A few months ago I released an Ionic React plugin for Nx. While I really enjoy using Ionic for its comprehensive component library, the project is not nearly as complete without Capacitor.

Capacitor is developed by the Ionic team but it does not require an Ionic project. Capacitor is framework agnostic and should work with any app in an Nx workspace. If you would like to learn more about Capacitor then I suggest you check out the official documentation.

@nxtend/ionic-react enabled developers to create web apps that looked native, @nxtend/capacitor enables developers to compile their web apps to a native platform such as iOS and Android.

Usage

While the officially Capacitor CLI does not work well with an Nx workspace, I have tried to match the functionality with the plugin as much as possible.

Generate Ionic React App with Capacitor

First, you need to initialize the @nxtend/ionic-react plugin:

# Angular CLI
ng add @nxtend/ionic-react

# Nx CLI

# npm
npm install --save-dev --exact @nxtend/ionic-react

# yarn
yarn add --save-dev --exact @nxtend/ionic-react

nx generate @nxtend/ionic-react:init

Once the plugin has been added to your Nx workspace you can generate an Ionic React application with Capacitor:

nx generate @nxtend/ionic-react:application {Ionic React application name} --capacitor true

nx generate @nxtend/ionic-react:application mobile-app --capacitor true

The @nxtend/capacitor plugin will be added to your workspace and a Capacitor project will be automatically generated with a new @nxtend/ionic-react application if you do not specity the --capacitor flag. However, you can alsoadd Capacitor to an existing project.

Add Capacitor to Existing Project

First, you need to initialize the @nxtend/capacitor plugin:

# Angular CLI
ng add @nxtend/capacitor

# Nx CLI

# npm
npm install --save-dev --exact @nxtend/capacitor

# yarn
yarn add --save-dev --exact @nxtend/capacitor

nx generate @nxtend/capacitor:init

Once the plugin has been added to your Nx workspace you can generate a Capacitor project from an existing frontend project:

nx generate @nxtend/capacitor:capacitor-project {Capacitor project name} --project {frontend project name}

nx generate @nxtend/capacitor:capacitor-project mobile-app-cap --project mobile-app

Add Native Platforms

Now that a Capacitor project has been added to your Nx workspace you can begin adding support for native platforms. Currently, Capacitor supports Android and iOS with Electron support being in beta.

nx run {Capacitor project name}:add --platform {native platform}

nx run mobile-app-cap:add --platform android

Sync Native Platform

Running the sync command will update the native platform dependencies and copy a build of your frontend project to the Capacitor project:

nx run {Capacitor project name}:sync --platform {native platform}

nx run mobile-app-cap:sync --platform android

Open Native Platform

Finally, you can open the native platform:

nx run {Capacitor project name}:open --platform {native platform}

nx run mobile-app-cap:open --platform android

Conclusion

The @nxtend/capacitor plugin enables any project in an Nx workspace to be compiled to a native platform. Combined with @nxtend/ionic-react you can create high-quality cross-platform applications in an Nx monorepo.

I highly recommend looking at the official Capacitor documentation for more information.

Resources

Ionic Framework
Capacitor
@nxtend/ionic-react
@nxtend/capacitor