Sveltekit Strapi screenshot

Sveltekit Strapi

Author Avatar Theme by Djpogo
Updated: 21 Feb 2022
7 Stars

Categories

Overview

This article is a product analysis of the example project for building a Sapper/Strapi website. The project consists of two main components: SvelteKit (soon to be renamed to Sapper) and Strapi. The SvelteKit part of the project is currently not runnable, but the author states that they are working on it. The article provides instructions on setting up the project and configuring Strapi before the Sapper application can display any content.

Features

  • Sapper (soon to be renamed SvelteKit)
  • Strapi
  • Ability to create a Sapper .env file and create/update a Strapi .env file with the necessary JWT_SECRETs
  • Configuration of Strapi admin account
  • Configuration of public readability for pages and navigation in Strapi
  • Creation of an index page in Strapi
  • Setting up a navigation menu in Strapi

Installation

To install the theme, follow these steps:

  1. Use npm run setup in the project folder to create the Sapper .env file and create/update the Strapi .env file with the required JWT_SECRETs. Note that this command will not change any other values in your .env files. If you run this command on an existing Strapi instance, your backend and frontend Strapi users will need to sign in again.

  2. Before setting up Strapi, run npm run setup to create a suitable .env file.

  3. Configure your Strapi installation by following these steps:

    • Go to Strapi Admin and create your admin account.
    • Log in to the admin account.
    • Click on “Settings” and then “Roles”.
    • Choose “Public” and allow the “find” action for “Navigation” and “findone” for “Pages”. This is necessary to avoid a 403 error.
    • Click on “Pages” in the left-hand menu and add a page. Make sure to check the “IndexPage” box to create a root page for your website.
    • Click “Save” and then “Publish”.
    • Click on “Navigation” in the menu and add the newly created index page to the navigation.
    • Click “Save” and then “Publish”.
  4. The Sapper application will now show a navigation menu and a blank page, ready for your project.

Summary

This product analysis discusses an example project for building a Sapper/Strapi website. It highlights the main features of the project, including the use of Sapper (soon to be renamed SvelteKit) and Strapi, as well as the installation process and steps for configuring Strapi before the Sapper application can display content. The analysis provides a concise overview of the article and the key information it conveys.