DEV Community

Cover image for Adding Netlify CMS to an Angular Scully blog site
Emeka Elo-Chukwuma
Emeka Elo-Chukwuma

Posted on • Edited on • Originally published at brunoelo.com

Adding Netlify CMS to an Angular Scully blog site

#angular #netlify #cms #scully

Introduction

This article aims to guide you through the configuration of netlify CMS in your angular project that is built with Scully static site generator and deployed on Netlify.
We will be using the Angular scully blog project we built in a previous article. Kindly check it out if you haven't so you can be up to speed.

Demo

Here is the final result of what we will be building

Netlify CMS

This is a git-based CMS that allows us manage the content of our applications that are stored in repositories on any of the version control platforms such as Github, Bitbucket or Gitlab. It supports a variety of file formats like markdown, JSON, YAML and TOML.

Now that we have some background with the tools we are using, let's begin
doctor strange ready

Adding Netlify CMS to your Angular-Scully app

In the src folder in your app, create a folder named admin which will contain two files namely; index.html and config.yml.

src
 └ admin
     ├ index.html
     └ config.yml
Enter fullscreen mode Exit fullscreen mode

The src/admin/index.html is the file which loads/fetches the admin panel that handles access to the netlify CMS app for your your site while the src/admin/config.yml handles Netlify CMS configuration.

Add the code snippet below to the src/admin/index.html

<!-- src/admin/index.html -->

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Content Manager</title>
</head>
<body>
  <!-- Include the script that builds the page and powers Netlify CMS -->
  <script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

The code snippet above is just basic html page that loads the actual admin page from a CDN.

Here is a sample configuration for the config.yml. It is also important to go through the configuration docs for more insight on what these settings do. Add this snippet below or customise to fit your use case.

# src/admin/config.yml

backend:
  name: git-gateway
  branch: main # Branch to update (optional; defaults to master)

media_folder: "src/assets/images" # Media files will be stored in the repo under assets/images
public_folder: "/assets/images" # The src attribute for uploaded media will begin with /assets/images

collections:
  - name: "blog" # Used in routes, e.g., /admin/collections/blog
    label: "Blog" # Used in the UI
    folder: "blog" # The path to the folder where the documents are stored
    create: true # Allow users to create new documents in this collection
    #slug: "{{year}}-{{month}}-{{day}}-{{slug}}" # Filename template, e.g., YYYY-MM-DD-title.md
    fields: # The fields for each document, usually in front matter
      - {label: "Layout", name: "layout", widget: "hidden", default: "blog"}
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Description", name: "description", widget: "string"}
      #- {label: "Slug", name: "slug", widget: "string"}
      - {label: "Published", name: "published", widget: "boolean", default: true}
      - {label: "Publish Date", name: "date", widget: "datetime"}
      - {label: "Post Image", name: "image", widget: "image"}
      - {label: "Rating (scale of 1-5)", name: "rating", widget: "number"}
      - {label: "Body", name: "body", widget: "markdown"}
Enter fullscreen mode Exit fullscreen mode

Include the src/admin directory of the Netlify CMS in your angular.json file so that the files can be included in the build directories of your static site.

"projects": {
    "angular-blog": {
      ...
      "architect": {
        "build": {
          ...
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/admin"
            ],
            ...
          },
          ...
      }
    }
  },
Enter fullscreen mode Exit fullscreen mode

When you run the command npm run build you should see the admin directory in the dist folder:

dist
├ angular-blog
|    └ admin
|        ├ index.html
|        └ config.yml
└ static
     └ admin
          ├ index.html
          └ config.yml
Enter fullscreen mode Exit fullscreen mode

Netlify CMS authentication

Authentication on Netlify web app (the backend)

Steps to enable Identity and Git Gateway

  • Log into your netlify web app platform
  • Once you get to your dashboard, click on sites tab
  • Select the site you want to enable netlify identity for
  • Click site settings tab
  • Click on Identity on the left side tab
  • Click the Enable Identity button
  • Under Registration Preferences, click Edit settings and choose Invite only option. (For the sake of the demo, I have left mine as open)
  • If you would like to enable third-party login, add a provider in the External providers section.
  • Scroll down to Git Gateway in the Services section and click the Enable Git Gateway button.

Authentication in your app (the frontend)

We need to add the Netlify Identity Widget which basically handles the interface needed to connect to the backend we configured in the previous step. To include the widget, add the script tag below in the head of your CMS index file at src/admin/index.html and also in the head of your main index file src/index.html.

<!-- src/admin/index.html -->

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Content Manager</title>
<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
</head>
<body>
  <!-- Include the script that builds the page and powers Netlify CMS -->
  <script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode 
<!-- src/index.html -->

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AngularBlog</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
</head>
<body>
  <app-root></app-root>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

When a user logs in with the Netlify Identity widget, an access token directs to the site homepage. In order to complete the login and get back to the CMS, redirect the user back to the /admin/ path. To do this, add the following script before the closing body tag of your site's main index page:

<script>
  if (window.netlifyIdentity) {
    window.netlifyIdentity.on("init", user => {
      if (!user) {
        window.netlifyIdentity.on("login", () => {
          document.location.href = "/admin/";
        });
      }
    });
  }
</script>

Push your code to your github repo which will trigger a build process on netlify.

Accessing the CMS in your browser

You can access your site's CMS at yoursite.com/admin/

Checkout the CMS demo for Angular-Scully blog. Click login with Netlify Identity and choose Sign up so you can create an account to access the CMS.

Please be good and have fun posting. Thank you for reading.

Reference

Connect

If you would like to connect with me, I'm available on;

  • Discord: brunoelo#8120
  • Twitter: BrunoElo

Top comments (0)

Read next

renukapatil profile image

9. Module System in Angular

Renuka Patil -

endykaufman profile image

Adding multi-language support to NestJS and Angular applications

ILshat Khamitov -

renukapatil profile image

7.Performance Optimization: Understanding Change Detection(Zone.js | default | onPush), Lazy Loading, Track By in ngFor

Renuka Patil -

mairouche profile image

Setup a Micro-Frontend architecture in 15min with Vite!

Meidi Airouche -