Recently I've been commissioned to build a lawyer's website, to which I decided to develop using Gatsby for its Static Site Generation capability and its GraphQL API. As it is a business site, it needed to be translated to several languages - that's where I met trouble.

At this point, I had a Layout component that I was using in every page component as a Wrapper, that was being rerendered every time the user navigated to another page. This caused some visual glitches, more specifically on some animations of the mobile navigation bar (a child of the Layout component).

const IndexPage = () => {
  return (
    <Layout>
      // Other stuff here
    </Layout>
  );
}

Gatsby provides certain APIs to customize building a site. I became interested in wrapPageElement, which is a function available in both Server Rendering and Browser APIs. This function lets you wrap pages in a component of your choice - in my case, it let me wrap my pages in the Layout component. But, of course, things are never this easy.

// gatsby-ssr.js and gatsby-browser.js
const React = require('react');
const Layout = require('./src/components/Layout').default;

exports.wrapPageElement = ({ element }) => {
  return <Layout>{element}</Layout>
};

This site I'm building uses gatsby-plugin-react-i18next to "easily translate your Gatsby website into multiple languages" (oh, the irony). As soon as I wrapped my pages that way, I lost the translations in the Layout component and its children, and started getting this error: warn react-i18next:: You will need to pass in an i18next instance by using initReactI18next.

I started investigating, first with some logs here and there. I noticed that the element that I was receiving as the element in wrapPageElement was of type I18nextProvider, and that piqued my interest. I went to look at this plugin's source code and discovered it has an implementation of wrapPageElement which returns wraps pages inside an i18next Context and respective provider.

const withI18next = (i18n: I18n, context: I18NextContext) => (children: any) => {
  return (
    <I18nextProvider i18n={i18n}>
      <I18nextContext.Provider value={context}>
      	{children} // Page element here
      </I18nextContext.Provider>
    </I18nextProvider>
  );
};

export const wrapPageElement = (
  {element, props}: WrapPageElementBrowserArgs<any, PageContext>,
  ...otherArgs
 ) => {
  // i18next magic...
  return withI18next(i18n, context)(element);
}

Now, I know why Layout and its children had lost their translations: they weren't able to access the Context provided by the plugin. The solution for this was clear to me then: I had to put my pages inside the Context instead of wrapping the Context in my pages!

// gatsby-ssr.js and gatsby-browser.js
const React = require('react');
const Layout = require('./src/components/Layout').default;

exports.wrapPageElement = ({ element }) => {
  const newElement = React.cloneElement(
    element,  // I18nextProvider
    element.props,
    React.cloneElement(
      element.props.children,  // I18nextContext.Provider
      element.props.children.props,
      React.createElement(
        Layout,
        undefined,
        element.props.children.props.children,
      ),
    ),
  );

  return newElement;
};

As a final note, do not forget that you have to use the wrapPageElement in both SSR and Browser APIs to achieve the same result server and client-side!

I have been using Chakra UI in a personal project. So far, I'm liking the library a lot since it has many similarities with Tailwind CSS. However, I found out that there is no property for making the Drawer component always open. After some searching, I discovered a solution.

To introduce the issue, the drawer is wrapped by a container div, which occupies the whole screen, blocking all click events to the underlying elements.

GitHub user jasonwarta came up with a workaround that works by extending Chakra's default theme. Note that I have done some minor changes to their code.

First, we extend the Drawer component using the function extendTheme, creating a variant with the desired behavior - I called it permanent. This solution basically lets the pointer events go through the drawer's container, using the CSS property pointer-events.

// theme.ts
import { extendTheme } from '@chakra-ui/react';

const theme = extendTheme({
  components: {
    Drawer: {
      variants: {
        permanent: {
          dialog: {
            pointerEvents: 'auto',
          },
          dialogContainer: {
            pointerEvents: 'none',
          },
        },
      },
    },
  },
});

export default theme;

Then, we configure the ChakraProvider to use the created theme.

import { ChakraProvider } from '@chakra-ui/react';

<ChakraProvider theme={theme}>
  // ...
</ChakraProvider>

At last, just pass the new variant as a property to your Drawer component.

const MyComponent = ({ children }) => {
  return (
    <Drawer variant="permanent">
      <DrawerContent>
        <DrawerHeader borderBottomWidth="1px">Drawer Header</DrawerHeader>
        <DrawerBody>Drawer Body</DrawerBody>
      </DrawerContent>
    </Drawer>
  );
};

In a similar way, I created another solution, although I haven't tested it thoroughly yet. Instead of working with pointer-events, I just set the width of the container to zero.  

// theme.ts
import { extendTheme } from '@chakra-ui/react';

const theme = extendTheme({
  components: {
    Drawer: {
      variants: {
        permanent: {
          dialogContainer: {
            width: 0,
          },
        },
      },
    },
  },
});

export default theme;

If you find this post helpful, do not forget to give a thumbs up to the original solution!

I wanted to experiment on SSR with NextJS for a while, and creating a simple blog is a common sample project. As such, cloning my blog was a no-brainer.

The project can be cloned from the GitHub repository below.

andremonteiro95/nextjs-blog

Contribute to andremonteiro95/nextjs-blog development by creating an account on GitHub.

GitHubandremonteiro95

The blog consists of two main pages: the home page, which presents the latest 5 posts, and the post page that shows the post's content to the reader. The front page features pagination so the user can navigate through the blog's archive. The post page features a comment section - with nested comments! - for each post.

I tried to minimize the packages installed. In the front-end, I used both SCSS and styled-components for styling, and React Hook Form to handle the comment form. For the API, I used JSON Server - a package that creates a REST API from a JSON file.

To run the app, you just need to execute npm run api and npm run dev concurrently. I also decided to develop some unit tests using Jest and Testing Library. They can be run using npm run test.

Let me read what your thoughts are, and where and how I can improve.

As a software developer, I create a lot of new projects that I end up dropping, and sometimes I feel that configuring a new project is a hassle and makes me lose interest. That happened to me with React as there are several libraries I install and configure whenever I create a new app, namely TypeScript, CRACO, ESLint, Prettier, Sass and Tailwind CSS. To solve this issue, I created a list of steps to set up a new React project with the help of create-react-app, which led me to a template repository I can reuse to kickstart a workspace.

andremonteiro95/react-template

Contribute to andremonteiro95/react-template development by creating an account on GitHub.

GitHubandremonteiro95

Creating a new React app

First steps first, let's create a new React app through create-react-app. Notice that I set the template flag to the TypeScript template; you can use any other template, or omit the flag to install the default JavaScript template.

# npm <= 6
npx create-react-app react-template --template typescript
# npm >= 7
npm exec -- create-react-app react-template --template typescript

Install CRACO

CRACO, or Create React App Configuration Override, is "an easy and comprehensible configuration layer for create-react-app". We will use this utility to configure ESLint and PostCSS, the latter to be able to use Tailwind CSS. Just install it using npm.

npm install @craco/craco

Following CRACO's instructions, "update the existing calls to react-scripts in the scripts section of your package.json file to use the craco CLI":

/* package.json */

"scripts": {
-   "start": "react-scripts start",
+   "start": "craco start",
-   "build": "react-scripts build",
+   "build": "craco build"
-   "test": "react-scripts test",
+   "test": "craco test"
}

Let's create a CRACO config file, craco.config.js. It will be empty for now, we will soon add to it.

// craco.config.js

module.exports = {};

Adding ESLint rules

React projects created through create-react-app come with an ESLint configuration by default. However, I think it is not enough as I am a fan of opinionated environments (that's one of the reasons I like Angular and NestJS).

One of the most famous set of rules for React development is the Airbnb configuration which enforces Airbnb's JavaScript style guide. There is a community package that brings TypeScript support to this configuration: eslint-config-airbnb-typescript. Start by installing it as a dev dependency.

npm install eslint-config-airbnb-typescript --save-dev

Then, we have to install some plugins for it to work. There is a limitation with ESLint, see RFC and progress for more information.

npm install eslint-plugin-import@^2.22.0 eslint-plugin-jsx-a11y@^6.3.1 eslint-plugin-react@^7.20.3 eslint-plugin-react-hooks@^4.0.8 @typescript-eslint/eslint-plugin@^4.4.1 --save-dev

If you are having issues installing it using npm >= 7 because of npm not being able to resolve the dependency tree, just add the flag --legacy-peer-deps to the command - it will ensure the peer dependencies are not installed automatically.

Now, create an ESLint configuration file, .eslintrc.js, and add the following content to it:

// .eslintrc.js

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'plugin:react/recommended',
    'airbnb-typescript',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    project: './tsconfig.json',
    sourceType: 'module',
  },
  plugins: ['react', '@typescript-eslint']
};

