Forem: Nwakwoke Patrick Nnaemeka

Creating and testing a react package with CRA and rollup

Nwakwoke Patrick Nnaemeka — Sat, 14 Mar 2020 11:47:30 +0000

TL;DR

check out the complete setup in this repo

Introduction

This article assumes that you have at least a beginner level knowledge of react. It is not intended to teach you react.

You may create a nice component in your app that you see a use case for in other apps. You could also have an idea for a component that you would like to make available to other developers. The problem usually is, how do you bundle this component and make it distributable. In this article, I will provide guidelines on how we can easily bundle our component with rollup, test it locally and make it available for installation on npm.

Setting up a project

We will be making use of create react app(CRA) to setup react in this guide. We can either have CRA installed globally on our machine or we can use it directly via npx which ensures we are running the latest version. Running the following command sets up our project with the name 'react-dog':

npx create-react-app react-dog

Project structure

We will create a folder named lib under the src folder. This is where all the source code for the component or library will be. In the lib folder we will have the following files:

the styles (dog-style.css)

.dog {
  display: flex;
  max-width: 100px;
}

an image (dog-image.jpg)
the main component file (Dog.js)

import React from 'react';
import dog from './dog-image.jpeg';
import './dog-style.css';

export default function Dog() {
  return (
    <div class='dog'>
      <img alt='dog' src={dog} />
    </div>
  );
}

Our folder structure will end up looking like this:

First Test Run

To ensure that there are no errors and our package is working like it is supposed to before bundling, you should import your component or Dog in our case into App.js and run this project. Replace the content of App.js with this:

import React from 'react';
import Dog from './lib/Dog.js';

function App() {
  return (
    <div className='app'>
      <Dog />
    </div>
  );
}

export default App

Run the project with npm start and everything should run smoothly before you proceed to the next step

Setting up rollup and babel

Run this command to install rollup and all the plugins we require to bundle our package.

npm i -D rollup rollup-plugin-babel @rollup/plugin-commonjs @rollup/plugin-node-resolve @rollup/plugin-image rollup-plugin-peer-deps-external rollup-plugin-postcss rollup-plugin-visualizer

Here is a brief description of what each plugin does:

rollup-plugin-babel: This integrates rollup with babel.
@rollup/plugin-commonjs: Converts any commonjs module to ES6.
@rollup/plugin-node-resolve: Locates third party modules in node_modules
@rollup/plugin-image:Imports your images and svg icons.
rollup-plugin-peer-deps-external: Externalize dependencies in a rollup bundle. This is automatic for peerDependencies.
rollup-plugin-postcss: Transforms styles with js plugins. You need this if your package contains styles
rollup-plugin-visualizer: Visualize and analyze your Rollup bundle to see which modules are taking up space.

Run this to install babel and the babel plugins needed for your compilation

npm i -D @babel/cli @babel/core @babel/preset-env @babel/preset-react

Configurations

Create a babel configuration file .babelrc in the root of your project and insert the following content:

{
  "presets": ["@babel/env", "@babel/preset-react"]
}

These presets contains plugins that babel will utilize when converting the library from ES6 and JSX to a lower javascript versions.

Next, we need to configure package.json by adding fields that will point it to the entry point of your package after bundling. We will be adding both a main and a module field. The main field makes sure that Node users using require will be served the CJS version. The module field is not an official npm feature but it will enable ES6 aware tools to make use of an ES6 version of your library. So, we are generating two builds. Modify your package.json by adding the following fields:

{
...
  "main": "dist/index.cjs.js",
  "module": "dist/index.esm.js",
}

The values of main and module above indicate that the bundles will be generated in a dist folder. You can also add a files field to specify what must be published to npm. Files like LICENSE, CHANGELOG.md and README.md are published by default.

...
"files": [ "dist/*" ]

The above setting specifies that all files in the dist folder must be published to npm.

Move react and react-dom from the dependencies field to devDependencies. Specify the minimum version of react and reactDom that your package requires in the peerDependencies field. I am using >=16.8.0 in this example because it is the earliest version with support for hooks. At this point, your dependencies field should be empty or deleted while your peerDepedencies and devDependencies fields should look similar to this.

{
...
  "peerDependencies": {
    "react": ">=16.8.0",
    "react-dom": ">=16.8.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.8.4",
    "@babel/core": "^7.8.7",
    "@babel/preset-env": "^7.8.7",
    "@babel/preset-react": "^7.8.3",
    "@rollup/plugin-commonjs": "^11.0.2",
    "@rollup/plugin-image": "^2.0.4",
    "@rollup/plugin-node-resolve": "^7.1.1",
    "react": "^16.13.0",
    "react-dom": "^16.13.0",
    "react-scripts": "3.4.0",
    "rollup": "^2.0.6",
    "rollup-plugin-babel": "^4.4.0",
    "rollup-plugin-peer-deps-external": "^2.2.2",
    "rollup-plugin-postcss": "^2.4.1",
    "rollup-plugin-visualizer": "^3.3.1"
  }
  ...
}

Next, create a file named rollup.config.js in the project's root directory. This is where all the configurations for rollup will be specified. Insert the following content into rollup.config.js:

import babel from 'rollup-plugin-babel';
import commonjs from '@rollup/plugin-commonjs';
import external from 'rollup-plugin-peer-deps-external';
import postcss from 'rollup-plugin-postcss';
import resolve from '@rollup/plugin-node-resolve';
import image from '@rollup/plugin-image'
import visualizer from 'rollup-plugin-visualizer';
import pkg from './package.json';

export default {
  input: './src/lib/Dog.js',
  output: [
    {
      file: pkg.main,
      format: 'cjs'
    },
    {
      file: pkg.module,
      format: 'esm'
    }
  ],
  plugins: [
    external(),
    postcss(),
    babel({
      exclude: 'node_modules/**'
    }),
    resolve(),
    commonjs(),
    image(),
    visualizer()
  ]
};

