DEV Community: Eduardo P. Rivero

Not well known attributes for ordered list in HTML

Eduardo P. Rivero — Mon, 23 Mar 2020 12:41:46 +0000

In html exist the ol tag that allow you to show an ordered list.

<ol>
    <li>Banana</li>
    <li>Strawberry</li>
    <li>Peach</li>
    <li>Orange</li>
    <li>Lemon</li>
</ol

and for the above code the result is the following:

But what about if you want to change the order number? You can use the value attribute for the li tag.

<ol>
    <li value="5">Banana</li>
    <li value="4">Strawberry</li>
    <li value="3">Peach</li>
    <li value="2">Orange</li>
    <li value="1">Lemon</li>
</ol

and the result will be:

Great, but there is another attribute that may be useful and give you the same result with less code. I am talking about the reversed attribute

<ol reversed>
    <li>Banana</li>
    <li>Strawberry</li>
    <li>Peach</li>
    <li>Orange</li>
    <li>Lemon</li>
</ol

much better because of the "less code" part!

Ok but now you have a section where you need to show the Top Ten Fruits. I know! You are thinking in an easy solution, just mix the reversed attribute with the value attribute, right?

<ol reversed>
    <li value="10">Banana</li>
    <li>Strawberry</li>
    <li>Peach</li>
    <li>Orange</li>
    <li>Lemon</li>
</ol

Sure, that get the job done, but in this case there is other way using the start attribute.

<ol reversed start="10">
    <li>Banana</li>
    <li>Strawberry</li>
    <li>Peach</li>
    <li>Orange</li>
    <li>Lemon</li>
</ol

Good now you can have the same behavior but using only attributes for the ol tag.

Browser Support

All these examples will work fine in basically every browser, but worth mentioning a couple of things:

start attribute for the ol tag was deprecated in html 4, but still supported in html 5.
value attribute for the li tag was deprecated in html 4, but still supported in html 5.

Hope it helps!

Easy https server with nextjs and ngrok

Eduardo P. Rivero — Sun, 22 Mar 2020 17:24:17 +0000

Original post in my blog

So I had this app where you must share a link to other person and I remembered about the web share API. After a few lines of code I was able to have the feature almost ready, but then I realize this feature only works under an HTTPS connection.

You probably already know nextjs is so great, but in order to have an https server on localhost you need to create a custom server, generate certificates with openssl and I was not in the mood to do that work.

I was looking for a solution that save me the task to write a custom server so I decide to combine nextjs with ngrok and it was very easy, keep reading to found how it works:

First, you will need to install the dependencies for next

npm install next react react-dom

Now let's install ngrok as a dev depedency

npm install ngrok -D

ok so let's create the scripts in our package.json

{
    "scripts": {
        "dev": "next",
        "ngrok": "ngrok http 3000"
    }
}

The dev script is just executing the next command and will launch the server without https support. And the ngrok script is going to create a tunnel between your local server and the internet. In order to do that ngrok needs the port where your local server is running, in our case the default port for next is 3000. That's why the script is ngrok http 3000

Ok now let's create the pages directory and an index file inside of it.

// /pages/index.js

function Home() {
  async function onShare() {
    await navigator.share({
      title: "Best React Framework",
      url: "https://nextjs.com"
    });
  }

  return (
    <div>
      <button onClick={onShare}>Share</button>
    </div>
  );
}

export default Home;

Nothing fancy but works for our example, a simple page with a button and a click event associated to it. If the button is pressed it will call the web share api and open the native share dialog of the operating system.

Running the servers

Ok let's run the next server first

npm run dev

Once the server is ready you will see in your terminal a message like this:

[ ready ] compiled successfully - ready on http://localhost:3000

Now is the turn for ngrok, let's run the script

npm run ngrok

Once ngrok is ready it will show you a log like this:

Session Expires               7 hours, 35 minutes
Version                       2.3.35
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://70d96b45.ngrok.io -> http://localhost:3000
Forwarding                    https://70d96b45.ngrok.io -> http://localhost:3000

Following the above logs you have two urls now:

http://70d96b45.ngrok.io # http server
https://70d96b45.ngrok.io # https server

Ok since the web share API right now only works on Safari for IOS and Chrome for android I will open the url in my iphone and tap the button.

And that's it you can test this kind of features without a custom server, boring steps with openssl. If you want more info about ngrok you can check the website.

Hope it helps!

Multiple SQL Inserts and Transactions with Objection Js

Eduardo P. Rivero — Sun, 12 Jan 2020 17:39:07 +0000

Original Post in my blog

Let's assume we have an application where we need to save the information about the sales of a company. For that purpose we have will create a database and two different tables:

CREATE DATABASE sales_company;

USE sales_company;

CREATE TABLE `sales` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `total` decimal(18,2) NOT NULL,
  `subtotal` decimal(18,2) NOT NULL,
  `taxes` decimal(18,2) NOT NULL,
  PRIMARY KEY (`id`)
);

CREATE TABLE `sales_details` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `sale_id` int(11) NOT NULL,
  `quantity` int(11) NOT NULL,
  `price` decimal(18, 2) NOT NULL,
  `product` text NOT NULL,
  PRIMARY KEY (`id`),
  KEY `sale_id` (`sale_id`),
  CONSTRAINT `sales_details_ibfk_1` FOREIGN KEY (`sale_id`) REFERENCES `sales` (`id`)
);