Let's not forget to point the CRACO configuration file to our ESLint configuration file.

// craco.config.js

const { ESLINT_MODES } = require('@craco/craco');

module.exports = {
  eslint: {
    mode: ESLINT_MODES.file,
  },
};

Turn your code pretty with Prettier

I can't state enough how much I love Prettier and its Visual Studio Code extension. I have the "Format on Save" option on all the time, and with the help of Prettier I always have my code perfectly organized.

Install the following dependencies in your app.

npm i prettier eslint-config-prettier eslint-plugin-prettier --save-dev

Extend your ESLint configuration with the installed configuration and plugin. Add also a custom rule to show errors if Prettier rules are not followed.

// .eslintrc.js

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'plugin:react/recommended',
    'airbnb-typescript',
+   'prettier',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    project: './tsconfig.json',
    sourceType: 'module',
  },
- plugins: ['react', '@typescript-eslint'],
+ plugins: ['react', '@typescript-eslint', 'prettier'],
+ rules: {
+   'prettier/prettier': 'error',
+ },
};

If you wish, create also a .prettierrc file to configure Prettier in VS Code. This is my default configuration:

{
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all"
}

It's possible that you find some Prettier errors after this step - just fix them accordingly!

Style your app with Tailwind CSS

Tailwind CSS is a marvel for styling your apps. While most CSS frameworks are component based (e.g. Bootstrap, Bulma), Tailwind CSS is an utility-first framework, with classes for practically everything - text colors, layouts, animations, etc.

Begin by installing the required packages. As of this writing, create-react-app still uses PostCSS 7, but Tailwind CSS 2 requires PostCSS 8. As such, we have to install the compatibility build of Tailwind CSS.

npm i tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat autoprefixer@^9

After installing, override the default React PostCSS config with the help of CRACO:

// craco.config.js

  const { ESLINT_MODES } = require('@craco/craco');
+ const autoprefixer = require('autoprefixer');
+ const tailwind = require('tailwindcss');

  module.exports = {
    eslint: {
      mode: ESLINT_MODES.file,
    },
+   style: {
+     postcss: {
+       plugins: [autoprefixer, tailwind],
+     },
+   },
  };

Now, we need to configure Tailwind CSS to remove unused styles in production so it does not create an oversized bundle. Create a tailwind.config.js file in the root of your project and add the following code:

// tailwind.config.js

module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
};

Finally, include Tailwind in your main CSS file.

// src/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Check if it is working by changing any class name in your app. I added text-red-400 as the class name to the default paragraph in App.tsx.

Power up your CSS with Sass

There's a habit I kept from all the time I spent working with Angular, which is using SCSS for styling my apps. It is a mix of the powerful features from Sass and the known CSS syntax, which makes it easy to learn and use.

Install the sass package in your project, and you can start changing your CSS files to SCSS or Sass files! Also, do not forget to change the imports in your .tsx/.jsx files.

npm i sass

Final thoughts

It can be tiresome to configure a new React project, more so if it is the first time since some research is required for some problems that may occur. With the template I created through these steps, I want to minimize the hassle of creating new React apps.

If you have any suggestions or questions, please feel free to open an issue in the linked repository.

While working on an application, I found some modals were duplicated because they could be shown in different parts of it. Also, there was an instance of the modal component for each modal, instead of reusing the same. I came up with a modal system that centralizes the management using Redux to solve these issues.

This tutorial explains how to build a simple, centralized modal component using React and Redux.

If you don't want to follow the tutorial, you can just check the GitHub repository below.

andremonteiro95/react-redux-modal

Contribute to andremonteiro95/react-redux-modal development by creating an account on GitHub.

GitHubandremonteiro95

Setting up the project

Let's create a new React project using Create React App. It creates a new React project with TypeScript support; if you don't want to develop in TypeScript, go ahead and remove the template flag.

npx create-react-app react-redux-modal --template typescript

I use TypeScript for all my projects because I find many advantages in it, such as finding errors in build time (which leads to higher code quality), and better usability in the development environment (type hinting, code completion, etc.). If you are not acquainted with TypeScript in React projects, the React + TypeScript Cheatsheets may be useful to you.

Creating the modal component

First, let's change the styling of the default content a little. I want my modal to add an overlay to the page so it's more apparent that an action is due, which will not work as good if I keep the default dark background. Open App.css and change the following properties of App-header class.

.App-header {
  background-color: #ffffff;
  // ...
  color: #202020;
}

Your app should look like the screenshot below.

Now it is time to build our modal component. Create a components directory, and a Modal.tsx file inside it. For now, we won't care about the modal itself, we will just declare a simple component with some placeholder text.

import React from 'react';

function Modal() {
  return <span>This is my new modal!</span>;
}

export default Modal;

Since the purpose is to create a centralized modal, add your modal to the root of your project - in this case, the App component in App.tsx.

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Modal from './components/Modal';

function App() {
  return (
    <>
      <Modal />
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.tsx</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    </>
  );
}

export default App;

In the top of your page should now appear the phrase "This is my new modal!". Create a div for the modal overlay, and another div inside for the modal itself. Then, create a new Modal.css stylesheet to include our new containers' styles.

import React from 'react';
import './Modal.css';

function Modal() {
  return (
    <div className="modal-overlay">
      <div className="modal">This is my new modal!</div>
    </div>
  );
}

export default Modal;

