Skip to main content

Day 4 - Installing Strapi, Building Types, Relations

Housekeeping

1. Demo: Site Map

A quick build of a site map in Figma.

Creating labels/colours for:

  • Single pages (i.e. About, Contact, etc)
  • List entry pages (i.e. Gallery index page)
  • Item Collection (i.e. one “page” that represents multiple items in a collection)

2. Demo: Strapi Installation and Content-type Builder

Materials

Instructions

See: Strapi Quick Start Guide

  1. Create a new project

    $ npx create-strapi-app@latest my-project --quickstart
    • Potential installation problems
      • Port conflict: for example, Razor keyboards also use port 1337
        • Solution
          1. Change Strapi port to 1338 (for exmaple) in .env file;
          2. Rebuild your project
            $ npm run build
          3. Run development server
            $ npm run develop
      • Windows users:
  1. Register the first administrator user
  2. Create collection types with the Content-type Builder
  3. Create new entries
  4. Set Roles & Permissions
  5. Publish the content
  6. Create API token
    • Note: you only see the token once. Copy and Paste token somewhere safe, like a .env file in the root of your project:
      API_TOKEN=asdlfandsfj8373nehd93hdk...
    • Using your token for requests:
      1. Open Postman;
      2. Enter your endpoint URL:
        http://localhost:1337/api/articles
        • You should get an “UnauthorizedError” because you didn’t supply a token;
      3. Go to Authorization in Postman to add your token:
        • Type: Bearer Token;
        • Token: Paste the token you copied from Strapi;
      4. Re-submit request and you should now receive the list of items.

3. Demo: Enumeration vs Relation fields

Materials

Notes and gotchas

  • If you edit a Relation after Entries have been added, you will need to re-set the Relation values in each Entry. Moral: add the minimum amount of content until you’ve finalized your Model to save you some time.
  • The Strapi API won’t retrieve Relation data by default. You have to explicitly request the Relations with a populate query parameter:
    http://localhost:1338/api/resources?populate=*

4. Lab Time

Above and Beyond

Assignments