First table called sales save information about the amounts of the sale and in the table sales_details we are going to write the information of the product.
Of course you need more data for in the real world, but for the purposes of this demo it is good enough.

Defining Objection Models

Since we are using Objection as our ORM let's start creating the two models, one for each table.

// Sale.js
const { Model } = require("objection");

class Sale extends Model {
  static get tableName() {
    return "sales";
  }
}

module.exports = Sale;

And now the model for the sales_details table

// SaleDetail.js
const { Model } = require("objection");

class SaleDetail extends Model {
  static get tableName() {
    return "sales_details";
  }
}

module.exports = SaleDetail;

Great, but now we need to establish the relationship between both models. In order to do that let's use the relationMappings method in the Sale.js file.

// Sale.js
const { Model } = require("objection");
const path = require("path");

class Sale extends Model {
  static get tableName() {
    return "sales";
  }

  // this is the new code
  static get relationMappings() {
    return {
      details: {
        relation: Model.HasManyRelation,
        modelClass: path.join(__dirname, "SaleDetail"),
        join: {
          from: "sales.id",
          to: "sales_details.sale_id"
        }
      }
    };
  }
}

module.exports = Sale;

We are defining a details property (you can name this variable whatever you want) for the Sale model and establishing the relationship between both tables through the id column from the sales table
to the sale_id field of the sales_details table.

Insert records in two tables using insertGraph

Now we can use the insertGraph method to insert data in both tables at the same time.

// Let's create the connection to our database
// connection.js
const { Model } = require("objection");
const Knex = require("knex");

const knex = Knex({
  client: "mysql2",
  debug: true,
  connection: {
    database: "sales",
    password: "root",
    user: "root",
    host: "localhost"
  }
});

Model.knex(knex);

Ok now let's create an object that will represent a new sale

const newSale = {
  subtotal: 10,
  taxes: 8,
  total: 18,
  // property details because that's how we
  // call it in the relationMappings
  details: [
    {
      product: "Tomato",
      quantity: 1,
      price: 4
    },
    {
      product: "Potato",
      quantity: 2,
      price: 3
    }
  ]
};

A simple javascript object with all the information for our tables, let's make the insert

// multiple-inserts.js
require("./connection");
const Sale = require("./Sale.js");

async function saveSale() {
  const newSale = {
    subtotal: 10,
    taxes: 8,
    total: 18,
    // property details because that's how we
    // call it in the relationMappings
    details: [
      {
        product: "Tomato",
        quantity: 1,
        price: 4
      },
      {
        product: "Potato",
        quantity: 2,
        price: 3
      }
    ]
  };
  const saleInserted = await Sale.query().insertGraph(newSale);
  console.log(`New Sale Id is ${saleInserted.id}`);
  return saleInserted;
}

saveSale();

Executing this file will show us in the terminal 3 different insert sql queries.

That's great, but you know things in real life can be messy sometimes, what about if we have some bug in our code and the quantity of one product get the value of null? Let's see what happen.

// multiple-insert-fail.js
require("./connection");
const Sale = require("./Sale.js");

async function saveSaleNullQuantity() {
  const newSale = {
    subtotal: 10,
    taxes: 8,
    total: 18,
    // property details because that's how we
    // call it in the relationMappings
    details: [
      {
        product: "Tomato",
        // some way this value is null 😭
        quantity: null,
        price: 4
      },
      {
        product: "Potato",
        quantity: 2,
        price: 3
      }
    ]
  };
  const saleInserted = await Sale.query().insertGraph(newSale);
  console.log(`New Sale Id is ${saleInserted.id}`);
  return saleInserted;
}

saveSaleNullQuantity();

Running this script will throw an error because the quantity column does not allow nulls.

Ok! An error, but let's see our sales table just in case.

You can see the records in the sales and sales_details table were created! Not cool objection! Not cool! 😒

You are mad now, but you remember the introduction to SQL course in high school and realize that all was your fault! If you want to avoid this kind of situations you need to use an SQL TRANSACTION!

Transactions in Objection.js

Creating a transaction is kinda easy

// multiple-insert-with-transaction.js
require("./connection");
const Sale = require("./Sale.js");

async function saveSaleWithTransaction() {
  const newSale = {
    subtotal: 10,
    taxes: 8,
    total: 18,
    // property details because that's how we
    // call it in the relationMappings
    details: [
      {
        product: "Tomato",
        // some way this value is null 😭
        quantity: null,
        price: 4
      },
      {
        product: "Potato",
        quantity: 2,
        price: 3
      }
    ]
  };
  try {
    const tx = await Sale.transaction(async trx => {
        const saleInserted = await Sale.query(trx).insertGraph(newSale);
      return saleInserted;
    });
  } catch(err) {
    // Here transaction has already been rolled back
    console.log(err);
  }
}

saveSaleWithTransaction();

Time to run this script and an error again, but now you can verify that none record was inserted to the tables 🎊 .

A few things about the transaction method of the Sale model

You can use any objection model inside the transaction function.
The trx variable always must be passed to the query method of all the models that are called inside the transaction function
The transaction will be consider committed if the promise function is resolved, that's why I return the saleInserted object at the end.
If any error is thrown inside the function it will automatically *rollback the transaction.
I am using a MySql database but you can use any supported database for objection like postgres or sqlite.