.modal-overlay {
  position: absolute;
  z-index: 9;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal {
  background-color: #ffffff;
  border: 1px solid #bebebe;
  border-radius: 2px;
  padding: 12px 16px;
}

Feel free to choose your own approach for styling the components, I'm using stylesheet files just for demonstration purposes.

After these changes, our app should look like this:

Right now, there is no way to close or open the modal, it simply opens as soon as we refresh the page.  We will add a button to the modal for it to close when clicked.

import React from 'react';
import './Modal.css';

type ModalProps = {
  onCloseButtonClick: () => void;
};

function Modal(props: ModalProps) {
  const { onCloseButtonClick } = props;
  return (
    <div className="modal-overlay">
      <div className="modal">
        <span className="modal-close" onClick={onCloseButtonClick}>
          &#10005; {/* HTML code for a multiplication sign */}
        </span>
        This is my new modal!
      </div>
    </div>
  );
}

export default Modal;

.modal-overlay {
  position: absolute;
  z-index: 9;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal {
  background-color: #ffffff;
  border: 1px solid #bebebe;
  border-radius: 2px;
  padding: 12px 16px;
  position: relative;
  height: 200px;
  width: 350px;
}

.modal-close {
  position: absolute;
  right: 8px;
  top: 4px;
  font-size: 24px;
  cursor: pointer;
}

Add a variable to the App component's state so we can show and hide the modal, and replace the default content with a button to show the modal. I also added some global button styles to index.css.

import React, { useState } from 'react';
import logo from './logo.svg';
import './App.css';
import Modal from './components/Modal';

function App() {
  const [showModal, setShowModal] = useState(false);

  return (
    <>
      {showModal && (
        <Modal
          onCloseButtonClick={() => {
            setShowModal(false);
          }}
        />
      )}
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <button
            onClick={() => {
              setShowModal(true);
            }}
          >
            Show Modal
          </button>
        </header>
      </div>
    </>
  );
}

export default App;

button {
  font-size: 18px;
  padding: 8px;
}

Note that we are using React hooks for the component state. When we click the button in the App component, we set the state variable showModal to true. When clicking the modal's close button, an event is triggered and passed to App through the Modal's properties, and then a function is called which sets showModal to false. The conditional rendering of Modal makes sure that the modal is only shown when showModal is truthy.

Managing the modal through Redux

In the last section we implemented a way to show the dialog from the App component, but what we wish to achieve is a way to show the dialog from any component. It would be unmaintainable to pass a function to show the modal from App to every child component of it, so we need another method to do it.

Redux centralizes the application state and logic in a global store, thus allowing us to centralize the dialog state and logic. We can dispatch actions to update the store and have components react to its changes. The Redux official documentation recommends the installation of the Redux Toolkit. We'll install react-redux also for the components.

npm install @reduxjs/toolkit react-redux
npm i --save-dev @types/react-redux

We'll start by building some actions. Create a store/actions.ts file that will hold the actions and their respective action types.

export enum ModalActionTypes {
  ShowModal,
  HideModal,
}

export interface ModalAction {
  type: ModalActionTypes;
  payload?: any;
}

export function showModal(): ModalAction {
  return {
    type: ModalActionTypes.ShowModal,
  };
}

export function hideModal(): ModalAction {
  return {
    type: ModalActionTypes.HideModal,
  };
}

Redux's documentation shows a different way of type checking actions and action creators from mine. I would say this way leverages TypeScript capabilities, but feel free to choose whatever version you like more.

For now, these actions won't be sending any payload since all we want to do is show and hide the modal. Now, create a file for our reducer, reducers.ts, under the store directory.

import { combineReducers } from '@reduxjs/toolkit';
import { ModalAction, ModalActionTypes } from './actions';

const initialState = {
  modal: false,
};

function modalReducer(state = initialState, action: ModalAction) {
  switch (action.type) {
    case ModalActionTypes.ShowModal:
      return {
        ...state,
        modal: true,
      };
    case ModalActionTypes.HideModal:
      return {
        ...state,
        modal: false,
      };
    default:
      return state;
  }
}

const rootReducer = combineReducers({ modal: modalReducer });
export type RootState = ReturnType<typeof rootReducer>;
export default rootReducer;

A Redux app only has one reducer function, the root reducer, which will handle all dispatched actions. Although, we can split this reducer in many reducers and combine them using combineReducers to get a root reducer. This root reducer is then used on the store creation, which we will do in store/store.ts.

import { createStore } from '@reduxjs/toolkit';
import rootReducer from './reducers';

const store = createStore(rootReducer);
export default store;

At last, we link Redux to our app's UI. First, wrap the application in a Provider. I chose to do so in index.tsx.

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import './index.css';
import App from './App';
import store from './store/store';

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root'),
);

Let's set the button in App.tsx to dispatch an action to show the modal.

import React from 'react';
import { connect, ConnectedProps } from 'react-redux';
import logo from './logo.svg';
import './App.css';
import Modal from './components/Modal';
import { showModal } from './store/actions';

const mapDispatchToProps = {
  dispatchShowModal: showModal,
};

const connector = connect(undefined, mapDispatchToProps);

type AppProps = {} & ConnectedProps<typeof connector>;

function App(props: AppProps) {
  const { dispatchShowModal } = props;

  return (
    <>
      <Modal />
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <button
            onClick={() => {
              dispatchShowModal();
            }}
          >
            Show Modal
          </button>
        </header>
      </div>
    </>
  );
}

export default connector(App);

Don't worry if your app doesn't compile after removing onCloseButtonClick from the modal's properties, we will remove it from there soon enough.

Let's now link up the Modal component to our Redux store.

import React from 'react';
import { connect, ConnectedProps } from 'react-redux';
import { hideModal } from '../store/actions';
import { RootState } from '../store/reducers';
import './Modal.css';

const mapStateToProps = (state: RootState) => ({
  modal: state.modal.modal,
});

const mapDispatchToProps = {
  dispatchHideModal: hideModal,
};

const connector = connect(mapStateToProps, mapDispatchToProps);

type ModalProps = {} & ConnectedProps<typeof connector>;

function Modal(props: ModalProps) {
  const { dispatchHideModal, modal } = props;

  if (!modal) {
    return null;
  }

  const onCloseButtonClick = () => {
    dispatchHideModal();
  };

  return (
    <div className="modal-overlay">
      <div className="modal">
        <span className="modal-close" onClick={onCloseButtonClick}>
          &#10005; {/* HTML code for a multiplication sign */}
        </span>
        This is my new modal!
      </div>
    </div>
  );
}

export default connector(Modal);

Now, your app should work just as fine as before, without relying on App's state! To recap, we now use dispatchShowModal to show the modal and dispatchHideModal to hide it, and those functions can be used wherever in the app as long as the component is connected to Redux.

Creating dynamic modals

Our modal only has a single sentence, but we want it to have more information. More than that, we wish that we could specify the information dynamically.

Right now, the modal state in Redux is a simple boolean that specifies if it is shown or not. We will change it so it accepts an object instead - this object will contain our modal's information, such as title and description.

Let's start by defining an interface for the modal's properties in interfaces/modal-properties.ts. For now, a title and a description are enough - later we will add buttons to it.

interface ModalProperties {
  title: string;
  description: string;
}
export default ModalProperties;

Since the modal state will now be an object of type ModalProperties, we must change the state of our store to reflect it. Set the modal property to null - the intended logic is to show a modal if the state is not null - and define a type for the state in reducers.ts. We also change the reducer to set the modal to null when a hide modal action is dispatched, and set the modal to one with placeholder title and description when a show modal action is dispatched.

import { combineReducers } from '@reduxjs/toolkit';
import ModalProperties from '../interfaces/modal-properties';
import { ModalAction, ModalActionTypes } from './actions';

type ModalState = {
  modal: ModalProperties | null | undefined;
};

const initialState: ModalState = {
  modal: null,
};

function modalReducer(state = initialState, action: ModalAction): ModalState {
  switch (action.type) {
    case ModalActionTypes.ShowModal:
      return {
        ...state,
        modal: {
          title: 'Hello world!',
          description: 'This is a description.',
        },
      };
    case ModalActionTypes.HideModal:
      return {
        ...state,
        modal: null,
      };
    default:
      return state;
  }
}

const rootReducer = combineReducers({ modal: modalReducer });
export type RootState = ReturnType<typeof rootReducer>;
export default rootReducer;

Change your Modal component to display the title and description.

function Modal(props: ModalProps) {
  const { dispatchHideModal, modal } = props;

  if (!modal) {
    return null;
  }

  const onCloseButtonClick = () => {
    dispatchHideModal();
  };

  return (
    <div className="modal-overlay">
      <div className="modal">
        <span className="modal-close" onClick={onCloseButtonClick}>
          &#10005; {/* HTML code for a multiplication sign */}
        </span>
        <h1>{modal.title}</h1>
        <p>{modal.description}</p>
      </div>
    </div>
  );
}

Your app should now display the modal's title and description from Redux when you click in the "Show Modal" button.

The modal isn't totally dynamic yet: we still need to somehow pass the title and description to the store. So, we go to our actions.ts and change the showModal action creator. We can also change the payload type in ModalAction to the previously created interface.

export interface ModalAction {
  type: ModalActionTypes;
  payload?: ModalProperties;
}

export function showModal(payload: ModalProperties): ModalAction {
  return {
    type: ModalActionTypes.ShowModal,
    payload,
  };
}

Go back to your reducer and change the static properties for the action payload.

function modalReducer(state = initialState, action: ModalAction): ModalState {
  switch (action.type) {
    case ModalActionTypes.ShowModal:
      return {
        ...state,
        modal: action.payload,
      };
    case ModalActionTypes.HideModal:
      return {
        ...state,
        modal: null,
      };
    default:
      return state;
  }
}

Pass now some properties to dispatchShowDialog in your App.tsx.

function App(props: AppProps) {
  const { dispatchShowModal } = props;

  return (
    <>
      <Modal />
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <button
            onClick={() => {
              dispatchShowModal({
                title: 'A new title.',
                description: 'And a new description too.',
              });
            }}
          >
            Show Modal
          </button>
        </header>
      </div>
    </>
  );
}

Adding functionality to the modal

Usually, modals or dialogs have buttons to achieve some effect, for instance to confirm some action. We will add a button to our modal which will open an alert in the browser, just for illustration purposes.

First, let's check what type of event is fired when the button is clicked. IntelliSense tells me it's of type React.MouseEvent<HTMLButtonElement, MouseEvent>. Let's add a new property to our ModalProperties that will specify the behavior of the button when clicked, with an event of the correct type as a parameter. We will keep it generic, although if you find that you need some specific property you can specify HTMLButtonElement in the type.

import React from 'react';
interface ModalProperties {
  title: string;
  description: string;
  onButtonClick: (event: React.MouseEvent) => void;
}

Now, add a button to the modal and link up this new property to the button's onClick event.

function Modal(props: ModalProps) {
  const { dispatchHideModal, modal } = props;

  if (!modal) {
    return null;
  }

  const onCloseButtonClick = () => {
    dispatchHideModal();
  };

  return (
    <div className="modal-overlay">
      <div className="modal">
        <span className="modal-close" onClick={onCloseButtonClick}>
          &#10005; {/* HTML code for a multiplication sign */}
        </span>
        <h1>{modal.title}</h1>
        <p>{modal.description}</p>
        <button type="button" onClick={modal.onButtonClick}>
          Do something
        </button>
      </div>
    </div>
  );
}

All that's left to do is set the behavior of that button in the modal properties when we dispatch the action to show the modal in the App component!

function App(props: AppProps) {
  const { dispatchShowModal } = props;

  return (
    <>
      <Modal />
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <button
            onClick={() => {
              dispatchShowModal({
                title: 'A new title.',
                description: 'And a new description too.',
                onButtonClick: (event: React.MouseEvent) => {
                  alert('You clicked that button!');
                },
              });
            }}
          >
            Show Modal
          </button>
        </header>
      </div>
    </>
  );
}

Click that button now! You should see an alert window with the sentence "You clicked that button!".

Final thoughts

I've used polished, thoroughly tested versions of this approach in applications that are in production. For instance, to improve code reusability and maintainability I created a "library" of sorts that holds all modal definitions (like a list of items of type ModalProperties) so that when I want to change a modal that is reused in several places I only need to edit a single item.

Another way you can improve on this mechanic is to implement a stack of modals so that you don't lose a modal that is being shown in case another pops up.

The usage of TypeScript shown in this tutorial may be biased, and there may be better ways to type check Redux, so take it with a grain of salt.

With more than 400.000 weekly downloads, ngx-translate might just be the most used internationalization library for Angular. It works out-of-the-box wonderfully on the client-side, however, it needs some tweaks to work with Angular Universal's SSR.

NGX-Translate is an internationalization library for Angular. It lets you define translations for your content in different languages and switch between them easily.
- NGX-Translate: The i18n library for Angular 2+

If you're not familiar with the library, I suggest reading their documentation on GitHub.

The issue with SSR

The library provides a simple way to load the translation files on the client-side through their HTTP loader. However, it does not work too well with the SSR solution the Angular team provides: Angular Universal.

In a previous post, Caching server-side requests - Angular Universal, I described an issue similar to the one that occurs when using ngx-translate. When using Angular Universal, I noticed that the content would "blink" because duplicate requests were being made, once on the server-side, and then again on the client-side.

The issue with ngx-translate is also related to the request of translation files. The files could not be retrieved over HTTP on the server-side, and as such the page would first appear in the browser with the translation keys, and only after the client receives the translations the translation keys would change to the actual translations.

Loading the translation files on the server-side

We need the translation files on the server-side. Working on the server-side, we can get the files through the file system.

First, I created a custom loader, translate-server.loader.ts, for the server module. It uses TransferState in order to later retrieve the translations on the client-side.

// shared/loaders/translate-server.loader.ts
import { join } from 'path';
import { Observable } from 'rxjs';
import { TranslateLoader } from '@ngx-translate/core';
import {
  makeStateKey,
  StateKey,
  TransferState
} from '@angular/platform-browser';
import * as fs from 'fs';

export class TranslateServerLoader implements TranslateLoader {
  constructor(
    private transferState: TransferState,
    private prefix: string = 'i18n',
    private suffix: string = '.json'
  ) {}

  public getTranslation(lang: string): Observable<any> {
    return new Observable((observer) => {
      const assets_folder = join(
        process.cwd(),
        'dist',
        'project-name', // Your project name here
        'browser',
        'assets',
        this.prefix
      );

      const jsonData = JSON.parse(
        fs.readFileSync(`${assets_folder}/${lang}${this.suffix}`, 'utf8')
      );

      // Here we save the translations in the transfer-state
      const key: StateKey<number> = makeStateKey<number>(
        'transfer-translate-' + lang
      );
      this.transferState.set(key, jsonData);

      observer.next(jsonData);
      observer.complete();
    });
  }
}

export function translateServerLoaderFactory(transferState: TransferState) {
  return new TranslateServerLoader(transferState);
}

Then, I set the TranslateModule's settings on the app.server.module.ts.

// app.server.module.ts
import { NgModule } from '@angular/core';
import {
  ServerModule,
  ServerTransferStateModule
} from '@angular/platform-server';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { translateServerLoaderFactory } from './shared/loaders/translate-server.loader';
import { TransferState } from '@angular/platform-browser';

@NgModule({
  imports: [
    AppModule,
    ServerModule,
    ServerTransferStateModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: translateServerLoaderFactory,
        deps: [TransferState]
      }
    })
  ],
  bootstrap: [AppComponent]
})
export class AppServerModule {}