This is what each configuration field stands for:

input: The entry point to the component you want to bundle. In this article, I am pointing directly to Dog.js but it is common to find projects where a main file like index.js file is created to export the component(s)
output: This specifies the directory where you want to save the bundled library. With rollup, you can specify an array of multiple outputs in different formats and directories. We are importing the output paths from package.json
plugins: This specifies all the plugins you wish to use and their respective configurations. You can look up documentation on each plugin if there is a need to configure them differently.

Bundling

After setting up and configuring our tools, the next step will be to create a bundle that will be distributed through npm or any other package manager of your choice.

Running rollup -c compiles the component into a bundle using the configurations in rollup.config.js. We will modify our build script in package.json so that we can execute npm run build whenever we want to generate a new bundle.

...
build: "rollup -c"

Run npm run build and you should have a dist folder with two bundled files in it. If you added the rollup-plugin-visualizer, you will also get a stats.html file that you can open in your browser to inspect the bundle size.

Testing the bundle

Next, we should make sure our bundle works before publishing it on npm. One easy way to do this locally is to link the package to our global node_modules. This can be done by running npm link on the command line from the root of the project. Ensure you have specified the name of your package in package.json because that will be your package's name.

name: "react-dog"

After running npm link, a symlink will be created for the dist folder in the global node_modules.

Next, run npm link react-dog(replace 'react-dog' with your package name) from the root of the project. This will create another symlink between your global node_modules and your current local node_modules for react-dog so that you can simply import it in App.js like your other installed third-party libraries.

import Dog from 'react-dog'

From the script above, you can observe that we no longer import Dog from './lib/Dog.js'. Run npm start and we should see that the library is working as it should. Rebuild if you make any changes so that you can test the updated version of your library.

Publishing

Now that everything is in place, we can prepare our package for publishing. Similar to .gitignore, it is advisable to create a .npmignore file that will contain all the files irrelevant to our publication. This helps cut down on the package size.

src
rollup.*
.babelrc
.eslintrc
stats.html

I have excluded the src folder from the library because we are only using it for tests.

You can read more on including and excluding files here.

If you aren't already logged in to npm, run npm login on the command line and follow the prompts to fill out your login details.

Finally, run npm publish and if everything goes well, your package will be available for installation from anywhere by simply running npm install <package-name>

Troubleshooting

Some common problems you might encounter during this process include:

is not exported by module: This mainly occurs with some packages in node_modules. While can be any named imports, you will have to specify it manually in the commonjs plugin added to your configuration in rollup.config.js. Example, for the following error:

a fix will be to add it to the namedExports field in the commonjs plugin like this:

plugins: [
...
commonjs({
  namedExports: {
        'node_modules/react-is/index.js': ['isElement', 'isValidElementType']
      }
})
]

Conclusion

Rollup provides a very neat way of bundling javascript. It keeps the bundle relatively readable in case a user of your package needs to debug it in node_modules.

If you need access to the actual files for this setup, you can check the repo

Handling async operations and promise values in javascript arrays

Nwakwoke Patrick Nnaemeka — Tue, 22 Oct 2019 19:08:12 +0000

ES6 brought a lot of notable goodies to javascript and one of the famous ones are async/await and popular array methods like map, filter, reduce and foreach. These operations all take a callback and have their various ideal use cases but whichever one you use, try not to sacrifice code legibility.

To the main reason we are here, I have often had difficulties in the past using these array methods whenever my callback had to be an async function or handle a Promise. I eventually got to figure it out and put this piece together in case anyone else faces these struggles. I will give examples using the map and reduce methods. The knowledge from both can be applied to the other methods which are quite similar.

MAP

I use the map operation when I need to return an identical array but with each value going through the same modification. Let's assume we have a function 'findById' that takes a data's id and returns the corresponding data to that id. If we have an array of ids and we want to get the corresponding data for each of these ids, we could easily do

const getData = (arrayOfIds) => {
 const arrayOfData = arrayOfIds.map(id => findById(id));
 console.log(arrayOfData);
}

arrayOfData should contain our data right? Well, that depends. If findById is a synchronous function, then yes. If it an async function, what we get in our console is an empty array. Why? javascript event loop drama. The thread won't wait for the completion of the findById operations before moving to the next operation.

Now let us treat findById as an async function and fix our code to ensure our promise is resolved before running any operations that depend on our resolved data.

 const getData = (arrayOfIds) => {
  Promise.all(arrayOfIds.map(id => findById(id)))
   .then((arrayOfData) => {
     console.log(arrayOfData);

     //do what you want with data
  });
 }

We should now see our data instead of an empty array in the console. Promise.all is used to resolve an array of Promises. findById will return a Promise, so our map operation will return an array of Promises, hence the need for Promise.all. This solution, however, can be even neater if getData is an async function, so we can resolve our promise with a simple await

 const getData = async (arrayOfIds) => {
  const arrayOfData = await Promise.all(
    arrayOfIds.map(id => findById(id))
  );

  console.log(arrayOfData);

  // do what you want with data
 }

Easy peasy!

Reduce

I use reduce when I want to fluently aggregate my array into a single value. For our reduce example, we will be trying to convert an array of ids into a javascript Object. Let us will assume our findById method returns object data that contains a name field, so we want to convert our array of ids to an object with each data's id as a key and the name as corresponding value. Something that looks like this

 {
  53b55aea-32f8-47fe-aa36-9fd44f6c399f: 'Alec Benjamin',
  53b55aea-32f8-47ff-aa37-9fdhjdj5678f: 'Chester Bennington'
 }

Here is how we can implement this

const getUserDataInDictFormat = async (arrayOfIds) => {
  const userData = await arrayOfIds.reduce(async (prevAggregate, currentId) => {
    const currentUserData = await findById(currentId);

    const aggregate = await prevAggregate;

    aggregate[currentId] = currentUserData.name;

    return aggregate;
  }, {})
 }

 console.log(userData);

 //do something with userData
}