You can clone and play with the code in the github repo: https://github.com/eperedo/objectionjs-examples/tree/master/src/multiple-insert-transactions

Multiple database connections in objectionjs and knex

Eduardo P. Rivero — Tue, 31 Dec 2019 00:47:34 +0000

Normally you have one database for your app, but when your app starts to grow it's normal to create more databases to handle more traffic in an efficient way.
So the question is:

Is objectionjs ready for this?

Spoiler Alert: YES.

Let's assume we have 2 databases called: db_one and db_two

and what we want to achieve is to connect one of our objectionjs Models to the database db_one and the other one to the database db_two.

Let's start creating our models.

// models/Product.js
const { Model } = require("objection");

class Product extends Model {
  static get tableName() {
    return "products";
  }
}

module.exports = Product;

// models/Category.js

const { Model } = require("objection");

class Category extends Model {
  static get tableName() {
    return "categories";
  }
}

module.exports = Category;

Nothing new here, but how can we tell objectionjs to give our models a specific database connection?

Introducing bindKnex

Every objectionjs model has this method called bindKnex and it accepts one parameter: a valid knexjs database connection. And it will return the same model, but binded to a knexjs connection.

Let's see the code to have a better understanding of it.

// index.js

const Knex = require("knex");

// connection for our db_one database
const cnDbOne = Knex({
  client: "mysql2",
  connection: {
    database: "localhost",
    user: "root",
    password: "root",
    database: "db_one"
  }
});

// connection for our db_two database
const cnDbTwo = Knex({
  client: "mysql2",
  connection: {
    database: "localhost",
    user: "root",
    password: "root",
    database: "db_two"
  }
});

// require our models

const ProductModel = require("./models/Product.js");

const CategoryModel = require("./models/Category.js");

const Product = ProductModel.bindKnex(cnDbOne);

const Category = CategoryModel.bindKnex(cnDbTwo);

// making queries

// db_one
// select * from products
Product.query().then(console.log);

// db_two
// select * from categories
Category.query().then(console.log);

Now we can execute our application

node index.js

and each model will make a query to a different database.

We can easily check this using the SHOW PROCESSLIST sql query in our mysql terminal.

SHOW PROCESSLIST;

and you can see our app has generated two connections for each database.

That's it! 🚀

Learning NextJs - Day 11

Eduardo P. Rivero — Sun, 28 Jul 2019 21:11:28 +0000

For this day I want to talk about how NextJs deal with Http Errors. The way to customize not only the design of the error page but also the actual status code sent to the clients.

Let's assume we have a simple application with two pages, one for the list of users and another to see the details page of each user.
That means we have two valid urls in our app.

/ # root url that show a list of users
/users/[id] # dynamic url that will show the detail of one user

Let's see quickly the code of one of our pages:

// pages/index.js

import Link from "next/link";

const users = [
  {
    id: 1,
    name: "Eduardo",
    age: 20
  },
  {
    id: 2,
    name: "Cinthya",
    age: 30
  }
];

function Home() {
  return (
    <ul>
      {users.map(user => {
        return (
          <li key={user.id}>
            <Link href={`/users/${user.id}`}>
              <a>{user.name}</a>
            </Link>
          </li>
        );
      })}
    </ul>
  );
}

export default Home;

Nothing weird here, just iterating an array of users and show them on the page.
Now let's create the details page where we can show all the information of each user.

// pages/users/[id].js
const users = [
  {
    id: 1,
    name: "Eduardo",
    age: 20
  },
  {
    id: 2,
    name: "Cinthya",
    age: 30
  }
];

function Details({ user }) {
  return (
    <div>
      <h1>Name: {user.name}</h1>
      <p>Age: {user.age}</p>
      <p>Id: {user.id}</p>
    </div>
  );
}

function getInitialProps({ query, res }) {
  const { id } = query;
  const user = users.find(u => u.id == id);
  return {
    user: user || {}
  };
}

Details.getInitialProps = getInitialProps;

export default Details;

I know repeating the users array is not ideal, but since the goal of this post is NextJs error pages, let's pretend that's ok. This page get the id of the user from the url and then search if that user exist on the users array. Then return the result so NextJs can pass the value as a prop to the Details component.

Since the app only have two routes if you type any other url in our browser NextJs will show the default Error Page. Let's enter the following url in the browser

/i-love-tacos

NextJs is going to show you this page:

And if you open the developer tools you can see the status code of that response is 404 Not Found.

But what about if you type the url:

/users/3

This match the dynamic page: pages/users/[id].js, but in the users array there is no user with ID equals to 3 so according the current functionality of this page it should return an empty object as a prop to the page.

Instead showing a weird page with incomplete information let's change that and show the default 404 page of NextJs.

// pages/users/[id].js
function getInitialProps({ query }) {
  const { id } = query;
  const user = users.find(u => u.id == id);
  return {
    user: user || {},
    statusCode: user ? 200 : 404
  };
}

First we add a new statusCode variable to our result object, the value of this variable depends if the user is found in the users array. If the user exist the statusCode will be 200, otherwise 404.

But how NextJs could know that we want to show the default Error page? It is quite easy, you need to return the default error component.

// pages/users/[id].js
import Error from "next/error";

