DEV Community: Francisco Martin

Nx: How to setup a full-stack app with Nx

Francisco Martin — Wed, 22 Dec 2021 22:27:30 +0000

NxAwesomeTodos

Awesome project to learn how to setup a full-stack project with Nx

Tech stack

TypeScript
Next.js
Express.js
React components
Storybook
Cypress

Considerations

This stack is only with demostration purposes. You can choose other techs like React, Angular or Vue. I know that the tests for client app are broken because we need to mock fetch API. I skipt this step because is out of the scope of this guide. Other steps missing would be setup a database, but those are "app" specific problem. The support for Cypress is out of the box so it is not necessary any extra configuration. Any improvement or correction will be appreciate.

Setup

Create the project

yarn create nx-workspace

Answer this to questions

Workspace name > nx-awesome-todos
What to create in the new workspace > express
Application name > api
Use Nx Cloud? > No

Setup API project

Create file apps/api/src/app/index.ts and paste the following content

import * as express from 'express';

const todos = [
  {
    id: 1,
    content: 'First todo',
    completed: false,
  },
  {
    id: 2,
    content: 'Second todo',
    completed: true,
  },
];

const app = express();

app.get('/api/todos', (req, res) => {
  res.send({ todos });
});

export default app;

Replace the content of apps/api/src/main.ts with

import app from './app';

const port = process.env.port || 3333;

const server = app.listen(port, () => {
  console.log(`Listening at http://localhost:${port}/api`);
});

server.on('error', console.error);

Run server

nx serve api

Check that everything is working making a GET request to http://localhost:3333/api/todos

Setup API tests

Install supertest

yarn add supertest

Create the first test at apps/api/test/api.test.ts

import * as supertest from 'supertest';
import app from '../src/app';

const requestWithSupertest = supertest(app);

describe('Example describe', () => {
  test('Example test', () => {
    expect(1).toBe(1);
  });
});

describe('Generic endpoints', () => {
  test('GET /api/todos', async () => {
    const res = await requestWithSupertest.get('/api/todos');
    expect(res.status).toEqual(200);
  });
});

Test the app

nx test api

Setup common library

nx g @nrwl/node:lib shared-types

Add an interface at libs/shared-types/src/lib/shared-types.ts

export interface Todo {
  id: number;
  content: string;
  completed: boolean;
}

Import the interface at apps/api/src/app/index.ts

import { Todo } from '@nx-awesome-todos/shared-types';
import * as express from 'express';

const todos: Todo[] = [
  // Rest of the code
];

Setup client

This command create the app and the asociate Cypress setup

 nx g @nrwl/next:app client

Setup CORS

Enable CORS at server

yarn add cors
yarn add -D @types/cors

Setup cors at server apps/api/src/main.ts

import * as cors from 'cors';

app.use(cors());

Get data from server

Create a file at apps/client/pages/api/todos.ts with this content

import type { NextApiRequest, NextApiResponse } from 'next';
import { Todo } from '@nx-awesome-todos/shared-types';

type Data = Todo[];

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse<Data>
) {
  const response = await fetch('http://localhost:3333/api/todos');
  const todos: Todo[] = await response.json();
  res.status(200).json(todos);
}

Change the content of apps/client/pages/index.tsx

import { useEffect, useState } from 'react';
import { Todo } from '@nx-awesome-todos/shared-types';
import styles from './index.module.scss';

export function Index() {
  const [todos, setTodos] = useState<Todo[]>([]);

  useEffect(() => {
    fetch('/api/todos')
      .then((res) => res.json())
      .then((res) => setTodos(res.todos));
  }, []);

  return (
    <div className={styles.page}>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            {todo.content} - {todo.completed ? 'completed' : 'not completed'}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default Index;

Setup client styles

Creat global variables and styles. Create a folder named styles and a file named variables.scss

$test-gray: gray;

Load style variables

// eslint-disable-next-line @typescript-eslint/no-var-requires
const withNx = require('@nrwl/next/plugins/with-nx');
const path = require('path');

/**
 * @type {import('@nrwl/next/plugins/with-nx').WithNxOptions}
 **/
const nextConfig = {
  nx: {
    // Set this to true if you would like to to use SVGR
    // See: https://github.com/gregberge/svgr
    svgr: false,
  },
  reactStrictMode: true,
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
    prependData: `@import "variables.scss";`,
  },
  images: {
    domains: ['images.unsplash.com'],
  },
};

module.exports = withNx(nextConfig);

Restart the development server for the changes to take effect.

Setup client eslint

yarn add -D prettier eslint-plugin-prettier

Add prettier plugin to root .eslintrc.json. To run linter

nx lint client

Setup client stylelint

Install dependencies

yarn add -D stylelint nx-stylelint

Run setup

nx g nx-stylelint:configuration --project client
nx g nx-stylelint:scss --project client

Add your rules to .stylelintrc.json.

Run linter

nx stylelint client

Setup client tests

Install dependencies

yarn add -D @testing-library/jest-dom

Create two files:

apps/client/__mocks__/fileMock.js

module.exports = 'test-file-stub';

apps/client/__mocks__/styleMock.js

module.exports = {};

Add this two lines inside apps/client/jest.config.js

testEnvironment: 'jsdom',
setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],

