DEV Community: Owlypixel

100 Days of Gatsby - Display a List of Orders From a CSV File

Owlypixel — Sat, 04 Jan 2020 23:15:43 +0000

Participating in challenges like CodePen Challenge, 100 Days Of Code is a great way to level up your development skills.

Starting on January 1st, the Gatsby team joined the party with their 100 Days of Gatsby challenge and this is awesome news!

The first challenge is to build a blog where you can track your coding progress and document your ups and downs.

Since I already have a blog, I decided to improvise and start with something very simple but useful.

About a year ago I wrote a blog post where I showed how to scaffold an app from an existing database with ASP.Net Core. So, I thought why not reuse the same database in the form of a .csv file and display its contents using Gatsby? This is a pretty straightforward but practical task since .csv is a very popular data format.

So, if you're new to Gatsby, put that Netflix show you've been watching on pause, grab a glass of water, and let's build this fun little project together!

The sample repo for this project is available here.

Creating a basic Gatsby site

Ok, for starters we'll need to put together a very basic Gatsby site. Create a project folder called Orders somewhere on your hard drive.

To make the simplest Gatsby site we'll need to install gatsby and a couple of libraries. Change into this folder and run the following commands:

npm init -y
npm install gatsby react react-dom

After that, create an src/pages/index.js file. This will be the main index component for our project.
In this file add the following:

import React from 'react';

export default () => <p>Should we write some code?</p>

If we now start our site in development by executing gatsby develop in the terminal, we'll see this piece of art:

The audience applauds, bravo! But wait, how would one add data to a Gatsby site?

Installing a source plugin

Well, there are a bazillion ways how you can get data into a Gatsby site. In this particular case, we're going to use the gatsby-source-filesystem plugin. Let's install it in our terminal:

npm install gatsby-source-filesystem

This will give us the ability to actually access the data from the file system, but we need to tell Gatsby that we now have this wonderful plugin installed.

We can do this by creating a gatsby-config.js file in the root of our project, right next to the package.json file:

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: 'orders',
        path: 'data'
      }
    }
  ]
}

It's a JavaScript file that exports a configuration object for our site. In this object, we have a plugins property, which is an array of installed plugins. That's where we're adding our newly installed gatsby-source-filesystem plugin.

Note: If the plugin has configuration options, we're specifying it as an object and not just a simple string.

Here we're telling Gatsby to check the data folder for data that we'll be using.

Once you've done this, you can start the development server again:

gatsby develop

Now Gatsby will look into this folder and say "Hey we've got some files here, sweeet!".

That's all great. Now open up GraphiQL explorer in your browser: http://localhost:8000/___graphql.

Here we can check out what Gatsby knows about our files. In the explorer select allFile\nodes\relativePath node, and hit Play. You'll see that we now have access to our orders.csv file.

Awesome. But what can we do with it? How do we get the contents of our file? For that, we'll use something called a transformer plugin.

Adding a transformer plugin

With the help of transformer plugins, we can transform the raw content from the source plugins into something that we can use. We've got our file nodes and with the help of the gatsby-transformer-csv plugin, we can turn them into csv nodes.

The same goes for other types of files. We can use all sorts of transformer plugins to transform our file nodes into image nodes, json nodes, markdown nodes, etc..

Stop the server and install this plugin by typing the following in your terminal:

npm install gatsby-transformer-csv

Now we can add it to the config file.

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: 'orders',
        path: 'data'
      }
    },
    `gatsby-transformer-csv`
  ]
}

Since we're not passing any additional options for this plugin, we can simply specify its name. Start the server again:

gatsby develop

And now, in our GraphiQL explorer, we have another node - allOrdersCsv, where we can actually see the contents of our file.

Displaying data on a page

Now we need to take this data that we have and put this on the page somehow. Let's put together a really simple layout to show the list of our orders.

Create the layout file in the components folder: src/components/layout.js with the following contents:

import React from 'react';

const Layout = ({ children }) => {
  <>
    <header>
      <h1>Orders List</h1>
    </header>
    <main>{children}</main>
  </>
}

export default Layout;

This is a very simple component that takes a children prop and displays the basic structure of a page. Now we can use it in our index.js file:

import React from 'react';
import Layout from '../components/layout';

export default () => {
  <Layout>
    <p>Should we write some code?</p>
  </Layout>
}

Another thing that we're going to do is add a bit of styling. In our components folder create a layout.css file:

*,
*:before,
*:after {
  box-sizing: border-box;
}
body,
html {
  height: 100%;
  margin: 0;
  background-color: #727db5;
  font-family: Georgia, 'Times New Roman', Times, serif;
}
main {
  max-width: 800px;
  margin: 0 auto;
  border: 1px solid #dedede;
  background-color: #fff;
  height: 100vh;
  padding: 2rem;
}
h1 {
  text-align: center;
  color: #fff;
}

Once you've done that, import it in layout.js like so:

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

Alright, now our basic layout is ready and we can move on to actually displaying the data from our file. In our index.js page, add the following:

import React from "react";
import Layout from "../components/layout";
import { graphql } from "gatsby";

export const query = graphql`
  query {
    allOrdersCsv {
      nodes {
        Amount
        Currency
        Customer_Email
        Customer_Name
        Order_Date
        id
      }
    }
  }
`;

export default ({ data }) => {
  const orderNodes = data.allOrdersCsv.nodes;

  return (
    <Layout>
      <table>
        <thead>
          <tr>
            <th>Amount</th>
            <th>Currency</th>
            <th>Customer Email</th>
            <th>Customer Name</th>
            <th>Order Date</th>
          </tr>
        </thead>
        <tbody>
          {orderNodes.map(node => (
            <tr key={node.id}>
              <th>{node.Amount}</th>
              <th>{node.Currency}</th>
              <th>{node.Customer_Email}</th>
              <th>{node.Customer_Name}</th>
              <th>{node.Order_Date}</th>
            </tr>
          ))}
        </tbody>
      </table>
    </Layout>
  );
};

We're importing graphql at the top to be able to query data in our page. Next, we're exporting a query, using graphql as a tag template literal and putting inside our query from GraphiQL playground.

During the build, Gatsby is going to pick up this query, run it, and pass the results of it to our component as data prop. Then, in the component we're getting the orderNotes array out of the data and building a simple table using this data.

Here's what we have this far:

You've probably noticed that our list looks pretty simple, how about adding some styles? Let's add some basic table styles to our layout.css file:

table {
  border-collapse: collapse;
  background: white;
  border-radius: 10px;
  overflow: hidden;
  width: 100%;
  margin: 0 auto;
}
thead tr {
  height: 60px;
  background: #36304a;
}
thead tr th {
  font-size: 18px;
  color: #fff;
  line-height: 1.2;
  font-weight: unset;
}
tbody {
  font-family: "Courier New", Courier, monospace;
}
tbody tr {
  font-size: 15px;
  color: #808080;
  line-height: 1.2;
  font-weight: unset;
}
table tbody tr {
  height: 40px;
}
tbody tr:nth-child(even) {
  background-color: #f5f5f5;
}

Great! That looks better.

Final words

I hope that this post was somewhat useful for people who are learning Gatsby.

Now you can see for yourself how simple it is to get data into a Gatsby's GraphQL data layer, transform it into any form that you need and display it on a page.

Please, share your work on Twitter, I'm really excited to see what other people are building with this awesome tool.

Cheers!

This post was originally published on OwlyPixel Blog.

Exploring Blogging With Scully - the Angular Static Site Generator

Owlypixel — Sat, 28 Dec 2019 02:18:19 +0000

HeroDevs team recently released a static site generator for Angular projects - Scully.

Aside from rendering regular apps, they announced that it can be used to build a static blog with markdown. This is what got me curious, so I decided to dive in and explore how this works.

So, If you're an Angular developer who wants to make the most secure and fastest possible version of their markdown blog, hop on the ride and enjoy this quick tour.

What is Scully?

Scully is a JAM stack solution for Angular developers. It's a static site generator that takes your new or existing Angular app and pre-renders it to HTML and CSS.

If you take for example the smallest possible Angular website, it'll be around 300K. Now, if you take this app and pre-render it with Scully, you'll be able to cut the size down to 2.5K.

This is a huge deal for someone using a low-end device on a flaky mobile connection.

Why should I use it?

There are a number of benefits when using Scully, especially for Angular devs. Here are some of them:

It works with the Angular ecosystem.
You don't have to write your app in any specific way, it doesn't require any structural changes.
Much faster load times, hence increased conversions for your app.
Your app can work on a much larger number of devices where JavaScript is disabled or not supported.
Faster TTI (Time to interactive). Due to the lack of a large number of scripts your app can respond to user interactions much quicker.

How does it work?

It takes your Angular app and renders it in a series of HTML pages. Then, once the user downloads the initial page it'll then download the rest of the Angular app and bootstrap it on top, so you still get all the benefits of a Single Page App.