function Details({ user, statusCode }) {
  if (statusCode === 404) {
    // This line will show the default Error Page
    return <Error statusCode={statusCode} />;
  }

  return (
    <div>
      <h1>Name: {user.name}</h1>
      <p>Age: {user.age}</p>
      <p>Id: {user.id}</p>
    </div>
  );
}

Pretty easy, right? Now you can see the error page when an nonexistent user is requested. And if you open the developer tools
you can see the 200 status code is returned.
But you are sending the error page! Why is the status code still 200?

Well the response that NextJs is giving you is not responsability of the Error component. If you want to show a different status code you need to set it in your response as well. Let's do that.

// pages/users/[id].js
function getInitialProps({ query, res }) {
  const { id } = query;
  const user = users.find(u => u.id == id);
  // The find method return undefined if the condition
  // does not match
  if (!user) {
    // here you can assume user is undefined that means
    // it is an nonexistent user so change the status code
    // of the response.
    res.statusCode = 404;
  }
  return {
    user: user || {},
    statusCode: user ? 200 : 404;
  };
}

And if you test your page again you will see the error page and the correct status code as well!

Custom Error Page

What about if you do not like the default Error page? Well you can replace it!
In order to do that first you will need a new file called _error.js in your pages folder.

// pages/_error.js

function CustomError({ statusCode }) {
  return (
    <figure>
      <img
        alt="Showing a properly cat according the status code"
        width="100%"
        src={`https://http.cat/${statusCode}`}
      />
      <figcaption>
        <h1>{statusCode}</h1>
      </figcaption>
    </figure>
  );
}

function getInitialProps({ res, err }) {
  let statusCode;
  // If the res variable is defined it means nextjs
  // is in server side
  if (res) {
    statusCode = res.statusCode;
  } else if (err) {
    // if there is any error in the app it should
    // return the status code from here
    statusCode = err.statusCode;
  } else {
    // Something really bad/weird happen and status code
    // cannot be determined.
    statusCode = null;
  }
  return { statusCode };
}

CustomError.getInitialProps = getInitialProps;

export default CustomError;

Now in the details page you need to replace the Error component by the new one:

// pages/users/[id].js
import Error from "./_error.js";

And if you try again you will see a lovely cat telling you
got a 404 error page.

Play with the full code here:
https://github.com/eperedo/learning-nextjs/tree/nextjs-day-11-error

Things you learned!

Now you can control how and when show the default error page
You can modify the status code of your responses to keep an equivalent with the current Error you are displaying.
You can customize the aspect of the error page

Learning NextJs 9! - Day 10

Eduardo P. Rivero — Fri, 12 Jul 2019 01:58:45 +0000

So in the middle of my learning process the team of nextjs decided to make a huge release and I am going to cover 1 of the many really great features that they include in the last version:

Dynamic Routes

So you probably remember that for dynamic routes in nextjs you normally need to create a custom server. This can sound like something difficult to do but actually it is really simple.

The nextjs team realized that it is a common task to do in a real web application so they decide to build this feature into the core of nextjs.

Let's create a new nextjs app with 3 routes:

A Home page, nothing special here.

A users page, it is going to show a list of users

/users

A user profile page to show the information of one user

/users/{user-id}

There's nothing new in the installation process with this version, same as previous

npm install next@9.0.1 react react-dom

Now let's create our pages folder, and inside of it the following structure to achieve our 3 routes

pages
  index.js # this is going to generate the home url
  users
    index.js # this is going to generate the users url (/users)
    [id].js # Square brackets means dynamic parameters for nextjs, it is going to # generate the url: /users/{id}

Yes, is that easy! If you want to create a dynamic url you need to define the dynamic part inside square brackets, and the name that you put in there is going to be added to the query object in your getInitialProps method.

Ok let's create the components for each of our pages. If you are not familiar with nextjs pages you can see an introduction here

// pages/index.js
import Link from 'next/link';

function Home() {
  return (
   <div>
     <h1>Welcome to NextJs 9!</h1>
      <Link href="/users">
        <a>My Users</a>
      </Link>
   </div>
  );
}

export default Home;

Nothing new here, just a welcome message an a Link to the users page

import Link from 'next/link';

const users = [
  {
    id: 1,
    name: 'Eduardo',
  },
  {
    id: 2,
    name: 'Cinthya',
  },
];

function Users() {
  return (
    <ul>
      {users.map(user => {
        return (
          <li key={user.id}>
            <Link href={`/users/${user.id}`}>
              <a>
                {user.name}
              </a>
            </Link>
          </li>
        );
      })}
    </ul>
  );
}

export default Users;

I am using an array of users to make code shorter, but you totally can fetch data from an API or wherever you want.

And now our dynamic page

function UserProfile({ user }) {
  return (
    <h1>
      Hello! My ID is {user.id}
    </h1>
  );
}

async function getInitialProps({ query }) {
  // Since our file name is [id].js
  // nextjs is going to add the value of
  const { id } = query;
  return {
    user: {
      id,
    },
  };
}

UserProfile.getInitialProps = getInitialProps;

export default UserProfile;

The implementation is the same as having a custom server, so kudos to nextjs team to adding great features without major changes!

Multiple dynamic parameters

Ok but what about if you want the dynamic profile to be a little more complex, like instead

