In this article we will set up Strapi and host it on Heroku. Using these tools we can quickly create projects with very little dev ops knowledge, perfect for hobbiest developers!

By the end of this article we should have been able to:
- Install Strapi Locally
- Push your Strapi codebase to a git repository (I will use GitHub here)
- Connect your Heroku account to your Github(the project repository)
- Enable Automatic Deployments
- Connect your Strapi project to Postgres add-on database provided by Heroku.

## Before we start...
### What is Strapi
>[Strapi](https://strapi.io/) is an open-source, **Node.js based**, Headless CMS that saves developers a lot of development time while giving them the freedom to use their favorite tools and frameworks. Strapi also enables content editors to streamline content delivery (text, images, video, etc) across any devices.

### What is Heroku
> [Heroku](https://www.heroku.com/) is a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud. It supports several languages such as Java, **Nodejs**, Go, PHP, Python.

### What you will need
- Github Account 
- Heroku Account
- Git Installed on your machine
- Nodejs v14+ installed

All of the above are free

## Installing Strapi locally

```
npx create-strapi-app my-project --quickstart
```
The above command will create a Strapi project called "my-project" in the directory you are in. The quickstart option will automatically start the server once it has finished installing. Once the install has completed and the local server has started you would be able to access the cms using this link [http://localhost:1337/admin](http://localhost:1337/admin).

Using the link for the first time will take you to create a super user. This will allow us to create content schemas locally that we can then deploy to Heroku. We will not be able to create content types on Heroku as it runs in production mode. [Read more here](https://docs.strapi.io/user-docs/latest/content-types-builder/managing-content-types.html#managing-content-types)

## Pushing to your GitHub

Create a repository on GitHub and then push your Strapi code to GitHub.  

```
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/USERNAME/NAMEOFREPOSITORY.git
git push -u origin main
```


## Connect to Heroku
We will now link our Strapi code from GitHub to Heroku and set up automatic deploys.
- Log into your GitHub account and keep the tab open.
- Log into your Heroku account
- Create a new app
- Choose GitHub as your deployment method
- Find your repository for your Strapi CMS
- Enable automatic deploys option

After a short while Heroku will deploy your Strapi code from GitHub.

## Using PostgreSQL on Heroku
Heroku does not fully support SQLite (Strapi default). Whenever Heroku does a dyno cycle it will complety wipe your database. To get around this we will be using Heroku PostgreSQL addon. Follow through the screen prompts to complete the add on install.
![Screenshot 2022-01-18 003511.jpg](https://res.cloudinary.com/futang-co-uk/image/upload/v1642466119/Screenshot_2022_01_18_003511_21ae8a21f7.jpg)

Once the add-on is installed on Heroku we will need to update our codebase:
- Install pg-connection: yarn add pg-connection-string (helper functions to connect to PostgreSQL)
- Install PostgreSQL client: yarn add pg
- Create a new directory in the config folder: config\env\production
- Create a new file in the new production director: production\database.js
- Add the below into the file:
```
const parse = require('pg-connection-string').parse;
    const config = parse(process.env.DATABASE_URL);
    module.exports = ({ env }) => ({
      connection: {
        client: 'postgres',
        connection: {
          host: config.host,
          port: config.port,
          database: config.database,
          user: config.user,
          password: config.password,
          ssl: {
            rejectUnauthorized: false
          },
        },
        debug: false,
      },
    });
```
Add, commit and push your changes. Heroku will then start deplying your changes. Once it is finished you should be able to access your Strapi CMS with the link provided by Heroku (Remember to add /admin at the end)

### How does our code know to use the Heroku PostgreSQL database?
After installing Heroku PostgreSQL add-on we can go to Settings > Config vars > Reveal Config Vars. This shows us a production environmental variables. The step previously (config\env\production\database.js) tells our Strapi app  to use these vars from Heroku (Heroku is running our app in production mode). 

## UPDATE as of strapi 4.0.6
> The session middleware requires some keys to secure the cookies and encrypt data, for more information on how this works please see [koa-session](https://github.com/koajs/session/blob/master/Readme.md). In order to properly configure the middleware you will need to add these key settings to your server.js config file:


```
module.exports = ({ env }) => ({
  host: env('HOST', '0.0.0.0'),
  port: env.int('PORT', 1337),
  app: {
    keys: env.array("APP_KEYS", ["testKey1", "testKey2"]),
  },
  // ...
});
```

This must also be added into Heroku's config vars

## Resources:
- Heroku and SQLite: [Read more here](https://devcenter.heroku.com/articles/sqlite3)
- [Strapi](https://strapi.io/)
- [Heroku](https://www.heroku.com/)
- [Github](https://github.com/)


_DSC9884.jpg

Strapi and Heroku setup

## Why

>Like with project updates on Heroku, the file system doesn't support local uploading of files as they will be wiped when Heroku "Cycles" the dyno. This type of file system is called [ephemeral](https://devcenter.heroku.com/articles/dynos#ephemeral-filesystem), which means the file system only lasts until the dyno is restarted (with Heroku this happens any time you redeploy or during their regular restart which can happen every few hours or every day). Due to Heroku's filesystem you will need to use an upload provider such as AWS S3, Cloudinary, or Rackspace. You can view the documentation for installing providers [here](https://docs.strapi.io/developer-docs/latest/plugins/upload.html#create-providers) and you can see a list of providers from both Strapi and the community on [npmjs.com](https://www.npmjs.com/search?q=strapi-provider-upload-&page=0&perPage=20)

[Source](https://www.npmjs.com/search?q=strapi-provider-upload-&page=0&perPage=20)

## Before we start...
### What is Strapi
>[Strapi](https://strapi.io/) is an open-source, **Node.js based**, Headless CMS that saves developers a lot of development time while giving them the freedom to use their favorite tools and frameworks. Strapi also enables content editors to streamline content delivery (text, images, video, etc) across any devices.

### What is Heroku
> [Heroku](https://www.heroku.com/) is a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud. It supports several languages such as Java, **Nodejs**, Go, PHP, Python.

### What is Cloudinary
>[Cloudinary](https://cloudinary.com/) is a cloud-based service offering features and APIs for uploading, storing, managing, and delivering media assets. When delivering assets, optimizations and other transformations can be applied to those assets based on options added to the delivery URLs.

### We'll need the following:
- A strapi project on Heroku
- A strapi project on local
- A cloudinary account
- Nodejs v14+ installed

All the above are free

## Setting up a Cloudinary account
Setting up a free tier account with [Cloudinary](https://cloudinary.com/) is very straight forward. Just follow the on screen prompts until you are taken to your account dashboard.

We will need to take note of the following in the "Account details section" to use later:
- Cloud name
- API Key
- API Secret
**It goes without saying... Don't share these details with anyone**

## Adding cloudinary provider to Strapi
Make sure your Strapi server is not running before installing the cloudinary provider


```
yarn add strapi-provider-upload-cloudinary
```

### Strapi config
Once the provider has finished being added to your project we will need to create **./config/plugins.js** with the following:


```
module.exports = ({ env }) => ({
  upload: {
    config: {
      provider: "cloudinary",
      providerOptions: {
        cloud_name: env("CLOUDINARY_CLOUD_NAME"),
        api_key: env("CLOUDINARY_API_KEY"),
        api_secret: env("CLOUDINARY_API_SECRET"),
      },
      actionOptions: {
        upload: {},
        delete: {},
      },
    },
  },
});

```

### Add keys to environment config
At the root directory create an .env file and replace "XXX" with your credentials. (Its under the Account Details section when you log in )

Its also worth double checking that this file to gitignore as it will contain sensitive information

```
CLOUDINARY_CLOUD_NAME=XXX
CLOUDINARY_API_KEY=XXX
CLOUDINARY_API_SECRET=XXX

```

# Security Middleware Configuration
>Due to the default settings in the Strapi Security Middleware you will need to modify the contentSecurityPolicy settings to properly see thumbnail previews in the Media Library. You should replace strapi::security string with the object bellow instead as explained in the [middleware configuration](https://docs.strapi.io/developer-docs/latest/setup-deployment-guides/configurations/required/middlewares.html#loading-order) documentation.

[Source](./config/middlewares.js)

```
// ./config/middlewares.js

module.exports = [
  // ...
  {
    name: 'strapi::security',
    config: {
      contentSecurityPolicy: {
        useDefaults: true,
        directives: {
          'connect-src': ["'self'", 'https:'],
          'img-src': ["'self'", 'data:', 'blob:', 'res.cloudinary.com'],
          'media-src': ["'self'", 'data:', 'blob:', 'res.cloudinary.com'],
          upgradeInsecureRequests: null,
        },
      },
    },
  },
  // ...
];
```
Commit and push the changes after verifying that these changes are working locally.

## Set up config vars on Heroku

You will need to add the config vars in Heroku:
1. Log into your Heroku account
2. Open your project
3. Settings
4. Config vars
5. Reveal config vars
6. Add your variable names here

![Screenshot 2022-01-19 141753.jpg](https://res.cloudinary.com/futang-co-uk/image/upload/v1642601884/Screenshot_2022_01_19_141753_85c7685858.jpg)

## Resources
- [Strapi](https://strapi.io/)
- [Heroku](https://www.heroku.com/)
- [Cloudinary](https://cloudinary.com/)
- [Issue with set up with v4 strapi](https://github.com/strapi/strapi/issues/11820#issuecomment-986880822)
- [Content security issue](https://github.com/strapi/strapi/issues/11820#issuecomment-986880822)

SD_04_T88_1223I_ZZ_X_EC_1.webp

Save images to Cloudinary when using Strapi and Heroku

Images added while using the WYSIWYG editor are returned as part of the content response which is a string. So we end up with something like this:

```
[`  ...
  <p>Bleh bleh.
  <img src="YOUR IMAGE SRC" alt="YOUR IMAGE ALT"></p>
  <h2>Blah blah:</h2>
    ...`
]
```

We could just render this as it is, but we would not get the benefits offered by [Next.js's Image component](https://nextjs.org/docs/api-reference/next/image).


>The Next.js Image component, next/image, is an extension of the HTML <img> element, evolved for the modern web. It includes a variety of built-in performance optimizations to help you achieve good Core Web Vitals. These scores are an important measurement of user experience on your website, and are factored into Google's search rankings.

The features are:
- Always serve correctly sized image for each device, using modern image formats
- Prevent Cumulative Layout Shift automatically.
- Images are only loaded when they enter the viewport, with optional blur-up placeholders
- On-demand image resizing, even for images stored on remote servers

## The plan
- Use the .split() method to break the string down and store it in to an array.
- When rendering, we will loop the array
- If an item in the array is an img, use Next.js image component
- If an item in the array is not an img, out put as normal

### Break down the string

>The split() method divides a String into an ordered list of substrings, puts these substrings into an array, and returns the array.  The division is done by searching for a pattern; where the pattern is provided as the first parameter in the method's call.

[Source](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split)

We will use a regex as the delimeter to split the string at every img tag. We will also want to preserve everything inside the image tag. For this I will create a regex object to store some handy regexes:

```
export const regexes = {
  imgTag: /(<img [^>]*src="[^"]*"[^>]*>)/gm,
  imgSrc: /src="(.*?)"/,
  imgAlt: /alt="(.*?)"/,
};
```

With that out the way we can now use these regexes to begin breaking down the string litral returned from Strapi:

```
const content = YOUR.PROPS.split(regexes.imgTag);
```
The above will give us a new array similar to below:
```
[`  ...
  '<p>Bleh bleh,'
  '<img src="YOUR IMAGE SRC" alt="YOUR IMAGE ALT">',
  '</p><h2>Blah blah:</h2>'
    ...`
]
```

### Some helper functions
We will use the regexes.imgSrc and regexes.imgAlt from before to help us here:

```
function getImgSource(image) {
  return image.match(regexes.imgSrc)[1];
}

function getImgAlt(image) {
  return image.match(regexes.imgAlt)[1];
}
```

>The .match() method retrieves the result of matching a string against a regular expression.

[Source](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match)


### Use the new array

>The .map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

[Source](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)

With the new array and our helper functions ready we can now use the .map() method to render our content

```
{
  content.map((a) => {
    {
      if (a.match(regexes.imgTag)) {
        return (
          <div key={a}>
            <Image
              src={getImgSource(a)}
              alt={getImgAlt(a)}
              size={25}
              layout="fill"
              objectFit="contain"
            />
          </div>
        );
      } else {
        return <div key={a} dangerouslySetInnerHTML={{ __html: a }} />;
      }
    }
  });
}

```

## Styles
Next.js image component has many configurable options. In my case I don't actually know the diemensions of my images that I will be using so I will use the fill property. (More info [here](https://nextjs.org/docs/basic-features/image-optimization#what-if-i-dont-know-the-size-of-my-images))


```
size={25} layout="fill" objectFit="contain" 
```
This will get the image at 25% of its original size, place the image so it fills the entire container but never break out of it. Using fill sets the image to position: absolute, this means I will also need to wrap ths image component in an element that has a position set to relative to not break the pages layout

```
<div key={a} style={{ position: "relative" }}>
  <Image
    src={getImgSource(a)}
    alt={getImgAlt(a)}
    size={25}
    layout="fill"
    objectFit="contain"
  />
</div>;

```

SD_04_T88_4148B_E2_X_EC_1.webp

Next.js Image component and Strapi content

In this article we will set up a simple blog using Strapi CMS with Next.js front-end to display it content.

By the end of this article we should have been able to:
- Install Strapi Locally
- Set up some content
- Install Next.js
- Set up some components to display data

## Before we start...
### What is Strapi
>[Strapi](https://strapi.io/) is an open-source, **Node.js based**, Headless CMS that saves developers a lot of development time while giving them the freedom to use their favorite tools and frameworks. Strapi also enables content editors to streamline content delivery (text, images, video, etc) across any devices.

### What is Nextjs
> [Next.js](https://nextjs.org/) is a React frame work that lets you build server-side rendering and static web applications using React. It's a great tool to build your next website. It has many great features and advantages, which can make Nextjs your first option for building your next web application.

### What you will need
- Nodejs v14+ installed
## Installing and setting up Strapi locally

```
npx create-strapi-app my-project --quickstart
```
The above command will create a Strapi project called "my-project" in the directory you are in. The quickstart option will automatically start the server once it has finished installing. Once the install has completed and the local server has started you would be able to access the cms using this link [http://localhost:1337/admin](http://localhost:1337/admin).

Using the link for the first time will take you to create a super user.

### Content Type Builder
> [The Content-type Builder](https://docs.strapi.io/user-docs/latest/content-types-builder/introduction-to-content-types-builder.html) is a core plugin of Strapi. It is a feature that is always activated by default and cannot be deactivated. The Content-type Builder is however only accessible when the application is in a development environment.

We will use the Content Type Builder to create some collection types with the following properties:
- **Article**: Title (Text), Content (Rich text), Cover (Media), Author (Relation with User (from: users-permissions), Categories (Relation with Category )
- **Category**: Name (Text), Articles (Relation with Article )

### Permissions
>Some features of the admin panel, as well as the content managed with Strapi itself, are ruled by a system of permissions. These permissions can be assigned to roles, which are associated with the users who have access to the admin panel, the administrators. But it is also possible to grant permissions more publicly, to give access to content to the end users of your Strapi application.

[Source](https://docs.strapi.io/user-docs/latest/users-roles-permissions/introduction-to-users-roles-permissions.html)

We will need to set up some permissions in order for us to retrieve the content from our blog. Go to "Settings" > "Users & Permissions plugin" > "Roles" > "Public"

![Screenshot 2022-01-30 003212.jpg](https://res.cloudinary.com/futang-co-uk/image/upload/v1643502749/Screenshot_2022_01_30_003212_8f62da34fb.jpg)

In the Public section open the "Article" accordion and check "find" & "findOne" (Do the same for Category)
![Screenshot 2022-01-30 003307.jpg](https://res.cloudinary.com/futang-co-uk/image/upload/v1643502859/Screenshot_2022_01_30_003307_0ff83101ff.jpg)

### Add some content
Go to content manager and start adding some articles and categories.
![Screenshot 2022-01-30 003631.jpg](https://res.cloudinary.com/futang-co-uk/image/upload/v1643503016/Screenshot_2022_01_30_003631_eb88540951.jpg)

## Installing Next.js
```
npx create-next-app frontend
```
The above command will create a Next.js app called frontend (you should name it to something you can work with).

## Packages
I use the following packages, but feel free to ignore this step or add your own favourites.

### remark
> This package is a unified processor with support for parsing markdown input and serializing markdown as output by using unified with remark-parse and remark-stringify.
[Source](https://www.npmjs.com/package/remark)

### remark html
>This package is a unified (remark) plugin that compiles markdown to HTML.
[Source](https://www.npmjs.com/package/remark-html#what-is-this)

### date-fns
> date-fns provides the most comprehensive, yet simple and consistent toolset
for manipulating JavaScript dates in a browser & Node.js. 
[Source](https://www.npmjs.com/package/date-fns)

## Fetch data from strapi
We will need a function to help us fetch data from our Strapi API. I created my Fetch function in pages/api/fetch.js (feel free to make it where ever makes sense for you)


```
export function getStrapiURL(path = '') {
  return `${process.env.NEXT_PUBLIC_STRAPI_API_URL || 'http://localhost:1337'}${path}`;
}

export async function fetchAPI(path) {
  const requestUrl = getStrapiURL(path);
  const response = await fetch(requestUrl);
  const data = await response.json();
  return data;
}

```
getStrapiURL will return a url using NEXT_PUBLIC_STRAPI_API_URL (if available in  .env) otherwise use the local. It will than append the path param at the end.

fetchAPI will fetch the requestUrl and return the data ready to be consumed by our components.


### Constants
I also create a object to store my end points in utils/constants.js

```
export const API_ENDPOINT = {
  ARTICLE: '/api/articles',
  ARTICLES: '/api/articles?populate=*&sort=publishedAt:DESC&pagination[page]=',
  CATEGORIES: '/api/categories',
  CATEGORY_FILTER: '?populate[articles][populate]=*',
};

```

### Media
We need a function to aslo get strapi Media. I created mine in pages/api/media.js

```
import { getStrapiURL } from './fetch';

export function getStrapiMedia(media) {
  const imageUrl = media.url.startsWith('/') ? getStrapiURL(media.url) : media.url;
  return imageUrl;
}
```

Locally saved images have a structure like /uploads/. If your images are hosted else where it will more than likely start with https.

### global.css
For this example we will greate a global.css. This file will contain styles shared by all components. It's a good place to put your resets and typography.

### _app.js
Paste the below into your _app.js.

```
// Styles
import '../styles/global.css';

export default function App({ Component, pageProps }) {
  return (
      <Component {...pageProps} />
  );
}
```

## Components
_This article assumes you know React.js and will use the below as a reference only._

We will create an Index page that shows the latest articles sorted by most recently published (API_ENDPOINT.ARTICLES).

### Layout
components/layout.js
```
// Next Components
import Head from 'next/head';

export const siteTitle = 'My blog';

export default function Layout({ children }) {

  return (
    <>
      <Head>
        ...
      </Head>
      ...
      <main >{children}</main>
      ...
    </>
  );
}

```
### index.js (Home page)
pages/index.js

```
// Components
import Head from 'next/head';
import Image from 'next/image';
import Link from 'next/link';

// Custom components
import Layout, { siteTitle } from '../components/layout';

// Utils
import { fetchAPI } from './api/fetch';
import { API_ENDPOINT } from '../utils/constants';
import Date from './date';

export async function getStaticProps() {
  const latestProjects = await fetchAPI(API_ENDPOINT.ARTICLES);
  const latestProjectsAttributes = latestProjects.data.attributes;
  return {
    props: {
      postData: latestProjectsAttributes.articles,
    },
  };
}

export default function Home({ postData }) {
  return (
    <Layout>
      <Head>
        <title>{siteTitle} | home</title>
      </Head>
      ...
        <>
          {postData.data.length > 0 && postData.data.map(({ id, attributes }) => {
              return (
        		{!!attributes.Cover.data && (
                  <Image
                    src={attributes.Cover.data.attributes.url}
                    alt={attributes.Cover.data.attributes.name}
                    sizes={35}
                    layout="fill"
                    objectFit="cover"
                    objectPosition="top"
                  />
                )}
        
                <Link href={`/posts/${id}`}>
                  <a>{attributes.Title}</a>
                </Link>
        		<Date dateString={attributes.publishedAt} />
              )
            })
           }
        </>
      ...
    </Layout>
  );
}

```

Fu Tang

Hello, I am a Front End Developer