Create file named apps/client/jest.setup.js with this content

import '@testing-library/jest-dom/extend-expect';
import '@testing-library/jest-dom';

Create the folder for tests named apps/client/__tests__. Place your tests here. You can create subfolders if you need to keep your tests organized.

Run your client tests

nx test client

Note that you should mock the fetch request in order to tests works. If your project is large (and probably is because your are setting up a monorepo) you can considerer use axios and moxios to handle network requests.

Create component library

nx g @nrwl/react:lib ui

Create component

You can create a component manually or using a command like this

nx g @nrwl/react:component todos --project=ui --export

Copy and paste the following content in the created component

import { Todo } from '@nx-awesome-todos/shared-types';

export interface TodosProps {
  todos: Todo[];
}

export function Todos(props: TodosProps) {
  return (
    <ul>
      {props.todos.map((t) => (
        <li className={'todo'} key={t.id}>
          {t.content}
        </li>
      ))}
    </ul>
  );
}

export default Todos;

Use the new component in the client project

import { Todos, Ui } from '@nx-awesome-todos/ui';

<Todos todos={todos} />;

PD: Because Nx is a monorepo (All node_modules are at the root level), we can use Next.js components inside our React components like Link, Image, etc.

Setup Storybook

nx g @nrwl/react:storybook-configuration ui

Go to libs/ui/src/lib/ui.stories.tsx, add the todos to args

import { Todo } from '@nx-awesome-todos/shared-types';
import { Story, Meta } from '@storybook/react';
import { Todos, TodosProps } from './todos';

export default {
  component: Todos,
  title: 'Todos',
} as Meta;

const todos: Todo[] = [
  { id: 1, content: 'First todo', completed: true },
  { id: 2, content: 'Second todo', completed: false },
];

const Template: Story<TodosProps> = (args) => <Todos {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  todos,
};

Run storybook on the ui project

nx run ui:storybook

Setup a complete workflow with React, Firebase, Gitlab and PWA support

Francisco Martin — Tue, 28 Jan 2020 20:05:16 +0000

At the end of this article, you will get the following:

A PWA with support for install on your devices.
A React app made with TypeScript.
Two enviroments on Firebase. You can add more if you need.
- A enviroment for testing and development.
- A production enviroment.
A testing setup with Jest and enzyme.

Sorry for some disorder with the points. I have problems with the markdown syntax here on dev.to

Prerequirements

You must have installed the following software:

Node.JS
Yarn or npm
A google account
A gitlab.com account

On the part of knowledge. You only need some knowledge on the use of terminal. You don't need know about React.JS or TypeScript.

Setting up the Firebase projects

Go to https://firebase.google.com/ and sign in with your google account. Click on "Go to console" button. Now, you should see a list with your projects created. If you have not created any before, the list will be empty. You must follow the next instructions to create two projects.

Add project. This step take a while.
Click on the project.
On the sidebar, go to Authentication > User auth methods.
Enable the methods that you want. I recommend at least email and Google.
Go to database on the sidebar. Click on "Create database". Ensure that the database is Cloud firestore. The database rules will be updated later. Select a location for your database.
Repeat the previous steps for "Storage" section. The rules and storage location may be differents than databases.

Now create a second project with the same configuration. The location maybe differents than at the first project, but the rules must be the same.

Initialize the project on local

Install the firebase CLI.

sudo npm install -g firebase-tools
// or
yarn global add firebase-tools

List the projects created

firebase projects:list

Create the project

mkdir my-project
cd my-project
firebase init

Select Firestore, Hosting and Storage pressing the Space key and press Enter to confirm. Select "Use an existing project". Select your main (production) project. Select the default options.

Create the React project

npx create-react-app client --typescript

The project name is up to you, and you can use JavaScript if you want.