The cool thing about it that with the machine learning algorithm it can find all the routes in your app and render the entire app to a series of static HTML files, which then can be simply uploaded to the CDN of your choice.

What should I have installed to follow along?

First, if you haven't already done this, you need to install Angular CLI 9.x.x.

npm install -g @angular/cli@next

Scaffolding an Angular app

For starters, Scully requires a working Angular app using Angular 9.x.x. Great, let's generate one!

ng new awesome-angular-blog

Next, select Yes for Angular routing and pick SCSS from the list of available styling options.

After it's finished generating a new project we can cd into it.

cd awesome-angular-blog

Ok, let's try running the app to make sure that it works.

ng serve --open

You'll see a default Angular app opened in the browser on http://localhost:4200/.

So far so good, now let's get rid of the boilerplate and add something very simple for starters.

Open src\app\app.component.html file and replace its contents with the following:

<h1>The Blog Header</h1>

<router-outlet></router-outlet>

<footer>Awesome Scully Blog</footer>

The development server is watching our files, so now our page should look like this.

Stop the development server by pressing Ctrl+C.

Installing Scully

A Quick Note: Keep in mind that this is an early alpha release, so there may be some 🐛. At the moment it only supports v9 of Angular (v8 support will be added later).

Here comes the interesting part. Now we're ready to install Scully. The first thing that we need to do is to run this command:

ng add @scullyio/init

This will install all necessary dependencies, import HttpClientModule, add scully.config.js file which will be used for plugins management and add some code to existing files.

Generating the blog

Scully allows us to generate a blog using Angular generate schematic. But we have to keep in mind that we need to build a project before running Scully because it uses the results of our build - dist folder to see what routes we have. So, let's build it now.

ng build

After that, you should see a dist folder created. Now let's generate the blog:

ng g @scullyio/init:blog

After you ran that command, Scully created a blog module with routes for us so we don't have to configure that manually. Also, to get you started it created a blog folder with the default markdown file. Every time Scully builds, it'll render this markdown file to HTML.

We can now add new blog posts with the following command:

ng g @scullyio/init:post --name="awesome-owls"

Cool, let's open up our newly created post /blog/awesome-owls.md and add some content there:

---
title: awesome-owls
description: blog description
publish: false
---

# awesome-owls

Owls can almost turn their heads all the way around, but it's not quite a 360 turn. 

They can turn their necks 135 degrees in either direction, which gives them 270 degrees total movement.

Because Angular still can't read markdown, to see the contents of our post we need to build the project and run Scully again. Then they will be rendered and we'll see our static content.

ng build && npm run scully

If we look at our dist folder, we'll see a static directory there which was created by Scully.

We can now serve this folder with any server like Nginx or Apache and see the contents of our post. The easiest option for us to check it out is to use NodeJS http-server.

Change into the static directory and run the following command in your terminal:

http-server -p 5555

After that, open http://127.0.0.1:5555/blog/awesome-owls in your browser and you should see the content of our markdown post.

Setting up a home page

Alright, let's add a list of available routes to our home page. For this, Scully has a special ScullyRoutesService.

Open the main src\app\app.component.ts file and import it at the top, then assign the ScullyRoutesService to scully.

import {IdleMonitorService, ScullyRoutesService} from '@scullyio/ng-lib'; 
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent { 
 constructor (
    private idle: IdleMonitorService,
    public scully: ScullyRoutesService
  ) { } 

  title = 'awesome-angular-blog';
}

Next, in the view file src\app\app.component.html add an ngFor loop that goes through all the routes and displays them on the page using routerLink.

<ul>
  <li *ngFor="let route of scully.available$ | async">
    <a [routerLink]="route.route">{{ route.title || route.route }}</a>
  </li>
</ul>

Ok, let's rebuild everything again by running ng build && npm run scully and visit our root page http://127.0.0.1:5555/.

Here we go. We have the basic functionality of the blog working.

From here you can add a bit of styling to make it more visually appealing, add more pages like About, Contact, create a list of categories, all the usual blog things.

The cool thing is that no matter what your blog will look like, it still can be rendered to static assets and served via any available CDN.

Keep in mind that this is an early alpha release, so there will be bugs, but with the team like HeroDevs I'm sure the product is in good hands.

Next Steps

If you got interested and want to know more, the docs have a lot of useful information like how to use the plugin system, how to get this to work with the existing Angular project, and so on.

Also, here are some useful resources on the topic:

Thanks for joining me, have a wonderful day!

This post was originally published on OwlyPixel Blog.