My personal website created with React

We are talking about the site you are visiting now. I decided to create my own website using new technologies like ReactJS. The problem was that React is a frontend tool and the web, especially if you care about SEO, demands server side rendered HTML for each request. I found out three solutions for this:

• Creating my own nodejs server and reusing my React components for both Frontend and Backend using ReactDOMServer RenderToString on the server for SEO
• Trying gatsbyjs a free and open source framework based on React that helps developers build blazing fast websites and apps
• Trying nextjs. A tool that let you create sites using React with server rendering, static expoert, etc.

Both gatsbyjs and nextjs are similar tools but I chose gatsby for convenience and productivity and because it was ahead in features in comparison with nextjs.

What is gatsbyjs

With Gatsby, you write React components like when you create single page apps (SPA) with it. You have hot reloading to make development easier like with create react app. It's a tool categorized as JAMstack. Basically you write your components with React, you can handle static routing by just creating folders or using the proper API. You can generate multiple pages automatically using react components as the template and their Gatsby Node API.

In the end, you will have the statically generated files that are very easy to host in servers, cdn or cloud services. The website is going to be very rich in frontend dynamic features because you just use React for that. You don't need a backend, you only need a headless CMS if you want your content created by non technical members, otherwise you can use markdown for it like I did with this site.

Wait, headless CMS?

You can have a CMS like Wordpress, create your content with it, and let gatsby pull the data from it and do the rest for you. You will end up having a very fast, secure, seofriendly reactpowered website and not relying on PHP and wordpress security for production. Very convenient.

Some headless CMS that you can use are Contentful or Strapi but you can use wordpress if you want, or your own cms exposing a public API and creating a plugin for gatsby after.

Gatsby plugin ecosystem

Gatsby offers you a plugin ecosystem which is very convenient and useful. For example if you want to use wordpress as your data source you just need to install and configure the gatsby-source-wordpress plugin. Host your wordpress somewhere (you can have it in your office intranet if you want) and use the plugin configs to make it work. Gatsby uses wordpress rest api for pulling all the data. There are plenty plugins for almost anything over there, it's a very productive tool for developers.

GraphQL

GraphQL is a query language for API and query data, a replacement for REST. If you want to use Gatsby you better learn how to perform graphQL queries. Is not that hard but can be confusing at first. The real issue is when you have to implement graphql API in the server but gatsby does that job for you.

Graphql query example

graphql`
query {
  site {
    ...SiteMetadata
  }
  allMetaData(filter: { currentLang: { eq: "es" } }) {
    ...MetaData
  }
  allMenu(filter: { lang: { eq: "es" } }) {
    ...Menu
  }
}
`

Using CSS in JS

Another cool stuff these days is to write your CSS in your components. In this case in react, like this:

    <Link
        css={{
            color: '#3b6cc5',
            background: '#ecf3ff',
            padding: '6px 10px',
            borderRadius: 2,
            fontWeight: 'bold',
        }}
        to={path}
    >
        {readMoreText}
    </Link>

In this case I'm using glamor, it let you write plain js objects as css properties by just using camelCase.

Don't worry, the css isn't going to be inline. Classnames will be generated and CSS optimized in their own file. Automagically without doing anything. Cool stuff...

Dockerizing a gatbsy site

I made a simple Dockerfile in order to build a small Alpine image with nginx. Installing node, gatbsy, git, pulling the site and using gatsby build is all that requires to run and serve your website with nginx. Very cool (but maybe overkill).

Conclusion

This website is a Progressive Web App. It renders very very fast from a server (could be a CDN). It hydrates/connect with ReactJS and you navigate the site using javascript with preloading capabilities so the feeling of smoothness is just incredible.

I recommend anyone to migrate from making wordpress websites to use tools like gatsbyjs or nextjs. Yes, you will lose the WP plugin ecosystem but you will get a lot of performance, security, and you will also save money with your servers. You can do almost any kind of website with gatsby to be honest.

Show me the code

This project is open source, I made a github repository so you can explore it.

https://github.com/zebnat/ddev-gatsby