To take advantage of loading the translation files on the server-side, I created another loader, translate-browser.loader.ts, to fetch the previously loaded data from TransferState. If it does not find the translations in the cache, it uses the HTTP loader to get them.

// shared/loaders/translate-browser.loader.ts
import { Observable } from 'rxjs';
import { TranslateLoader } from '@ngx-translate/core';

import {
  makeStateKey,
  StateKey,
  TransferState
} from '@angular/platform-browser';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpClient } from '@angular/common/http';

export class TranslateBrowserLoader implements TranslateLoader {
  constructor(private http: HttpClient, private transferState: TransferState) {}

  public getTranslation(lang: string): Observable<any> {
    const key: StateKey<number> = makeStateKey<number>(
      'transfer-translate-' + lang
    );
    const data = this.transferState.get(key, null);

    // First we are looking for the translations in transfer-state, 
	// if none found, http load as fallback
    if (data) {
      return new Observable((observer) => {
        observer.next(data);
        observer.complete();
      });
    } else {
      return new TranslateHttpLoader(this.http).getTranslation(lang);
    }
  }
}

export function translateBrowserLoaderFactory(
  httpClient: HttpClient,
  transferState: TransferState
) {
  return new TranslateBrowserLoader(httpClient, transferState);
}

Finally, declare it in your app.module.ts.

// app.module.ts
import { BrowserModule, TransferState } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClient, HttpClientModule } from '@angular/common/http';

import { TransferHttpCacheModule } from '@nguniversal/common';
import { translateBrowserLoaderFactory } from './shared/loaders/translate-browser.loader';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule.withServerTransition({ appId: 'serverApp' }),
    TransferHttpCacheModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: translateBrowserLoaderFactory,
        deps: [HttpClient, TransferState]
      }
    }),
    AppRoutingModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Final thoughts

It may be helpful to load the translations on the server-side, if working with SSR, to deliver a page with the correct content faster. It is way more elegant to show the page with its true information instead of with the translation keys, even for a split second.

If you are rendering your SPA using Angular Universal you may have noticed a common issue with the page loading: the content "blinks" and loads again. This behavior may occur due to duplicate requests being made, once in the server, and then in the client. Angular Universal provides a module called TransferHttpCacheModule to tackle this problem by caching requests made while rendering the page on the server-side.

Prerequisites

Before starting, add Angular Universal to an existing Angular project by running the following schematic.

ng add @nguniversal/express-engine

I won't delve further into this topic. For an Angular Universal's beginners guide please refer to Server-side rendering (SSR) with Angular Universal.

Setting up caching

Setting up server-side caching is pretty easy. All you have to do is add TransferHttpCacheModule to your app.module.ts, and ServerTransferStateModule to your app.server.module.ts.

// app.module.ts
import { TransferHttpCacheModule } from '@nguniversal/common';

@NgModule({
  imports: [
    (...)
    TransferHttpCacheModule
  ]
})
export class AppModule {}

// app.server.module.ts
import { ServerTransferStateModule } from '@angular/platform-server';

@NgModule({
  imports: [
    (...)
    ServerTransferStateModule
  ]
})
export class AppServerModule {}

