Forem: react-stockholm

I updated our website to use React with Next.js and DatoCMS... here is what I learned!

react-stockholm — Wed, 19 Feb 2020 08:03:14 +0000

I was tasked with updating our website from the static HTML-pages we've had to something that would be easier to maintain and update. I was asked to re-do the entire site using DatoCMS and the React framework "Next.js".

I was tasked with updating our website from the static HTML-pages we've had to something that would be easier to maintain and update. I was asked to re-do the entire site using DatoCMS and the React framework "Next.js".

React with Next.js

I have dabbled in React a couple of times, gone through a couple of courses and even though the "create-react-app" is extremely handy... I still find it a bit cumbersome with the setup to get it up and running. That was until I got the tip to check out Next.js which, on top of giving you a "Zero Setup"-setup, gives you server-side-rendered pages and a whole lot more.

"Zero Setup"-Setup

If you have some experience at all with React, getting started with Next.js is a breeze! You'll find their "Getting started" tutorial here.

Going through the Next.js tutorial you will quickly realise that not much is different form the plain old React we've come to love, apart from some imports to use Next's own components. It definitely easier to get going and you get some great things like server-side-rendering of your pages for free.

What do we want? Deployment! When do we want it? NOW!

Server-side rendering is great and all... but what I personally LOVE about using Next.js if how easy it is to deploy your entire React-site to their hosting service Zeit.

Deploying with Next.js is almost absurdly easy, is so easy I just did it by accident right now... For real! Just type the word "now", sit back and watch the magic unfold before your eyes!

Remembering commands can be tough... here you can copy my code:

now

That's literally it!

So why did we switch over to React with Next.js?

Our website has up until now been static HTML pages and we needed a faster and easier way to quickly make changes and updates. First of all, we needed something modular to quickly add new content to our site, this was covered by React, then we needed some way to easily and quickly update the content... we needed a CMS! So which one did we go for? We love Dango and use it a lot, therefore it has come naturally to use DjangoCMS. But fot this project we opted for something else... we went with DatoCMS

DATO CMS

So what is DatoCMS really? On their website they claim themselves to be "The API-based CMS your editors will love"... which actually seems pretty much like a great description of what it is.

With Dato you define models to use with their web based GUI, you populate your models with data and then you access the data though their API using GraphQL.

GraphQL... You want PK´s with that? 🍟

We've all used REST-API's but what's the deal with GraphQL?

I'we heard about GraphQL several times and I had understood that it gives more flexibility over queries. So it was time to put it to the test! What I hadn't realised with GraphQL was the fact that you now can use one single API-Endpoint for several completely different queries. This in combination with the fact that you "Custom Order" what results you want and how you want it.

So instead of getting the result of some specific API-endpoint which might return way more data than we actually need, you just declare what results you actually want and care about.

For example we want to display the logotypes of the technologies we use at Will & Skill. So with DatoCMS we define a model called Technology. It has a name, an image-field called logotype and an ID.

So what might a GraphQL request look like to get a list of all the technologies we have entered to DatoCMS?

First of all we get a list of all the technologies with their respective ID:

GraphQL Query

We simply write out what we want:

{
    allTechnologys{
        id
    }
}

API Response

And this is what we get back:

 "allTechnologys": [
      {
        "id": "438377",
      },
      {
        "id": "438412",
      },
      {
        "id": "438376",
      },
      {
        "id": "438427",
      },
      {
        "id": "438365",
      }
    ],

But what if we also want the names of the technologies? Easy, just add the name field to the query and voilà!

GraphQL Query

{
    allTechnologys{
        id
        name
    }
}

API Response

 "allTechnologys": [
      {
        "id": "438377",
        "name": "React"
      },
      {
        "id": "438412",
        "name": "React Native"
      },
      {
        "id": "438376",
        "name": "Angular"
      },
      {
        "id": "438427",
        "name": "Swift"
      },
      {
        "id": "438365",
        "name": "Django"
      }
    ],

Let's say we also want to display the corresponding logotypes fo the technologies... just add the logotype field and the parameters you want (in this case we are just interested in the url of the logotype)

GraphQL Query

{
    allTechnologys{
        id
        name
        logotype{
            url
        }
    }
}

API Response

"allTechnologys": [
      {
        "id": "438377",
        "name": "React",
        "logotype": {
          "url": "https://www.datocms-assets.com/7863/1540395724-logoreactredux.png"
        }
      },
      {
        "id": "438412",
        "name": "React Native",
        "logotype": {
          "url": "https://www.datocms-assets.com/7863/1540394206-logoreactnative.png"
        }
      },
      {
        "id": "438376",
        "name": "Angular",
        "logotype": {
          "url": "https://www.datocms-assets.com/7863/1540394191-logoangular.png"
        }
      },
      {
        "id": "438427",
        "name": "Swift",
        "logotype": {
          "url": "https://www.datocms-assets.com/7863/1540394129-logoswift.png"
        }
      },
      {
        "id": "438365",
        "name": "Django",
        "logotype": {
          "url": "https://www.datocms-assets.com/7863/1540393940-logodjango.png"
        }
      }
    ],

As you can see, now you can go all Burger King™ up on your API calls and "Have it your way"... SUCCESS! 🍔🍔🍔