Create the alias projects. Copy and replace the content of your local .firebaserc file with

{
  "projects": {
    "production": "<your-production-project-id>",
    "staging": "<your-staging-project-id>"
  }
}

Create a token for production environment. Copy the token and save for later. This is the token for production.

firebase use production
firebase login:ci

Repeat the previous step for staging environment and remember copy the token.
Change the rules. I recommend change the default rules to the following

allow read, write;

With this rule, you can read and write with any control. This can be useful for the firsts steps of the project. The rules will change every time that you deploy. Later you can change the rules for other more secure. Take in consideration that all of your environments share the rules.

Setup the React app

First of all go to the app folder.

cd client

Remove the .git folder.

rm -rf .git

Install the needed dependencies.

yarn add dotenv firebase

Install the types dependencies (Skip this step if you don't use TypeScript).

yarn add -D @types/dotenv @types/firebase

Inside the src folder, create a file named firebase.ts (the name is up to you). And fill with the following code

// firebase.ts
import firebase from 'firebase/app';
import 'firebase/storage';
import 'firebase/firestore';
import 'firebase/auth';

const firebaseConfig = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_DATABASE_URL,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_APP_ID,
  measurementId: process.env.REACT_APP_MEASUREMENT_ID
};

firebase.initializeApp(firebaseConfig);

Create a file named .env at the same level of your package.json . Copy and paste the following code and use your own values. Those values can be extracted for your staging project in firebase. For more info visit https://create-react-app.dev/docs/adding-custom-environment-variables/

REACT_APP_API_KEY=
REACT_APP_AUTH_DOMAIN=
REACT_APP_DATABASE_URL=
REACT_APP_PROJECT_ID=
REACT_APP_STORAGE_BUCKET=
REACT_APP_MESSAGING_SENDER_ID=
REACT_APP_APP_ID=

Load the enviroment variables. Inside your src/index.tsx paste the following code before the render method call.

import { config } from 'dotenv';
config();

(Optional) This is step is only for made a PWA. A PWA involves many things apart of that, but start replacing

serviceWorker.unregister();

for

serviceWorker.register();

Setup testing

Install the development dependencies

yarn add -D enzyme enzyme-adapter-react-16 enzyme-to-json jest jest-enzyme ts-jest

Install the types

yarn add -D @types/enzyme @types/enzyme-adapter-react-16 @types/jest

(Optional) With the deafult


setup types are added like a dependency instead a dev dependency so copy and paste to the proper place.

Create a file named jest.config.js and write the following code. Note that the extension is js not ts .

module.exports = {
  roots: ['<rootDir>/src'],
  transform: {
    '^.+\\.tsx?$': 'ts-jest'
  },
  testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$',
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
  snapshotSerializers: ['enzyme-to-json/serializer']
};

Create a test file. The test files should have the following format in their name my-component.test.tsx . You can take like reference the test file for App component. For the test step in the workflow, at least a test must be provided.

import React from 'react';

test('Dummy test', () => {
  expect(true).toBe(true);
});

This test always pass and it is only provided for the test step.

Run the test command to check that all works

yarn test

Gitlab setup

Move the .gitignore file content to the root folder file.

Create a file at the root folder named .gitlab-ci.yml and copy the content inside the file

image: node:12.13.1

cache:
  key: cache_yarn
  paths:
  - .cache_yarn

stages:
  - install
  - build
  - test
  - deploy

install_client:
  stage: install
  script:
    - cd ./client && yarn install --cache-folder ../.cache_yarn
  artifacts:
    paths:
    - client/node_modules

build_client:
  stage: build
  script:
    - cd ./client && yarn build
  dependencies:
    - install_client
  artifacts:
    paths:
    - client/build

build_client_staging:
  stage: build
  script:
    - cd ./client && yarn build
  dependencies:
    - install_client
  only:
    - staging
  environment:
    name: staging
  artifacts:
    paths:
    - client/build

build_client_production:
  stage: build
  script:
    - cd ./client && yarn build
  dependencies:
    - install_client
  only:
    - production
  environment:
    name: production
  artifacts:
    paths:
    - client/build

test_client:
  stage: test
  script:
    - cd ./client && yarn test
  dependencies:
    - install_client

deploy_all_staging:
  stage: deploy
  script:
    - yarn global add firebase-tools --cache-folder ../.cache_yarn
    - firebase deploy --token $FIREBASE_DEPLOY_KEY_STAGING --project staging
  only:
    - staging
  environment:
    name: staging
  dependencies:
    - build_client_staging