/users/{id}

you want this:

/users/{id}/{name}/profile

Not a challenge for nextjs since the new file system API supports multiple parameters in folders as well.

You can create the above route using this folder structure

pages
  users
    [id]
      [name]
        profile.js

now our query object will have two properties: id and name

// /users/[id]/[name]/profile.js

function UserProfile({ user }) {
  return (
    <h1>
      Hello! My ID is {user.id}, but you can call me {user.name}
    </h1>
  );
}

async function getInitialProps({ query }) {
  const { id, name } = query;
  return {
    user: {
      id,
      name,
    },
  };
}

UserProfile.getInitialProps = getInitialProps;

export default UserProfile;

And of course to get a fully example we need to change the href prop in our users page as well

// users/index.js
import Link from 'next/link';

const users = [
  {
    id: 1,
    name: 'Eduardo',
  },
  {
    id: 2,
    name: 'Cinthya',
  },
];

function Users() {
  return (
    <ul>
      {users.map(user => {
        return (
          <li key={user.id}>
            <Link href={`/users/${user.id}/{user.name}/profile`}>
              <a>
                {user.name}
              </a>
            </Link>
          </li>
        );
      })}
    </ul>
  );
}

export default Users;

Things We learned

You can create dynamic routes using the File System API.
You can apply multiple params for a dynamic route using square brackets in folders and files.
NextJs is awesome!

Creating pages for a Gatsby/React Website

Eduardo P. Rivero — Sat, 06 Jul 2019 15:20:29 +0000

Now that you can create a new gatsby project
let's continues with a fundamental feature that gatsby has built in: Pages

A gatsby page is just a React component, but thanks to gatsby it will generate a page in our website. This means that if you create a page
called "users.js" automatically gatsby will call that file when you go to the url /users in your development server.

Creating Gatsby Pages

If you open the project that we create in the previous post you will see a folder structure like this

/src
  /pages
    index.js
/static
...
# other files

In a first look is easy to assume that every time you need a new route/url in your website you need to create
a react component inside the pages folder.

If you open the index.js you can see a simple React component, actually a FUNCTION component.

import React from "react"

export default () => <div>Hello world!</div>

I love arrow functions, but not this much so I will rewrite this component to something more fun (at least to me!)

import React from "react"

function Index() {
  return (
    <div>Hello world!</div>
  );
}

export default Index;

Ok now my brain feels better.

Let's create a website that will have two pages:

/ # root of the project it will
/customers # a page that will show information about our customers

Since the root page is already created, let's create the customers page.

import React from 'react';

const customers = [
  {
    id: 1,
    email: 'george.bluth@reqres.in',
    first_name: 'George',
    last_name: 'Bluth',
    avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg',
  },
  {
    id: 2,
    email: 'janet.weaver@reqres.in',
    first_name: 'Janet',
    last_name: 'Weaver',
    avatar:
      'https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg',
  },
  {
    id: 3,
    email: 'emma.wong@reqres.in',
    first_name: 'Emma',
    last_name: 'Wong',
    avatar:
      'https://s3.amazonaws.com/uifaces/faces/twitter/olegpogodaev/128.jpg',
  },
];

function Customers() {
  return customers.map((customer) => {
    return (
      <section key={customer.id}>
        <img src={customer.avatar} alt={customer.first_name} />
        <div>
          <h2>
            {customer.first_name} {customer.last_name}
          </h2>
          <p>{customer.email}</p>
        </div>
      </section>
    );
  });
}

export default Customers;

Let's go through this component, first we create an array called data, this array will contain the information about 3 people.
The data was taken from the reqres.in API since we do not want to complicate things by involving async requests
(yet!).
After that we define a simple react component that will loop through the array and show the name, email and avatar of each customer.
Ok with this information gatsby automatically will generate a /customers url for us. You do not need to restart the server, just go to
your browser and open the following url:

http://localhost:8000/customers

You should see something like this:

Ok pretty cool, but we need a good way to navigate between the home/customer pages, let's see how we can achieve that.

Navigating between Gastby pages

Gatsby has a special component called Link and it's pretty useful to navigate between the pages without reload the whole page.
Let's create a navigation section for our website, first in our index page.

import React from 'react';
// Special Gatsby Component
import { Link } from 'gatsby';

function Index() {
  return (
    <div>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/customers">Customers</Link>
          </li>
        </ul>
      </nav>
      <h1>Welcome to my Website</h1>
    </div>
  );
}

export default Index;

If you have used react-router before it's pratically the same component.
It has a to prop and you need to pass the url there.

Ok now copy the same code in the customers page.

import React from 'react';
import { Link } from 'gatsby';

const data = [
  {
    id: 1,
    email: 'george.bluth@reqres.in',
    first_name: 'George',
    last_name: 'Bluth',
    avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg',
  },
  {
    id: 2,
    email: 'janet.weaver@reqres.in',
    first_name: 'Janet',
    last_name: 'Weaver',
    avatar:
      'https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg',
  },
  {
    id: 3,
    email: 'emma.wong@reqres.in',
    first_name: 'Emma',
    last_name: 'Wong',
    avatar:
      'https://s3.amazonaws.com/uifaces/faces/twitter/olegpogodaev/128.jpg',
  },
];