Since our callback returns a Promise on each iteration, our prevAggregate will need to be awaited to get its value. The final value of the reduce operation will also be a Promise, which we also await to get its resolved value.

The secret for me is, try as much as possible to figure out which values will be a promise and ensure they are resolved before using them again.
I hope this was helpful and feel free to drop a comment if you have any concerns.

State management in React Native using context

Nwakwoke Patrick Nnaemeka — Sat, 05 Oct 2019 13:51:34 +0000

I am quite sure a lot of React and React Native devs are familiar with using Redux to manage application state. A few months back I wrote an article on how you can use context in place of Redux for managing global state in React. It's good practice to always keep state as close to where it is needed as possible and this is quite easy to achieve with React because of the pretty simple API of react router. On the other hand, this practice can pose some difficulty with React Native because of the quite complex API of React Navigation. Although there are other alternatives for navigation in React Native such as react router native, React Navigation appears to be the most commonly used navigation library in react native. So, here is a way devs could structure their context providers in react native:

// placing all providers in the app's root

<AuthContext.provider value={authValue}>
  <ArticleContext.provider value={articleValue}>
    <UserContext.provider value={userValue}>
      <Navigator />
    </UserContext.provider>
  </ArticleContext.provider>
</AuthContext.provider>

Let's assume Navigator is the navigation component that routes to all other components in the App, then having your context providers setup like above could have a negative impact on your app's performance because it means the entire app will rerender when any of the providers value changes including components that do not need or make use of this update. In this article, I will show us a pretty neat way we can set up our navigation and context so that components are only rendered under providers that they need updates from.

In our example app, we will have users context, articles context and auth context. I will eventually shed light on the articles component to show how we can consume context.

Creating Contexts

We will start by creating our various contexts. Instead of using my providers directly, I love to abstract them in other components I term as 'controllers'. This makes it easy to isolate and modify the logic for creating and updating context value. The controllers return our providers

This is the content of our auth context:


import React, { useReducer, useMemo } from 'react';
import PropTypes from 'prop-types';

const initialState = {
  loggedIn: false,
  user: {}
};

const initialContext = [{ ...initialState }, () => {}];

export const AuthContext = React.createContext(initialContext);

const updater = (state, update) => {
  return { ...state, ...update };
};

export function AuthController(props) {
  const [authState, updateAuth] = useReducer(updater, initialState);
  const value = useMemo(() => [authState, updateAuth], [authState]);

  return (<AuthContext.Provider value={value}>
          {props.children}
          </AuthContext.Provider>);
}

AuthController.propTypes = {
  children: PropTypes.oneOfType([
    PropTypes.arrayOf(PropTypes.node),
    PropTypes.node
  ]).isRequired
};

For user context, we have:


import React, { useReducer, useMemo } from 'react';
import PropTypes from 'prop-types';

const initialState = {
  user: {}
};

const initialContext = [{ ...initialState }, () => {}];

export const UserContext = React.createContext(initialContext);

const updater = (state, update) => {
  return { ...state, ...update };
};

export function UserController(props) {
  const [userState, updateUser] = useReducer(updater, initialState);
  const value = useMemo(() => [userState, updateUser], [userState]);

  return (<UserContext.Provider value={value}>
          {props.children}
          </UserContext.Provider>);
}

UserController.propTypes = {
  children: PropTypes.oneOfType([
    PropTypes.arrayOf(PropTypes.node),
    PropTypes.node
  ]).isRequired
};

and lastly, the article context:


import React, { useReducer, useMemo } from 'react';
import PropTypes from 'prop-types';

const initialState = {
  articles: []
};

const initialContext = [{ ...initialState }, () => {}];

export const ArticleContext = React.createContext(initialContext);

const reducer = (state, action) => {
  switch (action.type) {
    case "get":
      return {...state, articles: action.articles }
    case "add":
      return { ...state, articles: [...state.articles, action.article] };
    case "delete":
      const articles = [...state.articles];
      const filteredArticles = articles.filter(article => article.id !== action.articleId);
      return { ...state, articles:filteredArticles };
    default:
      throw new Error("Unrecognized action");
  }
};


export function ArticleController(props) {
  const [articleState, dispatch] = useReducer(reducer, initialState);
  const value = useMemo(() => [articleState, dispatch], [articleState]);

  return (<ArticleContext.Provider value={value}>
          {props.children}
          </ArticleContext.Provider>);
}

ArticleController.propTypes = {
  children: PropTypes.oneOfType([
    PropTypes.arrayOf(PropTypes.node),
    PropTypes.node
  ]).isRequired
};

That's all our contexts. We pass in an array with two items as the value to our context provider. The first item in the array is our state and the second is a function that updates state. This value has to be memoized to prevent continuous rerendering due to the value receiving a new reference every time the component is rendered.

Splitting navigation and context providers

First, we will start by creating our main navigation. Ensure you have react-navigation installed

npm i react-navigation

We will define our main navigator, which is a combination of sub navigators.

import { createStackNavigator, createAppContainer } from 'react-navigation';
import User from './user/';
import Article from './articles/';


const Navigator = createStackNavigator(
  {
    user: {
      screen: User
    },
    article: {
      screen: Article
    }
  },
  {
    initialRouteName: 'article'
  }
);

export default createAppContainer(Navigator);

Then we create a sub navigator for components relating to the user profile.

import React from 'react';
import { createStackNavigator } from 'react-navigation';
import PropTypes from 'prop-types'
import UserDetails from './user-details.js';
import EditUser from './edit-user.js';
import UserController from '../contexts/user-context.js'

const UserNavigator = createStackNavigator({
  userDetails: {
    screen: UserDetails
  },
  editUser: {
    screen: Edituser
  }
}, 
{
  initialRouteName: 'userDetails',
});