After adding these, you will see that the requests done in the server while the page is being rendered will not be duplicated in the browser.

How it works

TransferHttpCacheModule provides a HTTP interceptor that uses the TransferState from @angular/platform-browser. TransferState is "a key value store that is transferred from the application on the server side to the application on the client side", according to Angular's documentation.

First, when intercepting a request, it checks the cache (key value store) to see if that specific request has been made. This may branch into two different behaviors whether the request has been cached or not.

If the request key is found in the key value store, it will handle the request by returning the cached response.

if (this.transferState.hasKey(storeKey)) {
  // Request found in cache. Respond using it.
  const response = this.transferState.get(storeKey, {} as TransferHttpResponse);

  return observableOf(new HttpResponse<any>({
    body: response.body,
    headers: new HttpHeaders(response.headers),
    status: response.status,
    statusText: response.statusText,
    url: response.url,
  }));
}

If the request key is not found in the cache, it proceeds with the original request and sets a key-value pair to the TransferState cache with the response.

else {
  // Request not found in cache. Make the request and cache it.
  const httpEvent = next.handle(req);

  return httpEvent
    .pipe(
      tap((event: HttpEvent<unknown>) => {
        if (event instanceof HttpResponse) {
          this.transferState.set(storeKey, {
            body: event.body,
            headers: getHeadersMap(event.headers),
            status: event.status,
            statusText: event.statusText,
            url: event.url || '',
          });
        }
      })
    );
}

Handling relative path requests

You may run into issues when using relative paths in requests on the server-side. You can use a HTTP interceptor in this case to transform your relative paths to absolute paths.

import {
  HttpInterceptor,
  HttpRequest,
  HttpHandler,
  HttpEvent
} from '@angular/common/http';
import { Observable } from 'rxjs';
import { Inject, Injectable } from '@angular/core';
import { REQUEST } from '@nguniversal/express-engine/tokens';
import { Request } from 'express';

function isAbsoluteUrl(url: string) {
  return url.startsWith('http') || url.startsWith('//');
}

@Injectable()
export class ServerStateInterceptor implements HttpInterceptor {
  constructor(@Inject(REQUEST) private request: Request) {}

  intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    if (this.request && !isAbsoluteUrl(req.url)) {
      const protocolHost = `${this.request.protocol}://${this.request.get(
        'host'
      )}`;

      const pathSeparator = !req.url.startsWith('/') ? '/' : '';
      const url = protocolHost + pathSeparator + req.url;
      const serverRequest = req.clone({ url });

      return next.handle(serverRequest);
    }

    return next.handle(req);
  }
}

This interceptor works explicitly with the Express engine, so if you are using another engine you will have to adapt it.

Final thoughts

Angular provides out-of-the-box features to easily tackle the duplicate requests issue, with none to minimal configuration from the developer.

I found some other issues working with Angular Universal and third-party packages, so I will be writing about these in the near future.

Sources:

• Server-side rendering (SSR) with Angular Universal
• TransferHttpCacheModule @ GitHub
• Angular Universal + Caching (TransferState) - ITNEXT

In this post I'll try to demystify ReactiveX's Observables, how they can be hot or cold, and how to turn one into another. By the way, it doesn't have anything to do with Katy Perry's 2008 song.

What is an Observable?

An Observable is an object that emits objects and can be subscribed by an observer (or subscriber). When an observer subscribes to an Observable, the observer must specify a reaction that will be triggered when the Observable emits a value. This behavior allows a system to have concurrent actions as it won't need to block until values are received. Observables may be hot or cold, the difference between them being that they start emitting objects at different times.

What are cold Observables?

A cold Observable waits until an observer subscribes to it to start emitting. Observables are lazy by default, meaning they only execute when an observer subscribes to it. This behavior allows an observer to observe the entire sequence of emitted values.

import { Observable, interval } from 'rxjs';

const observable$ = new Observable((observer) => {
  const interval$ = interval(1000);

  interval$.subscribe((value: number) => {
    observer.next(value);
  });
});

observable$.subscribe((value) => {
  this.logger.log('Subcription #1 - Received:', value);
});

setTimeout(() => {
  observable$.subscribe((value) => {
    this.logger.log('Subcription #2 - Received:', value);
  });
}, 2500);

// Logs
// Subcription #1 - Received: 0
// Subcription #1 - Received: 1
// Subcription #1 - Received: 2
// Subcription #2 - Received: 0
// Subcription #1 - Received: 3
// Subcription #2 - Received: 1
// Subcription #1 - Received: 4
// Subcription #2 - Received: 2

The example above illustrates the behavior of a cold Observable. Notice that the sequence of values received in the second subscription is totally independent from the first one - this is called unicasting.

What are hot Observables?

A hot Observable will start emitting as soon as it's created, and as such the values it emits are produced outside of it. A hot Observable's emitted objects are shared between its subscribers - this is called multicasting. Because of this behavior, an observer may start observing the sequence somewhere in the middle of it.

import { Observable, Subject, interval } from 'rxjs';

const subject$ = new Subject();

interval(1000).subscribe((value: number) => {
  subject$.next(value);
});

const observable$ = new Observable((observer) => {
  subject$.subscribe((value: number) => {
    observer.next(value);
  });
});

observable$.subscribe((value) => {
  this.logger.log('Subcription #1 - Received:', value);
});

setTimeout(() => {
  observable$.subscribe((value) => {
    this.logger.log('Subcription #2 - Received:', value);
  });
}, 2500);

// Logs
// Subcription #1 - Received: 0
// Subcription #1 - Received: 1
// Subcription #1 - Received: 2
// Subcription #2 - Received: 2
// Subcription #1 - Received: 3
// Subcription #2 - Received: 3
// Subcription #1 - Received: 4
// Subcription #2 - Received: 4

The example above illustrates the behavior of a hot Observable. Notice that the second subscription set of received values starts with "2", meaning that it started observing in the middle of the sequence.

Turning a cold Observable hot

To turn a cold Observable hot we use a special kind of Observable named Subject. Subjects work both as Observables and observers: it can subscribe to other Observables and reemit the items it observes, and also emit new objects.

createHotObservable<T>(coldObservable: Observable<T>) {
  const subject$ = new Subject();
  coldObservable.subscribe(subject$);

  // Returns teardown logic, i.e. function called when the observable is unsubscribed
  return new Observable((observer) => {
    const sub = subject$.subscribe(observer);
    
    return () => {
      sub.unsubscribe();
    };
  });
}

This method doesn't track the source subscription, which means it is possible to have a subscription open when unnecessary. For that, we'll keep a reference count for how many subscriptions there are for our hot Observable, and when that counter reaches zero unsubscribe to the source.

createHotObservable<T>(coldObservable: Observable<T>) {
  const subject$ = new Subject();
  const sourceSub = coldObservable.subscribe(subject$);
  let refCount = 0;

  return new Observable((observer) => {
    refCount++;
    const sub = subject$.subscribe(observer);

    return () => {
      refCount--;
      sub.unsubscribe();
      if (refCount === 0) {
        sourceSub.unsubscribe();
      }
    };
  });
}

Making a hot Observable cold

Let's assume there's a function websocket which creates a connection using WebSockets to an endpoint as soon as it's called and returns a hot Observable. If we wish to turn this Observable to cold, we can't call this function and pass the result to a function as we did in the previous section. Instead, we will create an Observable factory, i.e. a function that returns an Observable.

const observableFactory = () => websocket();

We can pass this factory to the method below to create a cold Observable from a hot one.

createColdObservable<T>(observableFactory: () => Observable<T>): Observable<T> {
  return new Observable((subscriber) => {
    const subscription = observableFactory().subscribe(subscriber);

    return () => {
      subscription.unsubscribe();
    };
  });
}

Using the result of this function, the (previously) hot Observable will only start emitting values when it is subscribed.

Final thoughts

ReactiveX creates a whole plethora of possibilities for asynchronous operations in a system. Observables may seem confusing and complex at first, but don't give up on them, they're worthwhile learning.

Sources:

• ReactiveX
• Learn RxJS
• Hot vs Cold Observables - Ben Lesh - Medium
• Understanding hot vs cold Observables - Luuk Gruijs - Medium

