DEV Community: Martin Valentino

Create Blog app with NextJS and Contentful API

Martin Valentino — Wed, 02 Oct 2019 23:23:34 +0000

Originally published at https://martinlabs.me.

I have a good experience building a web application using React and NextJS framework. In my last blog, I wrote about set up a Flask and NextJS application using Docker. This time in this post, I'll share a tutorial to build a simple blog application using NextJS and Contentful. The steps that I describe here is similar to what I've done to display a blog content in Passporr. Please stay tuned, and hopefully, this tutorial will help you to also display a blog in your website without much hassle.

I've learned in my experience, for your website to get better at SEO ranking, you have to build a lot of content for your website. And what are a better way to have a lot of content other than generating it through the blog? But what if you build a website or application that's not intended to display a blog. For example, you start a website/sass product with create-react-app template and overtime you want to add functionality to display a blog content. Unless you build your website with a platform that already ready for it (e.g. Wordpress, GhostJS, and many other CMS), you may need either:

Build from scratch your own simple CMS
Build an entire blogging feature using an existing CMS and publish it under a subdomain of yours.

The first option may be feasible if you're not in a rush or want to take the opportunity to learn more about building a CMS. The second option can be done quickly, but you'll miss the organic traffic to your main domain. And then there's a third option, which uses a headless CMS. According to Wikipedia,

A headless content management system, or headless CMS, is a back-end only content management system (CMS) built from the ground up as a content repository that makes content accessible via a RESTful API for display on any device.

So it's basically a full-backend service with the database and also the editor and everything set up for you without any view representation. There are several headless cms examples out there. Some of those, for instance, are In this post, I'll show an example of how to build a blog feature in a NextJS website with Contentful headless cms. This is what we're going to develop in this tutorial.

Create Contentful Account

Before getting started, let's first set up the backend for it. You need to register for a contentful account and create a basic blog template that Contentful have.

After you sign up, you'll be asked to create a new space, which is basically a project place for your backend. Let's choose the existing template for space now, the blog example.

Select free space
Name the space, and choose an example space and click on blog tab from the options. For this example, I will name the space blog-tutorial. Then confirm it.

After you confirm to create the space, Contentful will create the space for you. This blog space will contain a simple structure for a blog and a sample of four blog post. After space gets created, you'll be redirected to the home page where you can see from the navbar a menu. Here you can see the data structure for your blog in Content Model menu and samples of the blog post in Content. As you can see as well, everything is set up for you, including WYSIWYG editor.

Create Contentful API token

Before we move on, we need to also create an API token for our NextJS application. You can do so by selecting on Settings and then API keys. In the API keys page, click on Add API Key. In the API Key page, you can fill in all the textbox there. The things that you need to write down is the Space ID and Content Delivery API - access token

NextJS Blog Application

Index Page

For the NextJS application, We'll start building the app using a starter project that I have set up before. The starter kit will contain a basic NextJS application with typescript, styled-components and Docker already set up for you. To get started let's clone the repo into our machine (You can change the <project name> into whatever you want to name the folder). We also will install the dependency required for the project.

# clone the initial project repo
$ git clone git@github.com:martindavid/nextjs-typescript-starter.git <project name>

# install dependencies package
$ npm i --save contentful moment

The following code and steps will walk through us on how to add the blog component into the next application.

Create an environment variable in the next.config.js.

const nextConfig = {

  ....the rest of the code

  env: {
    // Will be available on both server and client
    CONTENTFUL_SPACE_ID: process.env.CONTENTFUL_SPACE_ID,
    CONTENTFUL_ACCESS_TOKEN: process.env.CONTENTFUL_ACCESS_TOKEN
  }
};

Create a new folder under pages and name it blog, after that also add a new file under blog called index.tsx. In the index.tsx, we will write a basic react component.

import React from 'react';
import {Layout} from 'components/layout';

type BlogPageProps = {
  entries: Array<BlogPost>;
};

export default class BlogPage extends React.Component<BlogPageProps> {
  render() {
    const {entries} = this.props;
    return (
      <Layout>
        <h1>Blog</h1>
      </Layout>
    );
  }
}

At the moment, it will only show heading with text. We'll add more into the components after we set up the service class for contentful.

Create a service class that will call contentful API and fetch the data. In the following part, I'll use a pattern that I'm currently using in all of my work for centralising API call into a service class. Inside services folder, I'll create two files, blog.ts and blog.types.ts. In the services/blog.types.ts, we'll store types for responses from Contentful API.