export default function User(props) {
  return (
    <UserController>
      <UserNavigator navigation={props.navigation} />
    </UserController>
  );
}

User.router = UserNavigator.router

User.propTypes = {
  navigation: PropTypes.object
};

And similarly, a sub navigator for article related components

import React from 'react';
import PropTypes from 'prop-types'
import { createStackNavigator } from 'react-navigation';
import ListArticles from './all-articles.js';
import AddArticle from './add-article.js';
import ArticlesController from '../contexts/article-context.js'

const ArticleNavigator = createStackNavigator({
  listArticles: {
    screen: ListArticles
  },
  addArticle: {
    screen: AddArticle
  }
}, 
{
  initialRouteName: 'articleDetails',
});

export default function Article(props) {
  return (
    <ArtileController>
      <ArticleNavigator navigation={props.navigation} />
    </ArticleController>
  );
}

Article.router = ArticleNavigator.router

Article.propTypes = {
  navigation: PropTypes.object
};

What we have done so far is splitting our navigators so that we can wrap each one in its respective provider. Our controllers render the providers. What about our auth context? Since authentication can be a concern across our entire app, we can wrap our entire navigator in it so that every component has access to auth state.


import React from 'react';
import Navigator from './navigator';
import { AuthController } from './context/auth-context';

export default function App() {
  return (
    <AuthController>
      <Navigator />
    </AuthController>
  );
}

Instead of placing all the paths in our main navigator, we've broken them down into various sub navigators and will render them as children of their respective providers and also import them in the main navigator. To learn more about navigation in react native, you can check out the react navigation docs.

Consuming Contex

Next step, we consume our contexts. In our ListArticles component, here is how we are consuming the articles context.

import React, {useEffect, useContext} from 'react';
import {Text, FlatList, ScrollView, TouchableOpacity} from 'react-native';
import PropTypes from 'prop-types';
import {getArticles, removeAricleFromDatabase} from 'api';
import {ArticleContext} from './context/article-context';