function Customers() {
  return (
    <section>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/customers">Customers</Link>
          </li>
        </ul>
      </nav>
      {data.map((customer) => {
        return (
          <section key={customer.id}>
            <img src={customer.avatar} alt={customer.first_name} />
            <div>
              <h2>
                {customer.first_name} {customer.last_name}
              </h2>
              <p>{customer.email}</p>
            </div>
          </section>
        );
      })}
    </section>
  );
}

export default Customers;

Now the website has a easy way to navigate between the pages

but repeating the same code in both pages does not feel very good and probably against the react philosophy. So let's extract the navigation
in a react component.

Creating and using React components in Gatsby

Since Gatsby use React under the hoods we can create our UI in tiny reusable components. Let's create a component called TheNavBar.
Since we do not want to gatsby turn this component into a page, let's create a folder called components and inside of it the navbar.

Our folder structure will look like this:

src
  /components
    TheNavBar.js
  /pages

And our component:

import React from 'react';
import { Link } from 'gatsby';

function NavBar() {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/customers">Customers</Link>
        </li>
      </ul>
    </nav>
  );
}

export default NavBar;

How we can reuse this component inside our pages? Just importing like we normally do in a react application. First our home page

import React from 'react';
import NavBar from './../components/TheNavBar';

function Index() {
  return (
    <div>
      <NavBar />
      <h1>Welcome to my Website</h1>
    </div>
  );
}

export default Index;

And now the customers page

import React from 'react';
import NavBar from './../components/TheNavBar';

const data = [
  {
    id: 1,
    email: 'george.bluth@reqres.in',
    first_name: 'George',
    last_name: 'Bluth',
    avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg',
  },
  {
    id: 2,
    email: 'janet.weaver@reqres.in',
    first_name: 'Janet',
    last_name: 'Weaver',
    avatar:
      'https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg',
  },
  {
    id: 3,
    email: 'emma.wong@reqres.in',
    first_name: 'Emma',
    last_name: 'Wong',
    avatar:
      'https://s3.amazonaws.com/uifaces/faces/twitter/olegpogodaev/128.jpg',
  },
];

function Customers() {
  return (
    <section>
      <NavBar />
      {data.map((customer) => {
        return (
          <section key={customer.id}>
            <img src={customer.avatar} alt={customer.first_name} />
            <div>
              <h2>
                {customer.first_name} {customer.last_name}
              </h2>
              <p>{customer.email}</p>
            </div>
          </section>
        );
      })}
    </section>
  );
}

export default Customers;

Much cleaner and if you open your browser you will not see any change because we just did a small refactor, the functionality is the same!

Things that we learn

In this post we learned how gatsby turns our react components into powerfull pages.
How to create a navigation bar using the Link components.
How to reuse react components inside gatsby pages.

Github Repo

Building Websites with React and GatsbyJs

Eduardo P. Rivero — Fri, 05 Jul 2019 03:00:11 +0000

Creating a gatsby project is easy since you can use their wonderful CLI.

Gatsby CLI

In order to install the CLI you will need nodejs and npm/yarn on your computer. If you are a npm person you will need to type the following in your terminal

npm install -g gatsby-cli

And if you like yarn instead type this:

yarn add global gatsby-cli

Once the installation has finished you can check if the gatsby cli is working ok with the following command

gatsby --version
Gatsby CLI version: 2.7.7

Creating a new Gatsby Project

Now you can create a new gatsby project using the new command, this command takes 2 parameters, the first one is the name of your project and the second one is the template that will used as a base for the initial files.

gatsby new learning-gatsby https://github.com/gatsbyjs/gatsby-starter-hello-world

with the above command you are telling gatsby: "Hey, please create a new project that I would love to call "learning-gatsby" and please use the hello-world template". According the documentation it is a good template if you are just starting with gatsbyjs.

This step can take a longer time since it will clone the project and install automatically all the project's dependencies.

Once the whole process is done you can enter to the project folder and start the development server to see how the website looks.

Starting the Development Server

The hello-world template already comes with a script to start the development server, the name of the script is develop.
That means you can start a gatsby development server typing in the terminal

npm run develop

and if you are using yarn

yarn develop

This is going to do a lot of work but once you see in your terminal a message like this

You can now view gatsby-starter-hello-world in the browser.
http://localhost:8000/

you can open your browser and go to http://localhost:8000/ and you will see the hello world.

Also you can see the graphiql UI in http://localhost:8000/___graphql.

Oh yeah one of the reasons gatsby is so cool is graphql, but that's information for the next post.

Learning NextJs - Day 9

Eduardo P. Rivero — Sat, 29 Jun 2019 18:59:40 +0000

NextJs by default allows you to bring your own static files (js, css, images, json, etc) without any extra configuration.
In order to do that you need an "static" folder inside your project.

So let's create the folder with that specific name

mkdir static

Now you can put an image there (or any other static file) and use it in your pages. Let's pretend you have the logo of your app inside the static under the creative name of mylogo.png.

You can use the following path to show the logo in an img tag

/static/mylogo.png

Let's create a contact.js page

function Contact() {
  return (
    <img src="/static/mylogo.png" alt="My App Name" />
  );
}

export default Contact

And if you start your NextJs server and go to the url /contact you will see your logo.

Custom Server

If you have integrated next with express, hapijs or any other web framework, you will need to declare that route on your web framework as well.