export type Author = {
  name: string;
  phone: string;
  shortBio: string;
  title: string;
  email: string;
  company: string;
  twitter: string;
  facebook: string;
  github: string;
};

export type HeroImage = {
  imageUrl: string;
  description: string;
  title: string;
};

export type BlogPost = {
  id: string;
  body: string;
  description: string;
  publishedDate: string;
  slug: string;
  tags: Array<string>;
  title: string;
  heroImage?: HeroImage;
  author?: Author;
};

Next, on the services/blog.ts we'll add the service class to call the contentful API.

import {ContentfulClientApi, createClient} from 'contentful';
import {Author, HeroImage, BlogPost} from './blog.types';
import moment from 'moment';

export class BlogApi {
  client: ContentfulClientApi;

  constructor() {
    this.client = createClient({
      space: process.env.CONTENTFUL_SPACE_ID,
      accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
    });
  }

  // ...the rest of the code
}

Here we create a class name BlogApi. It also imports ContentfulClientApi type and createClient method so that we can use it to instantiate the contentful client in the constructor.

Next, we'll add two methods to fetch all blog entries and fetch blog post using its id.

  async fetchBlogEntries(): Promise<Array<BlogPost>> {
    return await this.client
      .getEntries({
        content_type: "blogPost" // only fetch blog post entry
      })
      .then(entries => {
        if (entries && entries.items && entries.items.length > 0) {
          const blogPosts = entries.items.map(entry => this.convertPost(entry));
          return blogPosts;
        }
        return [];
      });
  }

  async fetchBlogById(id): Promise<BlogPost> {
    return await this.client.getEntry(id).then(entry => {
      if (entry) {
        const post = this.convertPost(entry);
        return post;
      }
      return null;
    });
  }

Lastly, we'll add a helper method inside BlogApi class to map the response from the API to our type.

convertImage = (rawImage): HeroImage => {
  if (rawImage) {
    return {
      imageUrl: rawImage.file.url.replace('//', 'http://'), // may need to put null check as well here
      description: rawImage.description,
      title: rawImage.title,
    };
  }
  return null;
};

convertAuthor = (rawAuthor): Author => {
  if (rawAuthor) {
    return {
      name: rawAuthor.name,
      phone: rawAuthor.phone,
      shortBio: rawAuthor.shortBio,
      title: rawAuthor.title,
      email: rawAuthor.email,
      company: rawAuthor.company,
      twitter: rawAuthor.twitter,
      facebook: rawAuthor.facebook,
      github: rawAuthor.github,
    };
  }
  return null;
};

convertPost = (rawData): BlogPost => {
  const rawPost = rawData.fields;
  const rawHeroImage = rawPost.heroImage ? rawPost.heroImage.fields : null;
  const rawAuthor = rawPost.author ? rawPost.author.fields : null;
  return {
    id: rawData.sys.id,
    body: rawPost.body,
    description: rawPost.description,
    publishedDate: moment(rawPost.publishedDate).format('DD MMM YYYY'),
    slug: rawPost.slug,
    tags: rawPost.tags,
    title: rawPost.title,
    heroImage: this.convertImage(rawHeroImage),
    author: this.convertAuthor(rawAuthor),
  };
};

Let's get back to the blog/index.tsx to add the BlogApi and fetch a list of the blog post there. In the blog/index.tsx, we'll add getInitialProps method so that it will implement the SSR and serve the content server-side.

  static async getInitialProps() {
    const api = new BlogApi();
    const entries = await api.fetchBlogEntries();
    return { entries };
  }

We'll also want to modify the render method to render the list of blogpost.

  renderBlogList = entries =>
    entries.map((entry, i) => {
      return (
        <BlogBox
          key={i}
          id={entry.id}
          slug={entry.slug}
          imageUrl={entry.heroImage.imageUrl}
          title={entry.title}
          author={entry.author.name}
          description={entry.description}
          tags={entry.tags}
        />
      );
    });

  render() {
    const { entries } = this.props;
    return (
      <Layout>
        <h1>Blog</h1>
        <div className="row mt-3">
          {entries.length > 0 && this.renderBlogList(entries)}
        </div>
      </Layout>
    );
  }

As you can see from the above code listing, I create a helper method to render the collections of entry.

Detail Page