deploy_all_production:
  stage: deploy
  script:
    - yarn global add firebase-tools --cache-folder ../.cache_yarn
    - firebase deploy --token $FIREBASE_DEPLOY_KEY_PRODUCTION --project production
  only:
    - production
  environment:
    name: production
  dependencies:
    - build_client_production

Initialize the git repository and add the content

git init
git add -A
git commit -m "Initial commit"

Create a repository on Gitlab.com

Add origin to the repo

git remote add origin git@gitlab.com:<your-gitlab-username>/<your-repo-name>.git

Upload the project to Gitlab.com
```
git push -U origin master
```

The next steps are done on Gitlab.com

Create two branches on the remote repository. One must be staging and another production
Create protected branches.
1. Go to Setup > Repository > Protected branches
2. Add the production and staging branches
Create the enviroment variables
1. Go to Setup > CI/CD
2. Add the following variables

_______________________________________________
|               Key              |    Scope   |
|--------------------------------|------------|
| FIREBASE_DEPLOY_KEY_PRODUCTION | All        |
| FIREBASE_DEPLOY_KEY_STAGING    | All        |
| PUBLIC_URL                     | All        |
| PUBLIC_URL                     | production |
| REACT_APP_API_KEY              | All        |
| REACT_APP_API_KEY              | production |
| REACT_APP_APP_ID               | All        |
| REACT_APP_APP_ID               | production |
| REACT_APP_AUTH_DOMAIN          | All        |
| REACT_APP_AUTH_DOMAIN          | production |
| REACT_APP_DATABASE_URL         | All        |
| REACT_APP_DATABASE_URL         | production |
| REACT_APP_MESSAGING_SENDER_ID  | All        |
| REACT_APP_MESSAGING_SENDER_ID  | production |
| REACT_APP_PROJECT_ID           | All        |
| REACT_APP_PROJECT_ID           | production |
| REACT_APP_STORAGE_BUCKET       | All        |
| REACT_APP_STORAGE_BUCKET       | production |
-----------------------------------------------

Some considerations: Each variable must be of type Variable, State and Mask must be set to false. Each variable must be have at least the scope All (that is the default scope) to work. These values usually are the correspondant to the staging Firebase project. The production scope values are the values correspondant to the production Firebase project. Note that PUBLIC_URL shuold ends with /. The tokens was generated on previous past, so here it is where we need to use.

How the workflow works

Now we have all piece in their place, so these is how we will work.

On your local repository, create a branch, and code.
When your code is ready to merge, upload your branch to remote

git push origin <branch-name>

Go to Gitlab.com and do a pull request to master . 4. Once the multiple steps finish, the code will be merged into master . After that, the test will be passed again. This step is automatic.

Deploy to staging / production

Do a pull request from master to staging / production . 2. Once the merge is succeful, another workflow starts ending on a deploy.

Conclusions

Now you have a production environment and a development environment with React, TypeScript, Jest, Enzyme and Firebase like backend for a complete PWA. You can add more environment if you need.

If you have any doubt, please post on comments.

Build instagram with React, TypeScript and Firebase. Part: 1

Francisco Martin — Fri, 27 Dec 2019 19:39:51 +0000

The full code is available here https://github.com/FranciscoJavierMartin/firegram . Disclaimer: The code may not the same that the showed in the article.

Description

Yet Another Instagram Clone. This project is made with the purpose to teach you how to use React, Firebase, integrate with TypeScript and other cool tools that I discover around my learning journey.

Where can I start?

For this project you may start from this point https://dev.to/franciscojaviermartin/setup-your-react-project-with-ci-cd-with-firebase-and-gitlab-1nce, setup a project from scratch or use create-react-app and a project in firebase. That all you need.

Packages installation

The package required are:

dotenv
firebase
node-sass (if you prefer use another thing to style, feel free to use)

Prerequisites

I suppose that you know at least the basics of React and JavaScript. TypeScript is only JavaScript with types, but you can use raw JavaScript if you feel more comfortable. Only ignore the types and interfaces parts.

Let's start to code

Create a .env file at the client folder and fill with your own values provides by firebase

REACT_APP_API_KEY=
REACT_APP_AUTH_DOMAIN=
REACT_APP_DATABASE_URL=
REACT_APP_PROJECT_ID=
REACT_APP_STORAGE_BUCKET=
REACT_APP_MESSAGING_SENDER_ID=
REACT_APP_APP_ID=

All properties must start with REACT_APP_ in order to work for create react app.