export default function ListArticles (props) {
  const [articles, dispatch] = useContext(ArticleContext);

  useEffect(() => {
    getArticles()
      .then(articles => dispatch({type:'get', articles})
  }, []);


  const deleteArticle = (article) => {
  removeArticleFromDatabase(article)
    .then((data) => dispatch({type: 'delete', articleId: data.id}));


  const Item = ({id, title}) => {
   return (
     <View>
      <Text>{item.title}</Text>
      <TouchableOpacity onPress={(id) => deleteArticle(id)}>
       <Text>x</Text>
      </TouchableOpacity>
     </View>
   )
  }  

  return (
    <ScrollView>
      <FlatList
        data={articles}
        renderItem={({item}) => <Item title={item.title} id={item.id}/>}
        keyExtractor={item => item.id}
      />
      <TouchableOpacity 
       onPress={() => props.navigation.navigate('addArticle')}>
       <Text>Add new article</Text>
      </TouchableOpacity>
    </ScrollView>
  );

}

We are consuming the articles context here using react's useContext hook. We pass our context as a parameter to the hook and it returns the value passed in the provider. Dispatching actions we want to carry out updates our context provider value. We won't get our values if the provider is not present in the component tree hierarchy.

Similarly, we can dispatch an action for adding an article.

import React, {useContext} from 'react';
import {ArticleContext} from './context/article-context';
import {saveArticleInDatabase } from 'api';

const [_, dispatch] = useContext(ArticleContext);

const addArticle = (article) => {
  saveArticleInDatabase(article)
    .then((data) => dispatch({type: 'add', article: data}));
}

/* render beautiful jsx */

Every other context we have in our app can be consumed in the same fashion, with each context provider only parent to components that consume it in order to prevent unnecessary re-renders.

None of the patterns adopted here is cast in stone. This is just a guide to optimally use context to manage our React native application's state. To learn more about React context, here is something from the official react docs.

Securing your express/Node.js API with Firebase auth

Nwakwoke Patrick Nnaemeka — Mon, 23 Sep 2019 00:36:19 +0000

A lot of applications, be it a mobile app or a web app have some form of authentication. If you've worked on various apps, handling authentication can become quite a repetitive task and can get boring which is why I love to make use of external services such as auth0 or firebase to make authentication a breeze. These services can also take care of social auth and that can save us so many lines of code. All we will have to worry about is integration.

In this article, I am going to cover using firebase to secure our APIs so that only authorized users have access to our resources. A common way of securing APIs is with the use of JWT tokens which is generated after a user supplies valid auth credentials and this token is validated on every request. This is quite similar to what we are going to be doing with firebase. We will make use of firebase to handle the generation and validation of this token.

Note that this article is not intended to teach you how to create/start an express server. If you are not familiar with using Node.js or express, I will advise you to check that out before reading this article.

Time for us to dive into some code.

Visit your firebase console and create a new project if you haven't already done that.

The server-side

For the server-side, we will be using the firebase admin SDK as it is more suited for what we are trying to accomplish.

Use this command to install the admin SDK on your server:

npm i firebase-admin

To verify that you are calling APIs from a trusted environment, google recommends you to generate and download a service account key for your project and add it to a path in your environment. So head over to your console, generate a service account key, download it(JSON preferably) and add its location to a path(GOOGLE_APPLICATION_CREDENTIALS) in the environment where you will be running your server.

exports GOOGLE_APPLICATION_CREDENTIALS=/path/to/service-account-file.json

Look here for more on this.

We can now create a service in our project where we will initialize our SDK with our credentials and export it.

import * as admin from 'firebase-admin';

admin.initializeApp(
  credential: admin.credential.applicationDefault(),
  databaseURL: 'https://<DATABASE_NAME>.firebaseio.com'
);

export default admin

Next, we will write the logic that handles the creation of new users. We can place this logic in our auth controller or anywhere you think is suitable.

import admin from './firebase-service';

export const createUser = async (req, res) => {
const {
      email,
      phoneNumber,
      password,
      firstName,
      lastName,
      photoUrl
    } = req.body;

    const user = await admin.auth().createUser({
      email,
      phoneNumber,
      password,
      displayName: `${firstName} ${lastName}`,
      photoURL: photoUrl
    });

    return res.send(user);
}

Now that our logic for creating users is in place. We will need to make sure that requests coming in are from authenticated users. We can achieve this by creating middlewares to protect routes that we want to keep private.

We will create an auth middleware to ensure there is a valid firebase token in the request header.

import admin from './firebase-service';


const getAuthToken = (req, res, next) => {
  if (
    req.headers.authorization &&
    req.headers.authorization.split(' ')[0] === 'Bearer'
  ) {
    req.authToken = req.headers.authorization.split(' ')[1];
  } else {
    req.authToken = null;
  }
  next();
};


export const checkIfAuthenticated = (req, res, next) => {
 getAuthToken(req, res, async () => {
    try {
      const { authToken } = req;
      const userInfo = await admin
        .auth()
        .verifyIdToken(authToken);
      req.authId = userInfo.uid;
      return next();
    } catch (e) {
      return res
        .status(401)
        .send({ error: 'You are not authorized to make this request' });
    }
  });
};

With this middleware in place, the user gets an 'unauthorized' error every time they try to access a private resource without being authenticated.

Now that we have created our middleware, let's use it to protect our private route.

import {Router} from 'express';
import {createUser} from './controllers/authcontroller';
import {checkIfAuthenticated} from './middlewares/auth-middleware';
import {articles} from from './data';

const router = Router();


router.post('/auth/signup', createUser);

router.get('/articles', checkIfAuthenticated, async (_, res) => {
  return res.send(articles);
});  

export default router;

In the code above, we have defined two routes. One for creating our user, the second for fetching articles only if the user is authenticated. Now let's head over to the client-side and see how this API can be consumed.

The client-side

We could be consuming our API using any javascript client-side library or framework for web or mobile apps, so I will not specify any but will rather focus on the firebase javascript SDK. Although there might be some differences in the SDK specific to various javascript libraries/frameworks, the APIs are still quite similar to the official web SDK.

So, we install firebase on the client.

npm i firebase

Note: Your platform might require a different SDK and method of installation, examples are angular-fire and react-native-firebase.

To keep things clean, we can also create a service on our client for initializing firebase with our configurations.

import * as firebase from 'firebase/app';
import 'firebase/auth';

const config = {
  apiKey: "api-key",
  authDomain: "project-id.firebaseapp.com",
  databaseURL: "https://project-id.firebaseio.com",
  projectId: "project-id",
  storageBucket: "project-id.appspot.com",
  messagingSenderId: "sender-id",
  appID: "app-id",
}

firebase.initializeApp(config);

export const auth = firebase.auth

export default firebase;

Your credentials are available on your firebase console. If you're not using javascript on the web you should check out how to initialize firebase on your specific platform.

We will create an auth service for calling the signup endpoint and signing in of users.

import axios from 'axios';
import {auth} from './firebase-service';


export const createUserAccount = (data) => {
  return axios.post('https://your-api-url/auth/signup', data)
    .then(res => res.data)
}


export const loginUser = (email, password) => {
  return auth().signInWithEmailAndPassword(email, password);
}

We have defined our logic for creating a user and logging them into our app. This is how we can check with firebase if a user is already logged in.


firebase.auth().onAuthStateChanged(user => {
   if (user) {
     return user;
   }
});

Now that we have signup and login in place, let us go ahead and generate a token on our client-side for authentication on the server. This can easily be done with a single line of code. Yeah! you heard right, a single line.


const token = await firebase.auth.currentUser.getIdToken();

You can either use it as shown above in an async function or resolve the promise to get the token value. We will be making a request to our API with the token attached to the request header to access the articles resource.

import {auth} from './firebase-service';

export const getArticles = async () => {
const token = await auth.currentUser.getIdToken();

return axios.get('https://your-api-url/articles', {headers:  
  { authorization: `Bearer ${token}` }})
  .then(res => res.data);
}

We've simply passed in our firebase token to the authorization header. it will be extracted on the server-side and used to authenticate our user. This will all be handled by the middleware we created earlier

User roles

One very important part of user authentication is role management. What if we want to have different levels of authorization and restrict access to certain resources to users with certain roles. This is also very easy to implement with firebase authentication.

We will be managing the roles on our server and this is how we can go about it.

import admin from './firebase-service';

export const makeUserAdmin = async (req, res) => {
  const {userId} = req.body; // userId is the firebase uid for the user

  await admin.auth().setCustomUserClaims(userId, {admin: true});

  return res.send({message: 'Success'})
}

Now that we can assign roles to our user, how do we check if a user has a certain role? Easy, when we verify a user's token in our middleware, we can easily access this information on the data that is returned. We will add a middleware that checks if our user has an admin role.

import admin from './firebase-service';

const getAuthToken = (req, res, next) => {
  if (
    req.headers.authorization &&
    req.headers.authorization.split(' ')[0] === 'Bearer'
  ) {
    req.authToken = req.headers.authorization.split(' ')[1];
  } else {
    req.authToken = null;
  }
  next();
};

export const checkIfAdmin = (req, res, next) => {
 getAuthToken(req, res, async () => {
    try {
      const { authToken } = req;
      const userInfo = await admin
        .auth()
        .verifyIdToken(authToken);

      if (userInfo.admin === true) {
        req.authId = userInfo.uid;
        return next();
      }

      throw new Error('unauthorized')
    } catch (e) {
      return res
        .status(401)
        .send({ error: 'You are not authorized to make this request' });
    }
  });
};

We can now protect our admin resources with this middleware. Here are our updated routes

import {Router} from 'express';
import {createUser} from './controllers/authcontroller';
import {checkIfAuthenticated, checkifAdmin} from './middlewares/auth-middleware';
import {articles} from from './data';
import {records} from './data/admin';

const router = Router();

router.post('/auth/signup', createUser);

router.get('/stories', checkIfAuthenticated, async (_, res) => {
  return res.send(articles);
});  

router.get('/admin/records', checkIfAdmin, async (_, res) => {
  return res.send(records);
});

export default router;

Any token without an admin role assigned to it will get an 'unauthorized' error if it tries to access our admin resource.

There is a lot more that can be covered but that is all we will be covering in this article. Hopefully, this is enough push to get you started with firebase auth on the server. You can check out more possibilities by exploring the firebase docs.

Using custom hooks in place of "render props"

Nwakwoke Patrick Nnaemeka — Wed, 24 Apr 2019 13:02:25 +0000

One of the sweet but sometimes difficult to figure out part of React is reusing stateful logic across various components. Instead of rewriting a certain stateful logic whenever we need it, we would all love to write this logic just once and then reuse it in whatever components need it. A common pattern that makes this possible is "render props".
A component with a render prop takes a function that returns a React element and calls it instead of implementing its own render logic. This component can be termed the 'Container Component' while the React element or component we are returning can be termed a 'presentation Component'.


// example 1
<Container render={prop => (
 <Presentation {...props} />
)} />

// example 2
<Container children={prop => (
 <Presentation {...props} />
)} />

// example 3
<Container>
 {props => (
    <Presentation {...props} />
  )}
</Container>

The three examples above implement the render props pattern, where 'Container' is our container Component that renders a presentation component...well, literally. We can put whatever stateful logic we need to reuse in the Container component, and the results along with an 'updating function' if needed can be passed down to any other component it renders. That's "render props" in a nutshell.

What is the alternative?

What if instead of having the container, we have a custom hook that implements this logic and returns the result with an 'updating function'. By 'updating function' I mean a function that updates the state in the container or the result from our hook. How we can implement this is the exact reason we are here. Let's make use of a "cat and mouse" example I found in the official React documentation for render props. We will take a look at the "render props" example and try to refactor it to use a custom hook.

Render Props Example

If we have a component that listens to the mouse movement and sets the pointer position in the state as shown below:

class Mouse extends React.Component {
  constructor(props) {
    super(props);
    this.handleMouseMove = this.handleMouseMove.bind(this);
    this.state = { x: 0, y: 0 };
  }

  handleMouseMove(event) {
    this.setState({
      x: event.clientX,
      y: event.clientY
    });
  }

  render() {
    return (
      <div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>

        {/*
          Instead of providing a static representation of what <Mouse> renders,
          use the `render` prop to dynamically determine what to render.
        */}
        {this.props.render(this.state)}
      </div>
    );
  }
}

Any component that needs to render elements based on the position of the mouse can be rendered by our mouse component. Let's define a Cat component that renders the image of a cat chasing the mouse pointer.

class Cat extends React.Component {
  render() {
    const mouse = this.props.mouse;
    return (
      <img src="/cat.jpg" style={{ position: 'absolute', left: mouse.x, top: 
      mouse.y }} />
    );
  }
}

We don't need to rewrite the logic for getting the pointer position but rather we can extend this logic from the Mouse component like this:

class MouseTracker extends React.Component {
  render() {
    return (
      <div>
        <h1>Move the mouse around!</h1>
        <Mouse render={mouse => (
          <Cat mouse={mouse} />
        )}/>
      </div>
    );
  }
}

This will render the Cat component passing down the position of the mouse as a prop. We can reuse the logic in as many components as we need to.

The hook alternative

We are going to get rid of our 'Mouse' component and instead, create a hook to implement our mouse logic.

export function useMouse(initialValue = {x:0, y:0}) {
  const [position, setPosition] = useState(initialValue);
  const handleMouseMove = (event) => {
    setPosition({
      x: event.clientX,
      y: event.clientY
    });
  }
  return [position, handleMouseMove];
}

We have just defined a hook called useMouse. It's a convention that the function name should start with 'use' so that people know it is a hook. Our useMouse hook returns the position of the mouse and a function to update that position. Let's see how we can use this in our Cat component.

function Cat() {
  const [position, setMousePosition] = useMouse();

  return (
    <div style={{ height: '100%' }} onMouseMove={setMousePosition}>
      <img src="/cat.jpg" style={{ position: 'absolute', left: position.x, top: 
      position.y }} />
    );
    </div>
}

What word comes to mind, simple?..neat?..concise? Maybe all three. Any component that needs to get the mouse position as it moves can use this hook.
Using this pattern improves the readability and maintainability of complex react code and it will also help to prevent having very large and deeply nested component trees. We can reuse auth status, user information and even form handling logic by creating custom hooks. They can also be used in place of HOCs(Higher Order Components) in React.

useContext: A good reason to drop Redux

Nwakwoke Patrick Nnaemeka — Sun, 21 Apr 2019 19:31:19 +0000

Since react announced its support for hooks in a stable version of react, I haven't created any new class based components. A lot of us still use redux to manage our state but the truth is we do not always need this extra layer of complexity. With react's context API you can also share data across various components.

I assume you already have at least a little knowledge of react, react-hooks and redux. If you have no knowledge of redux, no problem, you can skip directly to using context.

Let's say we have an authentication data that contains our login status and user details, and also data containing a list of articles that we will like to display at various parts of our app. If we are using redux, we will be able to share this data across various components in our app using a concept commonly known as 'mapStateToProps' by connecting our component with the redux store.

import react from 'react';
import connect from 'react-redux';

function User(props) {
  const getUserArticles = (articles) => articles
    .filter(article => article.userId === props.user.id);
  return (
    <div>
      <h1>{`${props.user.name}'s Article`}</h1>
      <ul>
        {getUserArticles(props.articles)
          .map(article => <li key={article.id}>{article.title}</li>)}
      </ul>
    </div>
  );
}
const mapStateToProps = ({auth, article}) => ({
  user: auth.user,
  articles: article.articles
});

export default connect(mapStateToProps)(User);

That's a typical example of what our component could look like if we managed the auth and article states via redux. Our articles and authentication data is being fetched by our service behind the scene and dispatched to our redux state. This state is now accessible by any component the same way we've done above.

Using Context

We can achieve this same data sharing across components with context. Creating a context in react looks like:

const MyContext = React.createContext(defaultValue);

createContext takes default value as a parameter, which is only used if no matching provider is found above the consuming component's tree.

Let us create the article and authentication contexts.

import React from "react";

export const authContext = React.createContext({
  loggedIn: false,
  user: {},
  updateAuth: () => {}
});

export const articleContext = React.createContext({
  articles: [],
  updateArticles: () => {}
});

Every Context object comes with a Provider React component that allows consuming components to subscribe to context changes.

<MyContext.Provider value={/* some value */}>

Any functional Component can read a context and subscribe to its changes by using the hook
useContext

const value = useContext(MyContext)

According to the react docs, useContext accepts a context object (the value returned from React.createContext) and returns the current context value for that context.
All Components that are descendants of a Provider will re-render whenever the Provider’s value prop changes if they are subscribed to that provider.

Let's see how we can make use of the authContext and the articleContext we defined earlier.

import React, { useState } from "react";
import { authContext, articleContext } from "./contexts";
import UserComponent from "./user";

function App() {
  const [auth, setAuth] = useState({
    loggedIn: false,
    user: {},
    updateAuth: update => setAuth(auth => ({ ...auth, ...update }))
  });
  const [articles, setArticles] = useState({
    articles: [],
    updateArticles: articles => setArticles(articles)
  });

  return (
    <authContext.Provider value={auth}>
      <articleContext.Provider value={articles}>
        <UserComponent />
      </articleContext.Provider>
    </authContext.Provider>
  );
}

export default App;

At this point you probably have two questions;

Why not pass the value directly into the value prop for the providers?
Why are we defining another update method when the state hook already returns an update method?

For the first question, there is a caveat that is stated in the react doc. it says: Because context uses reference identity to determine when to re-render, there are some gotchas that could trigger unintentional renders in consumers when a provider’s parent re-renders. For example, the code below will re-render all consumers every time the Provider re-renders because a new object is always created for value:

function App() {
  return (
    <Provider value={{something: 'something'}}>
      <Toolbar />
    </Provider>
  );
}

To get around this, lift the value into the parent’s state.

For the second question, we need to make the update function really easy to use, so that the user only worries about the current value property they are trying to update without overwriting or removing the unchanged properties. Our update functions merge the new values with the old ones using a spread operator.

When using redux, we dispatch actions to update our redux state. A typical action dispatch will be done this way:

store.dispatch({type: 'update_articles', value: articles })

And we go ahead to use the dispatched actions in our reducer by doing something like

export const articlesreducer = (state = {}, action) => {
  switch(action.type) {
    case('update_articles'):
      return { ...state, articles: action.value };
    default:
      return state;
  }
}

That was a typical example of how we would update our redux state. With Context, we can do away with all of that. If you've never used redux you probably didn't need to see that, my apologies

Now we are going to refactor our user component and mock a promise based service that contains functions for fetching auth and articles data.

Here is what our mocked service could look like:

export const getAuth = () => {
  return new Promise(resolve => {
    resolve({
      loggedIn: true,
      user: {
        name: "Jon Doe",
        id: "1"
      }
    });
  });
};

export const getArticles = () => {
  return new Promise(resolve => {
    resolve([
      { id: "1", userId: "1", title: "A few good men" },
      { id: "2", userId: "1", title: "Two and a half guns" },
      { id: "3", userId: "1", title: "Hey brother" }
    ]);
  });
};

We can now refactor our user component from the one connected to a redux store to this one that subscribes to the context providers:

import React, { useContext, useEffect } from "react";
import { authContext, articleContext } from "./contexts";
import { getAuth, getArticles } from "./services";

function User() {
  const { articles, updateArticles } = useContext(articleContext);
  const auth = useContext(authContext);

  useEffect(() => {
    getAuth().then(data => auth.updateAuth(data));
    getArticles().then(articles => updateArticles({ articles }));
  }, [auth.updateAuth, updateArticles]);

  const getUserArticles = articles =>
    articles.filter(article => article.userId === auth.user.id);
  return (
    <div>
      <h1>{`${auth.user.name}'s Article`}</h1>
      <ul>
        {getUserArticles(articles).map(article => (
          <li key={article.id}>{article.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default User;

The user component now reads values from the article and auth contexts and rerenders if there is a change in the value of either of these. We can also update the contexts from the user component.

This form of data management might seem like an overkill for this little project we have created but the purpose of this is just to see how we can use react's context API in place of redux. This will be ideal in a larger application where various components with different levels of nesting need access to the auth and articles data.

I will advise you head over to the official react documentation site to learn more about the context API. For more reference, the code in this article lives in this codesandbox

Setup React + Laravel without laravel mix

Nwakwoke Patrick Nnaemeka — Fri, 12 Apr 2019 19:31:39 +0000

When it comes to web development, my goto library on the front end is React, and on the backend, I love to use Laravel because of the many built-in goodies it contains.

More than once i have found my self having to host my backend and my frontend separately, and running multiple deployments. Although it has its benefit, it can be quite expensive to maintain. Deploying your react and laravel app on the same server still gives you most of the benefits of deploying them separately. They might live on the same server but they are still two reusable entities communicating with each other. Let me show how you can set up your laravel and react project on one server.

For this task, we are going to be making use of Babel, webpack and react-hot-loader to compile our react assets into the laravel view.

Laravel

First, we are going to create our laravel project. We can do that by running the command.


 laravel new react-laravel

You can learn more about creating a laravel project here.

In our /resources/view/ folder, we can find a file named welcome.blade.php. Delete the file and create a new file called index.blade.php with the following content.

Line 16 checks if we are running in development mode so that it can fetch the compiled asset from the webpack dev server. It's important that you update your APP_ENV in the env file to 'production' when in a production environment.

Then we have to modify our route to point to that file. So will head into our routes folder and open web.php. We will replace 'welcome' with 'index' and our file should end up looking like this:

package.json

Now it's time to modify our package.json file which can be found in the root of the project. A number of modules will not be needed, so we should modify the file to look like this.

We will install all we need along the line.

React

Now we want to add react to our laravel project. Create a folder named 'src' in the root of our laravel project. Next, let's get Babel

Babel

To install babel, let's run ```npm

install --save-dev @babel/core@7.1.0 @babel/cli@7.1.0 @babel/preset-env@7.1.0 @babel/preset-react@7.0.0


We won't go into details of what each of this packages do so that this article doesn't get too long, but I will advise that you do your little research if you are not yet familiar with them.

Create a file named `.babelrc` in the project root. We will be setting the presets for babel by inputting this content in the file.


  


  
  
  Webpack


Now we need to get and configure webpack. To do that we will need to install a few more packages. Let's run ```

npm install --save-dev webpack@4.19.1 webpack-cli@3.1.1 webpack-dev-server@3.1.8 style-loader@0.23.0 css-loader@1.0.0 babel-loader@8.0.2 


Webpack uses loaders to process different types of files. it also comes with a development server that will use to bundle and serve our React project during development. You can do some research on webpack if you are not already familiar with it.

Create a new file named `webpack.config.js` also at the root of the laravel project. This file exports an object which will be our webpack configuration.

<div class="ltag_gist-liquid-tag">
  <script id="gist-ltag" src="https://gist.github.com/codenaz/ae323388ecbb703cbaa64553bc3fac18.js"></script>
</div>


This configuration tells webpack what file to start bundling from (entry), the type of files that are transformed(module), files to leave out(exclude), and where it saves the bundled file to (output).

Let's go ahead and install a loader for processing sass files since it’s part of the modules we’ve defined in our config.
</code></pre></div>
<p><br>
 npm install sass sass-loader<br>
</p>
<div class="highlight"><pre class="highlight plaintext"><code>
You can add more loaders depending on your needs.

### React

Next, we'll add two more packages by running ```npm

 install --save react@16.18.4 react-dom@16.8.4

```. Notice we are installing these as regular dependencies.

We can now create our `index.js` file in the `src` directory. This is the file that tells react when to hook into the dom.

<div class="ltag_gist-liquid-tag">
  <script id="gist-ltag" src="https://gist.github.com/codenaz/2a3f397a6472916279f406bb9a3ca172.js"></script>
</div>


We can also create another file in `src` called `App.js`. All these should be familiar if you've previously worked with react.

<div class="ltag_gist-liquid-tag">
  <script id="gist-ltag" src="https://gist.github.com/codenaz/76c9256fd950235c064da2001f0b941d.js"></script>
</div>


From our webpack config, our app can also process css, so will create and add a css file. Create a folder named `style` in our `src` directory and in the `style` directory create a filed named `App.css`. We will add some style to this file

<div class="ltag_gist-liquid-tag">
  <script id="gist-ltag" src="https://gist.github.com/codenaz/95ebfb7bffdeadcfb1cb1d7e48a233bc.js"></script>
</div>
.

Your final project struture should be similar to this:

</code></pre></div>
<p></p>

<p>.<br>
+-- app<br>
+-- bootstrap<br>
+-- config<br>
+-- database<br>
+-- node_modules<br>
+-- public<br>
| +-- .htacess<br>
| +-- favicon.ico<br>
| +-- index.html<br>
| +-- index.php<br>
+-- resources<br>
| +-- views<br>
| | +-- index.blade.php<br>
+-- routes<br>
+-- src<br>
| +-- style<br>
| | +-- App.css<br>
| +-- App.js<br>
| +-- index.js<br>
+-- storage<br>
+-- test<br>
+-- vendor<br>
+-- .env<br>
+-- .env.example<br>
+-- .babelrc<br>
+-- .gitignore<br>
+-- artisan<br>
+-- composer.json<br>
+-- composer.lock<br>
+-- package-lock.json<br>
+-- package.json<br>
+-- server.php<br>
+-- webpack.config.js</p>

<p></p>
<div class="highlight"><pre class="highlight plaintext"><code>
We now have a function React &amp; Laravel app! We can start up our dev server to compile our assets by running ```npm

 start

``` and the start our php server to run the laravel app by running ```php

 artisan serve

``` in the terminal. We should see our app on `http://localhost:8000`

## HMR
If you run the server now, you will notice none of our changes on react updates the app. That is because HMR doesn't know what to replace yet. 

We are going to complete our setup by installing `react-hot-loader`. So run ```npm

 install --save react-hot-loader

```.

Now import react-hot-loader in our app and wrap it around the exported component. Your App.js should now look like this

<div class="ltag_gist-liquid-tag">
  <script id="gist-ltag" src="https://gist.github.com/codenaz/9ea516e93ea379709fbac47489199fd1.js"></script>
</div>
.

Now our app will be updated as we make changes to the react app. Changing our PHP files will not cause the app to update, just the js files in the `src` folder.

When your app is ready for deployment, run ```npm

 run build

``` to build our asset and update the APP_ENV in our env file to 'production' so that laravel will fetch the built asset and not the compiled asset in the dev server.

## Conclusion
You can go ahead an tweak the setup according to your need. If anything is still unclear or you want another reference, [here](https://github.com/codenaz/reavel) is a repo with the implementation on Github.

</code></pre></div>