We have halfway through completing the blog application. In this part, we'll build the detail for a single blog post. If you look back at Contentful page in the Content menu, you can see that the blog content is written in Markdown format. For that, we'll install new npm packages that will render a markdown content in the blog react component.

$ npm i --save react-markdown

After that, we need to add a new NextJS page under blog folder called [slug].tsx. We also need to add a new component called BlogDetail, which will accept a single post as props. The BlogDetail is a function component which basically only renders the content using react-markdown. Thanks also to NextJS dynamic routing, we can pass the blog entry slug and [slug].tsx will automatically parse it as a query object. With dynamic routing in NextJS we can have a url like /blog/<slug> instead of having query string in our url. This also will improve our website SEO.

import React from 'react';
import {BlogPost} from 'services';
import styled from 'styled-components';
import ReactMarkdown from 'react-markdown';

const Image = styled.img`
  width: 80%;
  height: 300px;
  object-fit: cover;
`;

type BlogDetailProps = {
  post: BlogPost;
};

export const BlogDetail = (props: BlogDetailProps) => {
  const {post} = props;
  const mainTag = post.tags.length > 0 ? post.tags[0] : '';
  return (
    <article className="post-full post">
      <header className="post-full-header">
        <h1 className="post-full-title">{post.title}</h1>
        <div className="text-center meta">{`${post.publishedDate} / ${mainTag}`}</div>
      </header>
      <figure className="post-full-image text-center">
        <Image src={post.heroImage.imageUrl} alt={post.heroImage.title} />
      </figure>
      <section
        style={{overflowY: 'inherit', marginBottom: '2em'}}
        className="post-full-content">
        <ReactMarkdown source={post.body} />
      </section>
    </article>
  );
};

Lastly, to complete our blog detail page, we'll modify the code to include the BlogDetail component and call the service class to fetch the single blog entry.

import React from 'react';
import {BlogPost} from 'services';
import styled from 'styled-components';
import ReactMarkdown from 'react-markdown';

const Image = styled.img`
  width: 80%;
  height: 300px;
  object-fit: cover;
`;

type BlogDetailProps = {
  post: BlogPost;
};

export const BlogDetail = (props: BlogDetailProps) => {
  const {post} = props;
  const mainTag = post.tags.length > 0 ? post.tags[0] : '';
  return (
    <article className="post-full post">
      <header className="post-full-header">
        <h1 className="post-full-title">{post.title}</h1>
        <div className="text-center meta">{`${post.publishedDate} / ${mainTag}`}</div>
      </header>
      <figure className="post-full-image text-center">
        <Image src={post.heroImage.imageUrl} alt={post.heroImage.title} />
      </figure>
      <section
        style={{overflowY: 'inherit', marginBottom: '2em'}}
        className="post-full-content">
        <ReactMarkdown source={post.body} />
      </section>
    </article>
  );
};

Now we're going to test our website. You need to pass the CONTENTFUL_SPACE_ID and CONTENTFUL_ACCESS_TOKEN as an environment variable.

$ CONTENTFUL_SPACE_ID=<space_id> CONTENTFUL_ACCESS_TOKEN=<access_token> npm run dev

Replace the <space_id> and <access_token> with the value that you have from Contentful website. Now you can access the app from http://localhost:3000.

Deploy to Now

To easily make it online, you can use a cloud service such as Zeit with their now cli. To publish it to now you can run

now -e CONTENTFUL_SPACE_ID=<space_id> -e CONTENTFUL_ACCESS_TOKEN=<access_token>

After it successfully published, you can access it through the url that the generates.

Bonus: Integrate SEO into our NextJS application

In the beginning of this post, I mention that one of the reasons to have a blog in our website is to increase our SEO ranking. We have the blog ready for us, now let's do a small modification to provide our website with SEO tag and metadata. For that, we'll need to add some field to our Contentful blog structure and use next-seo to put the metatag in place.

Add meta data field in Contentful

In the Contentful dashboard page, click on the Content model menu and select the Blog Post model.

Click on Add Field button and add a new text field. Let's name it Meta Title then create it. You also to add another text field and name it Meta Description.
Add another new field, select a media type and call it Meta Image.
Update one of the blog content and fill the value for Meta Title and Meta Description, also upload an image for Meta Image field.

Put SEO in action

With the new three additional fields in our contentful data structure, we also need to modify our NextJS application to reflect the changes. First, we'll add new fields in blog.types.ts.