According to the State of JavaScript 2019, React, React Native and Redux can be found in the top three of most used frameworks, in their respective categories. I thought the timing is right to learn more about these frameworks, and thus improving my knowledge in JavaScript and its ecosystem.

I recommend going through React's and Redux's official documentation and following the "getting started" tutorials to get acquainted with the frameworks.

Creating a new React Native project

In this article we will be creating a simple counter application. First, make sure you have react-native installed. I decided to install its CLI globally.

npm install -g react-native

Let's create a new React Native project using its CLI. I'm using TypeScript, so I have to specify the a template. You may use JavaScript if you wish, but please notice that file extensions and some code syntax may differ.

react-native init MyCounter

# To use TypeScript:
react-native init MyCounter --template react-native-template-typescript@6.2.0

It will download the starter template, and install its dependencies. After that, you'll notice you have a file called App.tsx - this will be your application's entry point. For arrangement purposes, I created a src folder for the source code in the root of the project and moved App.tsx there, and consequently updated the import inside index.js.

import App from './src/App';

Adding React Navigation to the app

React Navigation is born from the React Native community's need for an extensible yet easy-to-use navigation solution written entirely in JavaScript (so you can read and understand all of the source), on top of powerful native primitives.

- Getting started · React Navigation

Run the following command to install React Navigation. In my case, I ran into a problem - some modules couldn't be resolved. If you find that issue, install the other packages in the excerpt below.

npm install --save react-navigation react-native-gesture-handler react-navigation-stack

# If modules cannot be resolved:
npm install --save @react-native-community/masked-view react-native-safe-area-context

I created a HomeScreen.tsx file under src/screens/home/, and I will leave it empty for now.

// src/screens/home/HomeScreen.tsx
import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';

class HomeScreen extends Component {
  render() {
    return (
      <View style={styles.container}>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
});

export default HomeScreen;

Let's get our app ready to show the home screen once it starts. For that, we create a stack navigator and an app container, and render this container as an element in App.tsx.

// src/App.tsx
import React, { Component } from 'react';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import HomeScreen from './screens/home/HomeScreen';

const MainNavigator = createStackNavigator({
  Home: { screen: HomeScreen }
});

const Navigation = createAppContainer(MainNavigator);

export default class App extends Component {
  render() {
    return (
      <Navigation />
    );
  }
}

If you run your app, it will show a blank activity with a toolbar on top that says "Home". We will add a counter to the page now, with two buttons to increment and decrement it.

// src/screens/home/HomeScreen.tsx

class HomeScreen extends Component {
  state = {
    counter: 0
  };

  increment() {
    this.setState({ counter: this.state.counter + 1 });
  }

  decrement() {
    this.setState({ counter: this.state.counter - 1 });
  }

  render() {
    const { counter } = this.state;

    return (
      <View style={styles.container}>
        <Button title="increment" onPress={() => this.increment()} />
        <Text>{counter}</Text>
        <Button title="decrement" onPress={() => this.decrement()} />
      </View>
    );
  }
}

The screen should look like this now:

Adding Redux actions and reducers

If you haven't installed Redux yet in your project, do so using the following command.

npm i --save redux react-redux

Actions are JavaScript objects that represent payloads of information that send data from your application to your Redux store.

- Introduction to Using Redux in a React Native App ← Alligator.io

We'll need an action that changes the counter. So, I created a file index.ts in src/core/store/actions/ to declare my Redux actions.

// src/core/store/actions/index.ts
export const ACTION_TYPES = { COUNTER_CHANGE: 'COUNTER_CHANGE' };

export function changeCount(count) {
  return {
    payload: count,
    type: ACTION_TYPES.COUNTER_CHANGE
  };
}

In this file I've create a constant ACTION_TYPES which will hold all the action types, and a changeCount function that receives a count parameter and returns an object with a payload and an action of the type COUNTER_CHANGE.

Now for the reducer...

A reducer is a pure function that takes the previous state and an action as arguments and returns a new state.

- Introduction to Using Redux in a React Native App ← Alligator.io

Let's now create a file for our reducer, index.ts, inside the folder src/core/store/reducers/.

// src/core/store/reducers/index.ts
import { Reducer, combineReducers } from 'redux';
import { ACTION_TYPES } from '../actions';

const INITIAL_STATE = {
  count: 0
};

const countReducer: Reducer = (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case ACTION_TYPES.COUNTER_CHANGE:
      return { ...state, count: action.payload };
    default:
      return state;
  }
};

export default combineReducers({
  count: countReducer
});

This piece of code is pretty standard. It declares a new Reducer that receives the previous state and an action, and returns a new state, in this case overwriting the count property.

Connecting Redux to the screen

Open App.tsx and edit its render method. The Navigation element will now be nested in a Provider element. This way, every page will have access to our Redux store.

// src/App.tsx
// There is code omitted, don't delete the previous changes

import { Provider } from 'react-redux';
import { createStore } from 'redux';
import countReducer from './core/store/reducers/index';

const store = createStore(countReducer);

export default class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <Navigation />
      </Provider>
    );
  }
}

Next, we'll connect the home screen to the store, using two different objects. mapStateToProps will extract the data from the store to the component's properties, and mapDispatchToProps will be used to dispatch actions to the store. Moreover, we'll define the behavior of both increment and decrement buttons.

// src/screens/home/HomeScreen.tsx
import React, { Component } from 'react';
import { Button, StyleSheet, Text, View } from 'react-native';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { changeCount } from '../../core/store/actions';

class HomeScreen extends Component {
  increment() {
    let { store, actions } = this.props;
    store.count++;
    actions.changeCount(store.count);
  }

  decrement() {
    let { store, actions } = this.props;
    store.count--;
    actions.changeCount(store.count);
  }

  render() {
    const { store } = this.props;

    return (
      <View style={styles.container}>
        <Button title="increment" onPress={() => this.increment()} />
        <Text>{store.count}</Text>
        <Button title="decrement" onPress={() => this.decrement()} />
      </View>
    );
  }
}

// styles...

const mapStateToProps = state => ({
  // Change the property name to whatever you want it to be called
  // In my case, I chose 'store'
  store: state.count
});

const mapDispatchToProps = dispatch => ({
  actions: bindActionCreators(
    {
      changeCount
    },
    dispatch
  )
});

export default connect(mapStateToProps, mapDispatchToProps)(HomeScreen);

Notice that the this.props used inside the component's methods are the values obtained from mapStateToProps and mapDispatchToProps, namely the store and actions.

Final thoughts

Although simple, this app covers a lot from the React and Redux ecosystem for a beginner. There is a lot more that you can do with Redux, such as persisting your store using Redux Persist, or implement authentication to keep unauthorized users from accessing the store.

After updating to iOS 13, I've begun receiving a prompt to allow my application to use Bluetooth. In reality, a lot of apps started asking for Bluetooth permission. This caught me by surprise because I did not know my app used Bluetooth and because I did not want it to use Bluetooth.

I found an issue on GitHub from September 19, 2019, which explains why I was having this issue. The app uses the Cordova plugin referenced in the issue: cordova.plugins.diagnostic. This plugin is used to "manage device settings such as Location, Bluetooth and WiFi", and I was specifically using it to request the Location permission and check if the Wi-Fi is on.

It was my first time submitting to App Store so, naïve as I was, I tried to send the app for review without removing the Bluetooth alert, just changing the purpose string. For it, I added the following lines to config.xml.

<config-file parent="NSBluetoothAlwaysUsageDescription" platform="ios" target="*-Info.plist">
    <string>Bluetooth permission is required because of X, Y and Z</string>
</config-file>

Of course, I received an email from Apple:

During review, we were prompted to provide consent to access the Bluetooth. However, we were not able to locate any features in your app that use the Bluetooth.

If your app does not include any features that use the Bluetooth, please remove access to the Bluetooth from your app.

The easy way didn't work out, so I guess I had to make sure my app doesn't request this feature. After a quick check on the documentation, I found out that modules can be specified. By default, all modules are added to the project. I followed their suggestion to add a preference to config.xml stating which modules I wanted to include.

<preference name="cordova.plugins.diagnostic.modules" value="LOCATION WIFI" />