If you are using hapijs the route will look like this

// other code omited 
// for reading purposes

server.route({
  method: 'GET',
  path: '/static/{p*}',
  handler: nextHandlerWrapper(app),
});

With this you are telling HapiJs to use the nextHandlerWrapper every time a request to the static folder is made.

Learning NextJs - Day 8

Eduardo P. Rivero — Thu, 27 Jun 2019 23:57:41 +0000

You can easily add alias to your pages, but now the 404 problem happen every time you refresh the page.
In order to solve this you need to create a custom server, I know! sounds scary, but actually is not because nextjs is a node web server.

This means integrate it with express, hapijs, fastify, or any other node server is really easy. They are plenty of examples how to do this in their docs.

I am going to use HapiJs because I love it so much.

Creating a HapiJs Server

First thing is install hapijs as a dependency

npm install @hapi/hapi

Now you need to create a file where the integration between next and hapi is happen.

touch server.js # this create a new file server.js

First you need to create a simple hapijs server.

const Hapi = require("@hapi/hapi");

const server = Hapi.Server({
  host: process.env.HOST || "localhost",
  port: process.env.PORT || 3000
});

(async () => {
  await server.start();
  console.log(`Server is running at ${server.info.uri}`);
})();

Remember this is server side and more specific nodejs land, so you cannot use fancy import syntax yet. That's because I am using require.

After the require we create a hapi server using the Hapi.Server method, you can pass many options to it, but for now the host and the port are enough. Both have default values to localhost:3000 but you can change it using environment variables. Then inside a IIFE we call the start method which is a promise so we can use await keyword and after that print a nice message to the terminal with the server information.

Integrating NextJs and HapiJs

Since NextJs is another node web server, create it is almost the same than hapijs. First a require, then a method that return a server instance and finally the function to get access to nextjs internals.

// The Require!
const next = require("next");
const Hapi = require("@hapi/hapi");

// the method that return a nextjs instance
// the dev property will start next in dev mode
// in production you want to pass it a falsy value.
const app = next({ dev: true });

const server = Hapi.Server({
  host: process.env.HOST || "localhost",
  port: process.env.PORT || 3000
});

(async () => {
  // We need to wait to next to be ready
  // then start the hapi server.
  await app.prepare();

  await server.start();
  console.log(`Server is running at ${server.info.uri}`);
})();

Cool, but our HapiJs server does not know a thing about how to render react components. How we can give this ability to our HapiJs server? Well the nextjs team is one step ahead and have created a helper file to make the integration even easier.

You can download it here.
We will add it to the project under the name nextWrapper.js, require it and create a couple of new routes.

Right now we have 2 files in the pages folder: Index and About. But we can potentially have a lot more, so How we can tell Hapi to get all the files inside this folder, render the component and return the html to the client? We are going to create a generic route that basically will match any possible request to our hapijs server and process this route with one of the methods inside the nextWrapper.js file.

// other lines of code omitted
// for better reading purposes
const { defaultHandlerWrapper } = require("./nextWrapper");

(async () => {
  await app.prepare();

  // We use regex to tell hapi to catch
  // all the request and process them using the
  // defaultHandlerWrapper method.
  server.route({
    method: "GET",
    path: "/{p*}",
    handler: defaultHandlerWrapper(app)
  });

  await server.start();
  console.log(`Server is running at ${server.info.uri}`);
})();

The defaultHandlerWrapper method is the responsible for process all the request to our hapijs server and make the magic that by default nextjs does.

Nextjs create a lot of stuff behind the courtains on a _next folder. That means we need another route in our hapijs server. For this case we are going to use the nextHandlerWrapper method of the nextWrapper.js file.

// other lines of code omitted
// for better reading purposes
const { defaultHandlerWrapper, nextHandlerWrapper } = require("./nextWrapper");

(async () => {
  await app.prepare();

  server.route({
    method: "GET",
    path: "/_next/{p*}",
    handler: nextHandlerWrapper(app)
  });

  server.route({
    method: "GET",
    path: "/{p*}",
    handler: defaultHandlerWrapper(app)
  });

  await server.start();
  console.log(`Server is running at ${server.info.uri}`);
})();

Now we cannot longer use the dev script because that is going to open the next server and we want to start our new hapijs server integrated with next so let's change that script.

{
  "scripts": {
    "dev": "node server.js"
  }
}

And if you type in your terminal npm run dev everything is working the same! Yep you still get that 404 error in the about page.
Let's fix that creating a route in our hapijs server, in this case the route needs this format:

/users/{userId}/about

And every time this url get a request it should point to the file about.js inside the pages folder and do the next magic (read the component on the server, render it and return the response to the client).
It is pretty similar to the previous routes, but now we are use a third method inside the nextWrapper.js file: pathWrapper.

// other lines of code omitted
// for better reading purposes
const {
  defaultHandlerWrapper,
  nextHandlerWrapper,
  pathWrapper
} = require("./nextWrapper");

(async () => {
  await app.prepare();

  server.route({
    method: "GET",
    // this path is the same we put in the "as" prop
    // of the Link Component
    path: "/users/{userId}/about",
    // This method get the request from the client and return
    // the result of the about.js file
    handler: pathWrapper(app, "/about")
  });

  server.route({
    method: "GET",
    path: "/_next/{p*}",
    handler: nextHandlerWrapper(app)
  });

  server.route({
    method: "GET",
    path: "/{p*}",
    handler: defaultHandlerWrapper(app)
  });

  await server.start();
  console.log(`Server is running at ${server.info.uri}`);
})();