export type BlogPost = {
  id: string;
  body: string;
  description: string;
  publishedDate: string;
  slug: string;
  tags: Array<string>;
  title: string;
  heroImage?: HeroImage;
  author?: Author;
  metaTitle: string;
  metaDescription: string;
  metaImage?: any;
};

We also need to update the convertPost method to map the meta tag fields.

convertPost = (rawData): BlogPost => {
  const rawPost = rawData.fields;
  const rawHeroImage = rawPost.heroImage ? rawPost.heroImage.fields : null;
  const rawAuthor = rawPost.author ? rawPost.author.fields : null;
  return {
    id: rawData.sys.id,
    body: rawPost.body,
    description: rawPost.description,
    publishedDate: moment(rawPost.publishedDate).format('DD MMM YYYY'),
    slug: rawPost.slug,
    tags: rawPost.tags,
    title: rawPost.title,
    heroImage: this.convertImage(rawHeroImage),
    author: this.convertAuthor(rawAuthor),
    metaTitle: rawPost.metaTitle,
    metaDescription: rawPost.metaDescription,
    metaImage: rawPost.metaImage
      ? rawPost.metaImage.fields.file.url.replace('//', 'http://')
      : '',
  };
};

After we update the service class, next, we need to also update the blog detail page to include the meta tag. For that, we'll use next-seo package.

$ npm i --save next-seo

Firstly, we need to update _app.tsx to include a default SEO configuration. We can override the default configuration in each page using NextSeo component. We'll create a new constant for default SEO configuration.

const DEFAULT_SEO = {
  title: 'Blog Tutorial Web',
  description: 'Awesome blog tutorial website',
  openGraph: {
    type: 'website',
    locale: 'en',
    title: 'Blog Tutorial website',
    description: 'Awesome blog tutorial website',
    site_name: 'BlogTutorial',
  },
};

We'll also need to update the render method for this component.

// import the component on the top
import {DefaultSeo} from 'next-seo';

// Update the return from the render method
return (
  <>
    <DefaultSeo {...DEFAULT_SEO} />
    <Component {...pageProps} />;
  </>
);

After we update _app.tsx, if you inspect the element and look at the <head> part now you can see the meta description being rendered.

Finally, we need to update [slug].tsx to override the default SEO config to reflect the meta tag field for a single blog entry.

// Import the NextSeo component on top of the file
import {NextSeo} from 'next-seo';

// Update the render method to include the NextSeo component

<NextSeo
  openGraph={{
    type: 'article',
    title: post.metaTitle,
    description: post.metaDescription,
    images: [
      {
        url: post.metaImage,
        width: 850,
        height: 650,
        alt: post.metaTitle,
      },
    ],
  }}
  title={post.metaTitle}
  description={post.metaDescription}
/>

Summary

To have a good SEO strategy for our website, we need a lot of "good" content on our website. One of the ways to have that content is through a blog. Integrating CMS in the existing website may take time and effort. If we're using a current CMS solution, we may need to set it up in a different subdomain. In this post, I've shown you how to build a simple Blog application using NextJS and Contentful headless cms. Headless CMS such as Contentful is a platform that removes all of the hassles to create a content management system. It also provides flexibility to set up a structure of the content that we need and the view that we want to have for our blog. I hope this tutorial can give you an idea of how to incorporate a blog into your website easily.

Resource/Link

Python Development Workflow with Pyenv

Martin Valentino — Fri, 27 Sep 2019 23:34:39 +0000

I've been using Python programming language professionally for several years now. Previously, I only use python mostly on my uni assignment or some side project work using Raspberry Pi. Since the first time I know python, I have been used a combination of virtualenv and virtualenvwrapper to manage my local python virtual environment and set up my python development workflow. If you are not using the virtual environment on your development workflow, I suggest you to start using it because it will save you with many problems in regards to package versioning and also makes your system environment clean.

My Legacy Workflow

My typical python development workflow:

$ mkdir my-awesome-project
$ mkvirtualenv my-awesome-project --python=python3
$ pip install <my-awesome-project-dependencies>
$ setvirtualenvproject my-awesome-project .

The above steps are what I usually do when I start a new project.

I create a new folder for my project
Create new virtualenv (I use python3)
Install all of my project dependencies
Set default folder for the virtual environment that's newly created.

Once I've done above step, whenever I want to work on my-awesome-project I can just open up a new terminal and type workon my-awesome-project, it automatically activates my-awesome-project virtualenv and enters my project directory.