I had to uninstall the plugin and reinstall it after adding this preference. Basically, during the plugin installation, parts of plugin.xml get commented so the files for the modules left out of the preference are excluded. After that, I removed the iOS platform, added it again and built the app.

I would rather have the plugin add nothing by default, making the developer choose the plugins it needs instead of importing a lot of unnecessary code.

I have a love-hate relationship with Ionic. While I like that this framework allows me to use Angular to develop mobile applications (an environment I'm personally fond of), I encounter problems with its plugins more often than not.

Ionic is a very powerful framework for hybrid mobile applications that look and feel native, both through UI components that look like the Material and iOS ones, and plugins to use the devices' functionalities (e.g. camera, location). It's built on top of Apache Cordova, which is a framework for building mobile applications using HTML, CSS and JavaScript instead of platform-specific APIs. Cordova can be extended using native plugins, creating links between the native layer and the web application.

I've experienced countless issues with the native plugins, often because of incompatibilities with each other or with updated versions of the Cordova platforms. Through a series of posts, I will try to summarize some of those problems I encountered, the investigations I did, and how I solved them through the means at my disposal.

I start a lot of projects that never see the daylight. One of those projects was a tracker of prices of a specific store, which had a single page web application to consult the results, developed using Angular. I wanted to make it available on the Internet, and so I decided to change the project to use Angular Universal for a couple of reasons.

1. Facilitate web crawlers through search engine optimization (SEO)
2. Improve performance on mobile and low-powered devices
3. Show the first page quickly with a first-contentful paint (FCP)

(Source)

Firebase is a platform for web and mobile development. I usually choose it to host my personal projects for two major reasons:

• The Spark plan (free tier) is pretty generous, and provides all the services I need - a key-value database (Cloud Firestore), hosting for static websites, and a serverless execution environment (Cloud Functions);
• AngularFire, the "official library for Firebase and Angular", is a great library that is easy to use and has support for most Firebase functionalities.

Before starting, make sure you have Node.js, Angular and Firebase Tools installed.

Table of Contents

Adding Angular Universal to a project

To use Angular Universal to an existing Angular project, we add the published package @nguniversal/express-engine using the following command:

ng add @nguniversal/express-engine --clientProject myProjectName

This adds some new, important files to the project. There are three new files related to the Angular Universal app, which is used to render content on the server-side:

• tsconfig.server.json
• src/main.server.ts
• src/app/app.server.module.ts

Also, there are files for the Express.js server, which will be used to handle requests and responses:

• server.ts
• webpack.server.config.js

Testing locally

In package.json you'll notice there are four new scripts related to Universal. To run the app locally, run the following scripts:

npm run build:ssr && npm run serve:ssr

The app should now be running on localhost:4000.

Some errors may occur, such as missing XHLHttpRequest. To solve that, we need to install some polyfills.

Polyfills are pieces of code that implement features on web browsers that do not support those features. Firebase uses Websockets and XHR not included in Angular that we need to polyfill [2].

npm install ws xhr2 bufferutil utf-8-validate -D

Initializing a Firebase project

Assuming you've installed Firebase tools, initialize a Firebase project in the same folder as the Angular app with the Hosting and Cloud Functions services. Feel free to take a break and go read about these services if you are not familiar with the Firebase environment.

firebase init
# Select: hosting, functions

Now, let's redirect all traffic from hosting to a function, which we will call ssr.

// firebase.json

"hosting": {
    "public": "dist/browser",
    // ...
    "rewrites": [
    	{
        	"source": "**",
        	"function": "ssr"
      	}
    ]
}

Removing the Express Server Listener and updating the Webpack config

In a normal server, we would just run server.ts using Node.js and forget about it, making Express.js deal with all the requests. Cloud Functions already do that under the hood, so our application does not need to listen for requests, therefore we have to change the code. In server.ts remove or comment out the request listener.

// server.ts
// Remove these lines 👇

// Start up the Node server
// app.listen(PORT, () => {
//   console.log(`Node Express server listening on http://localhost:${PORT}`);
// })

In webpack.server.config.js, update the "output" property. These changes tell Webpack to package the server code as a library so it can be consumed by a Cloud Function.

output: {
    path: path.join(__dirname, 'dist'),
    library: 'app',
    libraryTarget: 'umd',
    filename: '[name].js',
}

Rebuild the app again using npm run build:ssr.

Copy the Angular app to the Function environment

Let's automate copying the app to the Function environment. Navigate to the functions directory and install a necessary package: fs-extra.

cd functions
npm i fs-extra

Next, we'll create the script with the name cp-angular.js, and then update the build script to automate the copy in functions/package.json.

// functions/cp-angular.js

const fs = require('fs-extra');

(async() => {

    const src = '../dist';
    const copy = './dist';

    await fs.remove(copy);
    await fs.copy(src, copy);

})();

// functions/package.json

{
  "name": "functions",
  "engines": {
    "node": "8"
  },
  "scripts": {
    "build": "node cp-angular && tsc"
  }
}

Now we need to create the Cloud Function. We need to state that whenever an HTTPS request is made to our server, it is redirected to our Angular Universal app.

// functions/index.ts

import * as functions from 'firebase-functions';
const universal = require(`${process.cwd()}/dist/server`).app;

export const ssr = functions.https.onRequest(universal);

Deploying the application

All there's left to do is build both Angular and Firebase projects, and serve the latter. If everything looks good, deploy it!

# /
npm run build:ssr
cd functions

# /functions
npm run build
cd ..

# /
firebase serve

# If everything is ok
firebase deploy

Final thoughts

In my opinion, it turned out to be quite difficult to deploy an Angular Universal application to the Firebase Cloud Functions. I've decided to go with Functions as I wanted to keep all my assets on the same platform, but there are easier alternatives: you can deploy it to a common VPS or use a serverless computing platform such as Google App Engine (which deployment is covered in Angular Universal SSR with Firebase).

Sources: [1] [2]

Some time ago I was working on a back-end application using NestJS. Everything was running fine for weeks when, out of nowhere, they informed me that the solution was crashing at run time after a new build.

SyntaxError: Unexpected token ...

After some inspection, I found out the error was originating from the ws package. The build process was changing one instruction which broke the whole application!

// Original instruction
Object.assign({}, this._options.zlibInflateOptions, { windowBits })

// After build
{ ...this._options.zlibInflateOptions, ...windowBits }

I started looking for the problem on Google. There were issues at GitHub and questions at StackOverflow similar to mine. All the answers I was finding advised adding a specific plugin for Babel.

This plugin allows Babel to transform rest properties for object destructuring assignment and spread properties for object literals.

There was only one problem: I wasn't using Babel at all.  This was not a solution for me, but it pointed me in the right direction. I read in some of the answers that the spread operator was introduced in ES6 (or ES2015). I thought that, maybe, the Node.js version I was using to run the solution (6.9.5) did not support ES6.

I went to Node.js ES2015 Support to check if I was right. I found the feature compatibility under "object spread properties" and found out that the version I had doesn't support said feature. The fastest solution would be to update Node to version 8.3.0, at least, but I could not do that because of requirements, so I had to make sure I could make it work in that Node version. Anyways, it was running fine earlier, so what changed?

@nestjs/websockets
└─  socket.io
    └─  engine.io
        └─  ws

I began the "dissection" of the packages, in search of the problem. The first thing I did was to find the chain of dependencies that lead to this problem.

After that, I checked the release notes for each of those packages and found out that the ws package dropped the support for Node 6 on their version 7 on their GitHub.

"How did this happen?", I wondered. The package.json of the project wasn't updated, so breaking changes shouldn't have occurred. I started investigating again, this time going up to the root, and took note of every referenced version of the dependencies.

@nestjs/websockets@^4.6.6
└─  socket.io@^2.0.3
    └─  engine.io@~3.1.0
        └─  ws@~2.3.1

At first glance, I thought there was no problem with it since ws is pointed to the version 3.3.1, but then I realized there's one dependency which range specifies that it can be installed with any minor above 2.0.3: socket.io. Turns out the version of socket.io installed was 2.3.0.

socket.io@2.3.0
└─  engine.io@~3.4.0
    └─  ws@^7.1.2

There's the problem: this version of socket.io needs engine.io 3.4.0, which depends on ws 7.1.2. The solution I went with was to find a version of socket.io that would allow me to use ws 6 (that version being 2.2.0) and add it to the dependencies of the project with a fixed version so it doesn't upgrade automatically.

socket.io@2.2.0
└─  engine.io@~3.3.2
    └─  ws@^6.1.0

What about Semantic Versioning?

Semantic Versioning (or SemVer) is a way of assigning unique identifiers (either names or numbers) to unique builds of software. Their introduction reads:

In the world of software management there exists a dreaded place called “dependency hell.” The bigger your system grows and the more packages you integrate into your software, the more likely you are to find yourself, one day, in this pit of despair.

This is exactly what I experienced throughout this story. The ws package developers were kind enough to warn in their release notes that their new version would break applications running on Node 6.

The programmers of socket.io and engine.io should have noticed this change. From engine.io 3.3.2 to 3.4.0 were introduced breaking changes, causing applications like the one I was working on to crash, and that would not have happened if they increased their version as Semantic Versioning suggests.

Given a version number MAJOR.MINOR.PATCH, increment the:

1. MAJOR version when you make incompatible API changes,
2. MINOR version when you add functionality in a backwards compatible manner, and
3. PATCH version when you make backwards compatible bug fixes.

I would have increased the version to 4.0.0 instead of 3.4.0, following the Semantic Versioning protocol.

Take this post with a grain of salt, this is just a personal rant about something I experienced at work. I would have preferred to update the Node version to a recent one but, unfortunately, this was the solution I had to go with.

I decided that it was time to create the personal project that I already had in mind for quite some time: a blog to record the interesting things I find as a software developer. More than that, I also wanted to learn something out of it, and to have some fun while doing it.

I thought Docker would be ideal to organize the services I need. Simply put, Docker is a tool that allows creating and managing applications inside containers. I ended up having three of them, one for each of the services I needed:

• NGINX, to serve my web pages;
• MySQL, to host my databases;
• Ghost, to manage my content.

Table of Contents

Before starting

First I chose and bought my domain, and my VPS to host the applications. I'm using Vultr as both my VPS and DNS provider.

I obtained an SSL/TLS certificate for my blog to be accessed through HTTPS. For that purpose, I used Certbot to request a certificate from Let's Encrypt for free!

sudo apt install software-properties-common
sudo add-apt-repository ppa:certbot/certbot
sudo apt update
sudo apt install certbot
sudo certbot certonly --standalone -d blog.afmonteiro.pt

The certificate is downloaded to the folder /etc/letsencrypt/live/example.com/.

Install Docker

My VPS is running a Linux machine based on Debian, so I used apt to manage my packages, following the official Docker documentation.

1. Install all the necessary packages:

   sudo apt install apt-transport-https ca-certificates curl software-properties-common
   

2. Add Docker's GPG key to authenticate the packages:

   curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add - 
   

3. Verify the key's fingerprint:

   sudo apt-key fingerprint 0EBFCD88
   

4. Add the stable Docker repository:

   sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable"
   

5. Update the package index and install Docker Community Edition:

   sudo apt-get update
   sudo apt install docker-ce
   

6. Add your Linux user to the docker group:

   sudo usermod -aG docker $USER
   

7. Download and install the latest version of Docker Compose, and set permissions to run it. I'm running the version 1.24.1, check the releases page for the latest version.

   sudo curl -L https://github.com/docker/compose/releases/download/1.24.1/docker-compose-`uname -s`-`uname -m` -o /usr/local/bin/docker-compose
   sudo chmod +x /usr/local/bin/docker-compose
   

Now that Docker and Docker Compose are installed, the process can continue to its next step - installing the three main components, which will be listed in a single Docker Compose file. For those who don't know Compose, it is described as the following in the official documentation:

Compose is a tool for defining and running multi-container Docker applications. With Compose, you use a YAML file to configure your application’s services. Then, with a single command, you create and start all the services from your configuration.

Creating the Docker Compose file

1. Create and change to the directory that will hold all the Docker services:

   mkdir docker && cd docker
   

2. Create an empty file named docker-compose.yml:

   touch docker-compose.yml
   

3. Open docker-compose.yml with your favorite text editor, and paste the following snippet. Replace MY_DOMAIN with your domain, and insert a new database password where MY_DB_PASSWORD appears.

   # docker/docker-compose.yml
   version: '3'
   services:
   
     ghost:
       image: ghost:latest
       restart: always
       depends_on:
         - db
       environment:
         url: MY_DOMAIN
         database__client: mysql
         database__connection__host: db
         database__connection__user: root
         database__connection__password: MY_DB_PASSWORD
         database__connection__database: ghost
       volumes:
         - /opt/ghost_content:/var/lib/ghost/content
   
     db:
       image: mysql:5.7
       restart: always
       environment:
         MYSQL_ROOT_PASSWORD: MY_DB_PASSWORD
       volumes:
         - /opt/ghost_mysql:/var/lib/mysql
   
     nginx:
       build:
         context: ./nginx
         dockerfile: Dockerfile
       restart: always
       depends_on:
         - ghost
       ports:
         - "80:80"
         - "443:443"
       volumes:
          - /etc/letsencrypt/:/etc/letsencrypt/
          - /usr/share/nginx/html:/usr/share/nginx/html
   

4. Docker Compose creates a few Docker bind mounts:

   • /var/lib/ghost/content and /var/lib/mysql inside the containers are mapped to /opt/ghost_content and /opt/ghost_mysql, respectively. These locations will store Ghost and MySQL data.
   • A bind mount for /etc/letsencrypt/ is created for NGINX to access the Lets Encrypt certificates.
   • NGINX also uses a bind mount for /usr/share/nginx/html so that it can access the Let’s Encrypt challenge files that are created when your certificate is renewed.

   Directories should be created if they do not exist already:

   sudo mkdir /opt/ghost_content
   sudo mkdir /opt/ghost_mysql
   sudo mkdir -p /usr/share/nginx/html
   

Create the NGINX Docker Image

1. Create a new directory nginx (inside the previously created directory):

   mkdir nginx
   

2. Create a file named Dockerfile and paste in the following contents:

   # nginx/Dockerfile
   FROM nginx:latest
   
   COPY default.conf /etc/nginx/conf.d
   

3. Create a file named default.conf and paste in the following contents. Replace MY_DOMAIN with your own domain.

   # nginx/default.conf
   server {
     listen 80;
     listen [::]:80;
     server_name MY_DOMAIN;
     # Useful for Let's Encrypt
     location /.well-known/acme-challenge/ { root /usr/share/nginx/html; allow all; }
     location / { return 301 https://$host$request_uri; }
   }
   
   server {
     listen 443 ssl http2;
     listen [::]:443 ssl http2;
     server_name MY_DOMAIN;
   
     ssl_protocols TLSv1.2;
     ssl_ciphers HIGH:!MEDIUM:!LOW:!aNULL:!NULL:!SHA;
     ssl_prefer_server_ciphers on;
     ssl_session_cache shared:SSL:10m;
   
     ssl_certificate     /etc/letsencrypt/live/MY_DOMAIN/fullchain.pem;
     ssl_certificate_key /etc/letsencrypt/live/MY_DOMAIN/privkey.pem;
   
     location / {
       proxy_set_header Host $host;
       proxy_set_header X-Real-IP $remote_addr;
       proxy_set_header X-Forwarded-Proto https;
       proxy_pass http://ghost:2368;
     }
   }
   

Run and test the new blog

When the environment is ready, run docker-compose up -d. This creates a daemon which runs the components in the background. To stop the instances, run the command docker-compose down. These commands should be run inside the folder that contains the Docker Compose file!

The command docker-compose up can be issued without the flag -d so the logs are shown in the console, running Docker Compose in attached state, this being useful for seeing errors if one occurs. To shut down the services in this case, press the combination CTRL-C in your keyboard.

Final thoughts

Docker Compose is an ideal tool for a simple environment in which multiple applications need to be running in parallel and communicating with each other.

Creating an environment using Docker Compose may seem easy, but some unexpected errors may occur to some people. I had some trouble configuring the different components which required me to do some research on the side. Please use this guide at your own discretion, and feel free to leave me a comment if you have any doubt or suggestion.

Source: How to Install Ghost CMS with Docker Compose on Ubuntu 18.04