Stay tuned for part 2!

This post was originally posted on our Blog: Will & Skill, A Digital Agency based in Stockholm - I updated our website using React and Next.js

Setup a Next.js project with PM2, Nginx and Yarn on Ubuntu 18.04

react-stockholm — Mon, 10 Feb 2020 20:17:10 +0000

So, I recently had to deploy a Next.js project to a Ubuntu-server. Quite straight forward but you might run into some quirks.

We tend to deploy our projects on Now since it is super convenient but there might be instances where You need to deploy things to Your own servers. This is a short tutorial on how You can easily setup a working environment in no time.

Install Nginx
Install Yarn
Install PM2
Use Git to fetch our Next.js project from Github
Run our project with PM2 and serve a browsable version with Nginx
Run PM2 automatically whenever we boot/reboot the machine

Install Nginx

sudo apt install nginx

Install Yarn on Ubuntu

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt-get update && sudo apt-get install yarn

Install PM2 globally on your machine

yarn global add pm2

Fetch project repo from Github and install all the dependencies

git clone github:<YOUR_ORGANIZATION>/<YOUR_PROJECT> project
cd project
yarn install

NOTE: If You have Your latest code in a different branch you need to checkout that branch so if Your code resides in a branch named development you need to run git checkout development

NOTE: After yarn install you have to run yarn build so that You get a runnable version of the Next.js app

Start the Next.js project with Yarn and PM2

Our package.json looks like this

{
  "name": "nextjs-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "node server.js",
    "build": "next build",
    "start": "next start -p 8000",
    "test": "NODE_ENV=test jest",
    "test:watch": "NODE_ENV=test jest --watch",
    "test:coverage": "NODE_ENV=test jest --coverage",
    "test:cypress": "NODE_ENV=test cypress open",
    "lint": "eslint .",
    "lint:watch": "esw . --watch --cache",
    "lint:watchAll": "esw . --watch",
    "circleci:run": "circleci local execute --job $JOB"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/willandskill/nextjs-example.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/willandskill/nextjs-example/issues"
  },
  "homepage": "https://github.com/willandskill/nextjs-example#readme",
  "dependencies": {
    ...
  },
  "devDependencies": {
    ...
  }
}

We have some extra stuff that You can ignore for now in our package.json. The line that matters to us is "start": "next start -p 8000" under scripts and in order for us to run it from the command line we would run yarn start but if we want PM2 to run it for us we need to run pm2 start yarn --name "nextjs" --interpreter bash -- start

To run our Next.js project and see if the process is kicking we need to run the commands below

pm2 start yarn --name "nextjs" --interpreter bash -- start
pm2 show nextjs

The output should be something like

root@willandskill-example:# pm2 show nextjs
 Describing process with id 0 - name nextjs
┌───────────────────┬──────────────────────────────────┐
│ status            │ online                           │
│ name              │ nextjs                           │
│ version           │ N/A                              │
│ restarts          │ 2                                │
│ uptime            │ 93m                              │
│ script path       │ /usr/bin/yarn                    │
│ script args       │ start                            │
│ error log path    │ /root/.pm2/logs/nextjs-error.log │
│ out log path      │ /root/.pm2/logs/nextjs-out.log   │
│ pid path          │ /root/.pm2/pids/nextjs-0.pid     │
│ interpreter       │ bash                             │
│ interpreter args  │ N/A                              │
│ script id         │ 0                                │
│ exec cwd          │ /root/project                    │
│ exec mode         │ fork_mode                        │
│ node.js version   │ N/A                              │
│ node env          │ N/A                              │
│ watch & reload    │ ✘                                │
│ unstable restarts │ 0                                │
│ created at        │ 2019-03-13T15:02:40.278Z         │
└───────────────────┴──────────────────────────────────┘
 Add your own code metrics: http://bit.ly/code-metrics
 Use `pm2 logs next [--lines 1000]` to display logs
 Use `pm2 env 0` to display environement variables
 Use `pm2 monit` to monitor CPU and Memory usage next

If You want to monitor what is happening in real time, You can run the command pm2 monit. This command is quite handy if You want to see the logs
generated in real time or see how Your hardware resources is utilized in normal/heavy traffic.

pm2 monit

How You deploy a new version

git pull
yarn install
yarn build
pm2 restart nextjs

Setting up a basic Nginx config file

# /etc/nginx/sites-available/nextjs-example.willandskill.eu

server {
    server_name nextjs-example.willandskill.eu;
    access_log /opt/nextjs/logs/access.log;
    error_log /opt/nextjs/logs/error.log error;

    location /_next/ {
        alias /opt/nextjs/project/.next/;
        expires 30d;
        access_log on;
    }

    location / {
        # reverse proxy for next server
        proxy_pass http://localhost:8000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;

        # we need to remove this 404 handling
        # because next's _next folder and own handling
        # try_files $uri $uri/ =404;
    }
}

The important line in this Nginx config file is to map the traffic to http://localhost:8000 with the line proxy_pass http://localhost:8000; under the location / block.

If you want PM2 to start on startup

pm2 startup

You can also run the command below to freeze the processes You want to run on startup

pm2 save

This article was originally posted on Will & Skill Blog - Setup a Next.js project with PM2, Nginx and Yarn on Ubuntu 18.04