That workflow works well for me since the first time I knew python and never change since then. However, then I found a problem want to try a new version of python, for example, I have python 3.5 installed on my machine, and I want to try version 3.6 before decided to upgrade to a new version. In my legacy workflow, there is no way I can try a new version of python without actually install it on my machine.

Pyenv to the rescue

I decided to figure out how can I have multiple version of python installed on my machine. If you ever use other languages such as javascript or ruby they have a tool called nvm (nodejs) and rbenv (ruby), that manage different version of language runtime installed on one machine. I google similar thing for python and then pyenv come up. This tool allows us to install multiple versions of python on one machine.

In the next couple of sections, I will describe how you can install this tool in OSX and Ubuntu 18.04 (Sorry windows user!) and also how I incorporate this tool into my development workflow and make it more seamless and convenient than before.

Install pyenv on OSX

Install pyenv in OSX is pretty straightforward. Assume you have homebrew installed already

$ brew update
$ brew install pyenv

Install pyenv on Ubuntu 18.04

The steps I provide below works well on Ubuntu 18.04. I assume it will work with the previous version (but I don't guarantee it)

$ apt-get update
$ apt-get -y upgrade
$ apt-get install -y build-essential libbz2-dev libssl-dev libreadline-dev libsqlite3-dev tk-dev
$ curl -L https://raw.githubusercontent.com/pyenv/pyenv-installer/master/bin/pyenv-installer | bash

After it's installed successfully, you can put this at the end of your shell configuration file (.bash_profile or .zshrc) so it will automatically load when you launch your terminal.

$ export PATH="~/.pyenv/bin:$PATH"
$ eval "$(pyenv init -)"
$ eval "$(pyenv virtualenv-init -)"
$ source ~/.zshrc # or .bash_profile if you're using bash

My new awesome development workflow

After I successfully install pyenv, I can start to play around with a different version of python and also incorporate it into my development workflow. The first thing that I do is install the python version that I want, in this case, I want to keep python 3.6 and also want to play with python 3.7.

pyenv install 3.6.6

# after it successfully installed, you can install version 3.7

pyenv install 3.7.0

After everything is successfully installed, I can start playing around with it.

notes: if you want to make python 3.6.6 as your default system python version, then you can run this

$ pyenv global 3.6.6

New Project

$ mkdir new-awesome-project
$ pyenv virtualenv 3.6.6 new-awesome-project
$ cd new-awesome-project
$ echo "new-awesome-project" > .python-version'

The above step is what I'm doing to start a new project

Create a new folder for my project
Create a new virtual environment using python 3.6.6 and name it new-awesome-project
Go into the project folder
Add .python-version file and inside it put the name of the virtual environment that this project will use. After adding .python-version, Your shell will automatically detect the required virtual environment for this project and activate it immediately. So now every time I enter the directory, it will activate my new-awesome-project virtual environment, and if I exit the directory, it will deactivate it.

Let say you want to try to play around with python 3.7. You can do a similar thing like the previous steps.

$ mkdir python37-sandbox
$ pyenv virtualenv 3.7.0 play-with-python3.7
$ cd python37-sandbox
$ echo "play-with-python3.7" > .python-version

After I run above command, I immediately can play around with python 3.7 in a new virtual environment.

Existing project

For the existing project, what you can do is:

create virtualenv for the existing project
add .python-version file in the root folder of the existing project
- put the name of the virtualenv inside that file
pip install again all requirements for the project

Now every time you enter the project directory, it will activate the virtualenv

Conclusion

I found that pyenv is a convenient package that helps me to manage different version of python installed on my machine. The integration with my shell also makes it easy to activate the virtualenv (hint: it will be active immediately after we enter the directory)

I hope you enjoy reading this post and this information can be useful to you.

Appendix

If you encountered this error while installing python 3.7.0 on ubuntu

BUILD FAILED (Ubuntu 18.04 using python-build 20180424)

Inspect or clean up the working tree at /tmp/python-build.20180825095753.30081
Results logged to /tmp/python-build.20180825095753.30081.log

Last 10 log lines:
  File "/tmp/tmp0ibkfc84/pip-10.0.1-py2.py3-none-any.whl/pip/_internal/__init__.py", line 42, in <module>
  File "/tmp/tmp0ibkfc84/pip-10.0.1-py2.py3-none-any.whl/pip/_internal/cmdoptions.py", line 16, in <module>
  File "/tmp/tmp0ibkfc84/pip-10.0.1-py2.py3-none-any.whl/pip/_internal/index.py", line 25, in <module>
  File "/tmp/tmp0ibkfc84/pip-10.0.1-py2.py3-none-any.whl/pip/_internal/download.py", line 39, in <module>
  File "/tmp/tmp0ibkfc84/pip-10.0.1-py2.py3-none-any.whl/pip/_internal/utils/glibc.py", line 3, in <module>
  File "/tmp/python-build.20180825095753.30081/Python-3.7.0/Lib/ctypes/__init__.py", line 7, in <module>
    from _ctypes import Union, Structure, Array
ModuleNotFoundError: No module named '_ctypes'
Makefile:1122: recipe for target 'install' failed
make: *** [install] Error 1

You can try to install the required package first

$ apt-get install libffi-dev

Setup Flask, NextJs Application with Docker

Martin Valentino — Fri, 27 Sep 2019 04:04:42 +0000

Recently, I'm working on my side-hustle and launch passporr.com. Passporr.com is a platform that allows international students to search and find anything related to their studies. It can help international students by providing them with free tools and knowledge base of the question and answer from the community. I build the platform using Flask (Python web framework), NextJS (React Framework) and wrap everything in Docker. Before build passporr, I can't find a good tutorial on how to serve flask and ReactJS application using docker. So I decided to write one now.

In this post, I'll share how I set up my local development using Docker and docker-compose. I also share how I use docker-machine to deploy it directly to DigitalOcean. The focus of this post is more on how I set up the codebase to work with Docker and docker-compose. In the future post, I'll make more detail example for both the Flask and NextJS.

What are we going to build

The application that I'll showcase here consists of:

Flask application (Backend API)
- Endpoint for authentication
- An endpoint to GET, POST, PUT user
NextJS application (Frontend)
- Anonymous user-accessible routes (Homepage, Component page, Login page)
- Secure routes (Profile page)

Dockerize the application

If you go to the Github and clone the repo, you'll see the codebase consists of three main folders, api, client, nginx. In each the folder, you'll find a Dockerfile that constructs the container for each of the service. You will also see a file name Dockerfile-prod. Dockerfile-prod is a docker file that we're going to use for deploying to production. We'll come back to that file when we talk about deployment.

Flask application image

# Base Image
FROM python:3.7.2-slim

# Install netcat
RUN apt-get update && \
    apt-get -y install netcat && \
    apt-get clean

# set working directory
WORKDIR /usr/src/app

# add and install requirements
COPY ./requirements.txt /usr/src/app/requirements.txt
RUN pip install -r requirements.txt

# add app
COPY . /usr/src/app

# run server
CMD python manage.py run -h 0.0.0.0

For the development image, I use python:3.7.2-slim as the base image and run the application with the built-in web-server from flask. If you look at another file in api folder, you'll find Dockerfile-prod file where I use gunicorn to serve the flask application.

In addition to the flask application image, inside api/project folder, you'll find a folder name db which contain a sql file for creating database and a dockerfile for postgres.

FROM postgres:11.1-alpine

ADD create.sql /docker-entrypoint-initdb.d

NextJS application image

Dockerfile for NextJS application

FROM node:10.16.0-alpine

WORKDIR usr/src/app
ENV PATH /usr/src/app/node_modules/.bin:$PATH

# install and cache app dependencies
COPY package.json /usr/src/app/package.json

RUN npm install

EXPOSE 3000
CMD ["npm", "run", "dev"]

The image for NextJS application is pretty straightforward. I use node:10.16.0-alpine for the base image and run dev script to get the hot-reloading running as well.

Nginx image

To connect the flask API and NextJS app, I use Nginx for that. This part shows how I set up the configuration for Nginx.

server {
  listen 8080;

  location / {
    proxy_pass        http://client:3000;
    proxy_redirect    default;
    proxy_set_header  Upgrade $http_upgrade;
    proxy_set_header  Connection "upgrade";
    proxy_set_header  Host $host;
    proxy_set_header  X-Real-IP $remote_addr;
    proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header  X-Forwarded-Host $server_name;
    proxy_set_header  X-Forwarded-Proto $scheme;
  }

  location /api {
    proxy_pass        http://api:5000;
    proxy_redirect    default;
    proxy_set_header  Host $host;
    proxy_set_header  Upgrade $http_upgrade;
    proxy_set_header  Connection "upgrade";
    proxy_set_header  X-Real-IP $remote_addr;
    proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header  X-Forwarded-Host $server_name;
    proxy_set_header  X-Forwarded-Proto $scheme;
  }
}

From the above Nginx configuration, we can see that the call to /api is re-routed to flask application which is on port 5000. The rest of the requests is routed to NextJS application. I use port 8080 for the default port that Nginx listen to avoid conflict with other port in my machine.

In addition to the above config, the following is the dockerfile for Nginx that is very straightforward.

FROM nginx:1.15.8-alpine

RUN rm /etc/nginx/conf.d/default.conf
COPY /dev.conf /etc/nginx/conf.d

Lastly, to run everything at once, I use docker-compose to orchestrate all of the services.

version: '3.7'

services:
  api:
    build:
      context: ./api
      dockerfile: Dockerfile
    volumes:
      - './api:/usr/src/app'
    ports:
      - 5002:5000
    environment:
      - FLASK_CONFIG=development
      - FLASK_ENV=development
      - APP_SETTINGS=project.config.DevelopmentConfig
      - DATABASE_URL=postgres://postgres:postgres@tutorial-db:5432/dev_db
      - DATABASE_TEST_URL=postgres://postgres:postgres@tutorial-db:5432/test_db
      - SECRET_KEY=ZQbn05PDeA7v11
    depends_on:
      - tutorial-db

  tutorial-db:
    build:
      context: ./api/project/db
      dockerfile: Dockerfile
    ports:
      - 5436:5432
    environment:
      - POSTGRES_USER=postgres
      - POSTGRES_PASSWORD=postgres

  nginx:
    build:
      context: ./nginx
      dockerfile: Dockerfile
    restart: unless-stopped
    ports:
      - 8080:8080
    depends_on:
      - api
      - client

  client:
    build:
      context: ./client
      dockerfile: Dockerfile
    volumes:
      - './client:/usr/src/app'
      - '/usr/src/app/node_modules'
    ports:
      - 3008:3000
    environment:
      - NODE_ENV=development
      - REACT_APP_SERVICE_URL=http://localhost:8080
      - CHOKIDAR_USEPOLLING=true
    depends_on:
      - api

In the docker-compose.yml file above, we'll have four services running (api, tutorial-db, nginx, client). You can open the main application from http://localhost:8080 or separately access the flask application from http://localhost:5002 or NextJS application from http://localhost:3008. You can also access the Postgres database from port 5436.

After you have everything set, you can run the whole configuration by running docker-compose up -d --build

Deploy the application to Digital Ocean

Using docker-machine you can easily deploy your application directly to cloud providers such as DigitalOcean or AWS. In this post, I'll show how to deploy it to digital ocean, for more information on deploying to AWS you can see it here. Before doing the following steps, please make sure you have

DigitalOcean account. Use this link to create one if you don't have. If you're a student, you can also take advantage of Github Education Pack to get \$50 in platform credit on DigitalOcean
A personal access token for DigitalOcean

Create a new docker engine instance

The first thing to do is to create a docker-machine instance on DigitalOcean.

docker-machine create --driver digitalocean --digitalocean-access-token <your_personal_access_token> <name-for-your-docker-machine>

After it successfully created, you can check it with docker-machine ls.

NAME                     ACTIVE   DRIVER         STATE     URL                              SWARM   DOCKER     ERRORS
<docker-machine-name>    -        digitalocean   Running   tcp://<docker-machine-ip>:2376           v19.03.1

Deploy the application

The following commands will connect you to the instance in DigitalOcean, and you can deploy the application using docker-compose

Activate the docker-machine. Replace <docker-machine-name> with the actual docker-machine name from the previous step.

$ docker-machine env <docker-machine-name>

Activate shell configuration

$ eval $(docker-machine env <docker-machine-name>)

Run docker-compose

$ docker-compose -f production.yml up -d --build

To check if the application running, you can run

$ docker ps

Make sure you have three containers running there. You can also access the application from http://<docker-machine-ip>

Summary

Using docker from development and push it to production has helped me develop the application quickly. I also have more confidence because my application has the same environment setting in both development and production. The steps that I show here for deployment from local machine maybe not ideal for team-setting or more robust application. For that case, you may need to try an option using CI/CD setting.

I hope this help, and please put your feedbacks or questions if any.

Originally published at https://martinlabs.me.