Ok we need to start our server again

npm run dev

And if you select an user you still see your nice url "/users/{id}/about" in your browser but if you refresh that page you do not get a 404 page anymore!

Learning NextJs - Day 7

Eduardo P. Rivero — Tue, 25 Jun 2019 22:42:52 +0000

You already now how to link and pass data between your nextjs pages. But let's face it, querystring are not cool! So for this day I will update that part of the code to turn our boring url to a clean one.

It is a pretty easy task since the Link component comes with a "as" prop that allow you to define an alias for your url.

import Link from 'next/link';

function Home({ user  }) {
  // Other part of code omitted for reading purposes
  return (
    <Link href={`/about?userId=${user.id}`} as={`/users/${user.id}/about`} />
  )
}

In the above code we are creating a Link component, its real route is /about?userId=${user.id}, but with the as prop you are telling to nextjs that you want to show that url in your address.

If you start the server and click on one of the users you will see that the new url in your browser is something like /users/1/about" instead **/about?userId=1

But like uncle Ben said: A great feature carries great unintended behaviors if you select one of the users then reload the page next will throw a 404 error page and that's correct since /users/1/about is just an alias, it actually does not exist on the server.

So I guess day 8 is going to be a really fun day. Stay tuned!

Learning NextJs - Day 6

Eduardo P. Rivero — Mon, 24 Jun 2019 15:00:15 +0000

URL's are a key part of every web application, let's see how we can pass data between different pages.

Let's start adding a Link to our users list, this link will redirect to the about page, but passing the id of the selected user.
We will use that ID to get the information about the current user and display it in the page. Also we will use that information to generate different meta tags per user.

To accomplish that we will use the Link component.

import Link from 'next/link';

function Home({ users }) {
  return (
    <div>
      <Head>
        <title>Home Page</title>
      </Head>
      <h1>Users</h1>
      {users.map((user) => (
        <div key={user.id}>
          <p>{user.name}</p>
          {/* here we pass the user id in the query string */}
          <Link
            prefetch
            href={`/about?userId=${user.id}`}
          >
            <a>About</a>
          </Link>
        </div>
      ))}
      <style global jsx>{`
        p {
          color: blue;
        }
      `}</style>
    </div>
  );
}

If you go to the root url you can see an About link per each user. If you click on that it will take you to the about page along with the user id.

Now let's actually take that user id and get the information about that specific user. We need to use the getInitialProps method. One of the values available in this function is the query object. It will have all the values that you pass in the url as a query string. In this case query is an object with a property userId and with the value of the selected user.

Something like this:

query = {
  userId: 1, // The value is dynamic depending of the user selected
// in the home page.
}

With the user id we can use the jsonplaceholder API to get the rest of the user information.


async function getInitialProps({ query }) {
  const response = await fetch(`https://jsonplaceholder.typicode.com/users/${query.userId}`);
  const user = await response.json();
  // This method always needs to return an plain JS object.
  // The object is going to be the props of our page component.
  return { user };
}

About.getInitialProps = getInitialProps;

Now you have a user prop in the about page. Let's use that information to generate custom meta tags per each user.

import Head from 'next/head';
import fetch from 'node-fetch';

function About({ user }) {
  return (
    <div>
      <h1>Welcome to the About Page!</h1>
      <p>
        The author of this page is {user.name}, check meta tags in the view source!
      </p>
      <Head>
        <title>{user.name} - About Page</title>

        {/* HTML meta tags */}

        <meta
          name="description"
          content="Hey google, bing, altavista, etc this is my about page, please rank me nice!"
        />
        <meta name="robots" content="index, follow" />
        {/* This is going to render a different author meta tag per each user */}
        <meta name="author" content={user.name} />

        {/* Twitter meta tags */}
        <meta name="twitter:card" content="summary" />
        <meta name="twitter:site" content="@eperedo" />
        <meta name="twitter:title" content="Learning NextJs" />
        <meta
          name="twitter:description"
          content="Hey twitter users! This is my about page built with NextJs!"
        />

        {/* Facebook meta tags */}
        <meta property="og:type" content="article" />
        <meta
          property="og:title"
          content="Hello Facebook! This is my about page built with NextJs!"
        />
        <meta property="og:site_name" content="Learning NextJs" />
        <meta property="og:url" content="http://localhost:3000" />
        <meta
          property="og:image"
          content="https://picsum.photos/id/607/200/300"
        />
        <meta property="article:published_time" content="2019-06-22" />
        <meta
          property="article:author"
          content="https://facebook.com/my-profile"
        />
      </Head>
    </div>
  );
}

async function getInitialProps({ query }) {
  // 
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/users/${query.userId}`,
  );
  const user = await response.json();
  return { user };
}

About.getInitialProps = getInitialProps;

export default About;

Now go to the root url, click in the About link of any user and you will see a custom about page per user. If you check the view source of the about page you can see that the value of the author meta tag is the name of the user!

Ok ok I know what you are thinking. Passing data in query strings is so 90's! We can totally have clean urls with next, but that's information for the day 7 I guess.