Strapi Community Content

https://github.com/strapi/community-content
Admin
A platform for the Strapi community to contribute and collaborate on educational content, including...
Tokens:12,507
Snippets:157
Trust Score:9.8
Update:10 months ago
Show doc for...
Tokens:
Raw
### Start Backend Server (Bash)

Source: https://github.com/strapi/community-content/blob/master/tutorials/code/gatsby-strapi-typescript-tutorial/frontend/README.md

Starts the Strapi backend server independently. Requires navigating to the 'backend' directory and supports both Yarn and npm.

```bash
cd backend

# Using yarn
yarn build
yarn develop

# Using npm
npm run build
npm run develop
```

--------------------------------

### Install Dependencies with Yarn

Source: https://github.com/strapi/community-content/blob/master/tutorials/code/deliveroo-clone-next-strapi-tutorial/backend/README.md

Installs all necessary project dependencies using the Yarn package manager. Ensure Yarn is installed globally before running this command.

```bash
yarn
```

--------------------------------

### Clone and Install Dependencies (Bash)

Source: https://github.com/strapi/community-content/blob/master/tutorials/code/gatsby-strapi-typescript-tutorial/frontend/README.md

Clones the repository and installs project dependencies. Supports both Yarn and npm package managers.

```bash
git clone git@github.com/strapi/strapi-starter-gatsby-typescript-blog
cd blog-strapi-gatsby-typescript

# Using yarn
yarn setup:yarn

# Using npm
npm run setup:npm
```

--------------------------------

### Start Frontend Server (Bash)

Source: https://github.com/strapi/community-content/blob/master/tutorials/code/gatsby-strapi-typescript-tutorial/frontend/README.md

Starts the GatsbyJS frontend development server independently. Requires navigating to the 'frontend' directory and supports both Yarn and npm.

```bash
cd frontend

# Using yarn
yarn develop

# Using npm
npm run develop
```

--------------------------------

### Build and Run Strapi Server in Production

Source: https://github.com/strapi/community-content/blob/master/tutorials/code/deliveroo-clone-next-strapi-tutorial/backend/README.md

Builds the Strapi application for production and then launches the production server. This is the recommended method for deploying the application.

```bash
yarn build
yarn start
```

--------------------------------

### Run Strapi Server in Development Mode

Source: https://github.com/strapi/community-content/blob/master/tutorials/code/deliveroo-clone-next-strapi-tutorial/backend/README.md

Starts the Strapi development server, enabling hot-reloading and other development-specific features. This command is typically used during the development phase.

```bash
yarn develop
```

--------------------------------

### Start Strapi Application

Source: https://github.com/strapi/community-content/blob/master/tutorials/code/gatsby-strapi-tutorial/cms/plugins/content-manager/README.md

Command to start the Strapi development server. This command should be run from the root of the Strapi application directory.

```bash
strapi start
```

--------------------------------

### Start Gatsby Development Server (Shell)

Source: https://github.com/strapi/community-content/blob/master/tutorials/code/gatsby-strapi-tutorial/blog/README.md

Commands to navigate into the newly created Gatsby project directory and start the development server. This allows for real-time previewing of changes.

```shell
cd my-default-starter/
gatsby develop
```

--------------------------------

### Strapi Project Setup and Admin Panel Replacement (Shell)

Source: https://github.com/strapi/community-content/blob/master/tutorials/code/jekyll-strapi-tutorial/api/admin/README.md

This snippet details the command-line operations to create a new Strapi project, remove the default admin panel, and create a symbolic link to a globally installed admin panel for development purposes.

```shell
strapi new myApp
cd myApp
rm -rf admin
ln -s /usr/local/lib/node_modules/strapi-generate-admin admin
```

--------------------------------

### Create Strapi Blog Starter using npm/yarn

Source: https://context7.com/strapi/community-content/llms.txt

Provides commands to bootstrap a new blog application using Strapi starter templates with either npm or yarn. It lists available starter templates for various frontend frameworks and outlines the steps to start both the Strapi backend and the frontend application.

```bash
# Using npm
npx create-strapi-starter my-blog next-blog

# Using yarn
yarn create strapi-starter my-blog next-blog

# Available starters:
# - next-blog (Next.js + Strapi blog)
# - nuxt-blog (Nuxt.js + Strapi blog)
# - gatsby-blog (Gatsby + Strapi blog)
# - next-ecommerce (Next.js + Strapi + Snipcart)
# - nuxt-e-commerce (Nuxt.js + Strapi + Snipcart)
# - next-corporate (Next.js corporate site)
# - gatsby-corporate (Gatsby corporate site)
# - gatsby-catalog (Gatsby product catalog)
# - gridsome-portfolio (Gridsome portfolio)

# After creation, start both servers:
cd my-blog

# Terminal 1: Start Strapi backend
cd backend
npm install
npm run develop

# Terminal 2: Start Next.js frontend
cd frontend
npm install
npm run dev
```

--------------------------------

### Add Starter to starters.yml

Source: https://github.com/strapi/community-content/blob/master/starters/README.md

This YAML snippet defines the structure for adding a new starter project to the Strapi community content repository. It includes fields for title, author, repository link, use cases, integration technology, preview, description, features, installation instructions, and a command to create the starter.

```yaml
- title: Title of your Starter
  author: John Doe
  photo: https://via.placeholder.com/300
  repo: johndoe/awesome-strapi-starter
  slug: johndoe-awesome-strapi-starter
  use_cases:
    - blog
  integration: Gatsby
  preview: https://johndoe.github.io/awesome-strapi-starter
  description: Bootstrap a great blog application using Gatsby and Strapi. In this starter, you'll be able to use all the latest features available in Strapi.
  features:
    - 1 Single type
    - 4 Components
    - "3 Collection types: Article, Category, User"
    - 6 Created articles
  youtube: https://www.youtube.com/embed/4g3Pzj-wdXo
  how_to_install: Add a short description here, application using Gatsby and Strapi. lorem ipsum dolor sit you'll be able to use all the latest features
  command: yarn create strapi-starter https://github.com/strapi/strapi-starter-gatsby-blog
```

--------------------------------

### Strapi Admin Panel Development (Shell)

Source: https://github.com/strapi/community-content/blob/master/tutorials/code/jekyll-strapi-tutorial/api/admin/README.md

Commands to navigate to the admin panel directory within a Strapi project and start the development server using npm.

```shell
cd myApp/admin
npm start
```

--------------------------------

### Highlight Ruby Code Snippet in Jekyll

Source: https://github.com/strapi/community-content/blob/master/tutorials/code/jekyll-strapi-tutorial/blog/_posts/2018-04-24-welcome-to-jekyll.markdown

Demonstrates how to use Jekyll's Liquid templating to highlight Ruby code blocks. This feature requires no external dependencies and is useful for displaying code examples within Jekyll posts.

```liquid
{% highlight ruby %}
def print_hi(name)
  puts "Hi, #{name}"
end
print_hi('Tom')
#=> prints 'Hi, Tom' to STDOUT.
{% endhighlight %}
```

--------------------------------

### Get Application URL with Ingress Enabled

Source: https://github.com/strapi/community-content/blob/master/tutorials/code/Helm-chart-for-strapi/templates/NOTES.txt

Retrieves the application URL when Ingress is enabled in the Kubernetes deployment. It iterates through configured hosts to construct the full URL, including scheme and path.

```go-template
{{- if .Values.ingress.enabled }}
{{- range .Values.ingress.hosts }}
  http{{ if $.Values.ingress.tls }}s{{ end }}://{{ . }}{{ $.Values.ingress.path }}
{{- end }}
{{- end }}
```

--------------------------------

### Strapi Template Submission Format (YAML)

Source: https://github.com/strapi/community-content/blob/master/templates/README.md

Defines the structure for submitting a Strapi template to the community repository. It includes metadata about the template and installation commands.

```yaml
- title: <name> Template
  author: John Doe
  repo: johndoe/awesome-strapi-template
  slug: awesome-strapi-template
  use_cases:
    - <name>
  description: A pre-configured Strapi <name> template to build projects with any frontend.
  features:
    - 2 Collection types
    - Permissions set to true for the required content types
    - Internationalization with i18n
    - Draft and publish
  starters:
    - https://github.com/<username>/<some-public-repo>
  command:
    yarn: yarn create strapi-app my-project --template <name>
    npm: npx create-strapi-app my-project --template <name>
```

--------------------------------

### Get Application URL with NodePort Service

Source: https://github.com/strapi/community-content/blob/master/tutorials/code/Helm-chart-for-strapi/templates/NOTES.txt

Determines the application URL for a NodePort service. It extracts the NodePort and Node IP using kubectl commands and constructs the URL.

```shell
export NODE_PORT=$(kubectl get --namespace {{ .Release.Namespace }} -o jsonpath="{.spec.ports[0].nodePort}" services {{ template "strapi.fullname" . }})
export NODE_IP=$(kubectl get nodes --namespace {{ .Release.Namespace }} -o jsonpath="{.items[0].status.addresses[0].address}")
echo http://$NODE_IP:$NODE_PORT
```

--------------------------------

### Get Application URL with LoadBalancer Service

Source: https://github.com/strapi/community-content/blob/master/tutorials/code/Helm-chart-for-strapi/templates/NOTES.txt

Retrieves the application URL for a LoadBalancer service. It extracts the LoadBalancer IP and combines it with the service port. A note about potential delays in IP availability is included.

```shell
NOTE: It may take a few minutes for the LoadBalancer IP to be available.
      You can watch the status of by running 'kubectl get svc -w {{ template "strapi.fullname" . }}'
export SERVICE_IP=$(kubectl get svc --namespace {{ .Release.Namespace }} {{ template "strapi.fullname" . }} -o jsonpath='{.status.loadBalancer.ingress[0].ip}')
echo http://$SERVICE_IP:{{ .Values.service.port }}
```

--------------------------------

### Get Application URL with ClusterIP Service

Source: https://github.com/strapi/community-content/blob/master/tutorials/code/Helm-chart-for-strapi/templates/NOTES.txt

Provides access to a ClusterIP service by setting up port forwarding. It finds a pod associated with the service and forwards a local port (8080) to the cluster's port (80).

```shell
export POD_NAME=$(kubectl get pods --namespace {{ .Release.Namespace }} -l "app={{ template "strapi.name" . }},release={{ .Release.Name }}" -o jsonpath="{.items[0].metadata.name}")
echo "Visit http://127.0.0.1:8080 to use your application"
kubectl port-forward $POD_NAME 8080:80
```

--------------------------------

### Scaffold Project with Servers (Bash)

Source: https://github.com/strapi/community-content/blob/master/tutorials/code/gatsby-strapi-typescript-tutorial/frontend/README.md

Launches both backend and frontend servers simultaneously and performs a data migration on the backend. Supports Yarn and npm.

```bash
# Using yarn
yarn build:yarn
yarn develop:yarn

# Using npm
npm run build:npm
npm run develop:npm
```

--------------------------------

### Create Gatsby Site with Default Starter (Shell)

Source: https://github.com/strapi/community-content/blob/master/tutorials/code/gatsby-strapi-tutorial/blog/README.md

Command to create a new Gatsby site using the default starter template from GitHub. This is the initial step to begin a new project.

```shell
# create a new Gatsby site using the default starter
gatsby new my-default-starter https://github.com/gatsbyjs/gatsby-starter-default
```

--------------------------------

### Create Strapi E-commerce Site using Template

Source: https://context7.com/strapi/community-content/llms.txt

Illustrates how to create a new Strapi application pre-configured with an e-commerce template using npx. It details the template's features, including collection types, pre-populated data, and API endpoints, and provides instructions to run the development server.

```bash
# Create Strapi app with e-commerce template
npx create-strapi-app my-shop --template e-commerce

cd my-shop
npm run develop

# The template includes:
# - Product collection type with specifications
# - Category collection type
# - 27 pre-populated products
# - 6 pre-populated categories
# - Proper permissions configured
# - Slug system for SEO
# - Draft/published publication system
# - Role-based access control

# Access admin panel: http://localhost:1337/admin
# API endpoint: http://localhost:1337/api/products
# API endpoint: http://localhost:1337/api/categories
```

--------------------------------

### Create New Strapi Application

Source: https://github.com/strapi/community-content/blob/master/tutorials/code/gatsby-strapi-tutorial/cms/plugins/content-manager/README.md

Command to initialize a new Strapi project. This is the first step in setting up the development environment for the Content Manager plugin.

```bash
strapi new myApp
```

--------------------------------

### Query Showcase Sites by Category using JavaScript

Source: https://context7.com/strapi/community-content/llms.txt

Demonstrates how to read and parse the `sites.yml` file to filter showcase projects by category using Node.js. It requires the 'js-yaml' and 'fs' modules. The output lists matching projects and their frontend technologies.

```javascript
// Example: Fetch all e-commerce projects from the showcase
const yaml = require('js-yaml');
const fs = require('fs');

try {
  const showcaseData = yaml.load(fs.readFileSync('./showcase/sites.yml', 'utf8'));

  const ecommerceProjects = showcaseData.filter(site =>
    site.categories && site.categories.includes('E-commerce')
  );

  console.log(`Found ${ecommerceProjects.length} e-commerce projects:`);
  ecommerceProjects.forEach(project => {
    console.log(`- ${project.title}: ${project.url}`);
    console.log(`  Frontend: ${project.frontend.join(', ')}`);
  });
} catch (error) {
  console.error('Error reading showcase data:', error);
}
```

--------------------------------

### Create Strapi App and Link Plugin

Source: https://github.com/strapi/community-content/blob/master/tutorials/code/jekyll-strapi-tutorial/api/plugins/content-manager/README.md

Steps to create a new Strapi application and link the local content-manager plugin for development. This involves creating a symlink to the plugin's directory within the Strapi application's plugins folder.

```bash
strapi new myApp
cd myApp
ln -s /path/to/strapi/monorepo/packages/strapi-plugin-content-manager ./plugins/content-manager
strapi start
```

--------------------------------

### Add Showcase Project using YAML

Source: https://context7.com/strapi/community-content/llms.txt

Defines the structure for adding a new project to the community showcase using a YAML file. It specifies project details like title, URL, description, categories, frontend technologies, and author information.

```yaml
# showcase/sites.yml
- title: My Awesome Project
  url: https://myproject.com
  description: A full-stack e-commerce platform built with Strapi CMS for content management and Next.js for the frontend. Features include dynamic product catalogs, user authentication, and payment integration.
  categories:
    - E-commerce
    - Full-stack
  frontend:
    - Next.js
    - Tailwind
    - Stripe
  made_by: John Doe
  made_by_url: https://johndoe.dev
```

--------------------------------

### Copy Strapi Website Components using Bash

Source: https://context7.com/strapi/community-content/llms.txt

Provides bash commands to copy official Strapi website components into a Strapi project's component directory. This allows for the reuse of pre-defined UI elements across different Strapi projects. Ensure the source paths are correct relative to your project structure.

```bash
# Copy a specific component category to your Strapi project
cp -r ./website-components/links ./my-strapi-project/src/components/

# Copy all components
cp -r ./website-components/links ./my-strapi-project/src/components/
cp -r ./website-components/slices ./my-strapi-project/src/components/
cp -r ./website-components/media ./my-strapi-project/src/components/
cp -r ./website-components/shared ./my-strapi-project/src/components/

# Component structure in your Strapi project:
# src/
#   components/
#     links/
#       button.json
#       link.json
#       link-with-small-icon.json
#     slices/
#       brands.json
#       faq.json
#       hero.json
```

--------------------------------

### Fetch Blog Articles from Strapi using JavaScript (REST and GraphQL)

Source: https://context7.com/strapi/community-content/llms.txt

Demonstrates how to fetch blog articles from a Strapi CMS using both the REST API and GraphQL. It covers making HTTP requests, handling responses, and displaying article data. Requires a running Strapi instance with an 'articles' collection type.

```javascript
const STRAPI_URL = 'http://localhost:1337';

async function fetchArticles() {
  try {
    const response = await fetch(`${STRAPI_URL}/api/articles?populate=*`);

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const data = await response.json();

    // Display articles
    data.data.forEach(article => {
      console.log(`Title: ${article.attributes.title}`);
      console.log(`Content: ${article.attributes.content.substring(0, 100)}...`);
      console.log(`Category: ${article.attributes.category?.data?.attributes?.name || 'Uncategorized'}`);
      console.log('---');
    });

    return data.data;
  } catch (error) {
    console.error('Error fetching articles:', error);
    return [];
  }
}

// Using with GraphQL (if GraphQL plugin enabled)
async function fetchArticlesGraphQL() {
  const query = `
    query GetArticles {
      articles {
        data {
          id
          attributes {
            title
            content
            publishedAt
            category {
              data {
                attributes {
                  name
                }
              }
            }
          }
        }
      }
    }
  `;

  try {
    const response = await fetch(`${STRAPI_URL}/graphql`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ query }),
    });

    const result = await response.json();
    return result.data.articles.data;
  } catch (error) {
    console.error('GraphQL error:', error);
    return [];
  }
}

fetchArticles();
```

--------------------------------

### Strapi Admin Panel Build (Shell)

Source: https://github.com/strapi/community-content/blob/master/tutorials/code/jekyll-strapi-tutorial/api/admin/README.md

Instructions to build the Strapi admin panel for production after making development updates, executed from the Strapi project's root directory.

```shell
cd myApp
npm run build
```

--------------------------------

### Create Plugin Symlink

Source: https://github.com/strapi/community-content/blob/master/tutorials/code/gatsby-strapi-tutorial/cms/plugins/content-manager/README.md

Command to create a symbolic link for the Content Manager plugin within a new Strapi application. This allows for development and testing of the plugin.

```bash
ln -s /path/to/strapi/monorepo/packages/strapi-plugin-content-manager ./plugins/content-manager
```

--------------------------------

### Copy SASS Variables for Content Manager

Source: https://github.com/strapi/community-content/blob/master/tutorials/code/jekyll-strapi-tutorial/api/plugins/content-manager/README.md

Instructions for copying the SASS variables folder from the monorepo plugin to the local Strapi application's plugin directory. This ensures styling consistency.

```bash
cp -R admin/public/app/styles/variables ./plugins/content-manager/public/app/styles/variables
```

--------------------------------

### Symlink SASS Variables for Content Manager

Source: https://github.com/strapi/community-content/blob/master/tutorials/code/jekyll-strapi-tutorial/api/plugins/content-manager/README.md

Creates a symbolic link for the SASS variables file, ensuring that changes in the monorepo are reflected in the local development environment.

```bash
ln -s -f ./admin/public/app/styles/variables/variables.scss ./plugins/content-manager/public/app/styles/variables/variables.scss
```

--------------------------------

### Define Content Type with Dynamic Zone and Components in Strapi (JSON Schema)

Source: https://context7.com/strapi/community-content/llms.txt

Illustrates how to define a Strapi content type schema in JSON format, specifically showcasing the use of a 'dynamiczone' to include multiple component types ('slices') and a single 'component' for a call-to-action button. This enables flexible content modeling.

```json
{
  "kind": "collectionType",
  "collectionName": "pages",
  "info": {
    "singularName": "page",
    "pluralName": "pages",
    "displayName": "Page"
  },
  "options": {
    "draftAndPublish": true
  },
  "attributes": {
    "title": {
      "type": "string",
      "required": true
    },
    "slug": {
      "type": "uid",
      "targetField": "title"
    },
    "sections": {
      "type": "dynamiczone",
      "components": [
        "slices.hero",
        "slices.faq",
        "slices.brands",
        "slices.cta-banner",
        "slices.featured-video"
      ]
    },
    "cta": {
      "type": "component",
      "repeatable": false,
      "component": "links.button"
    }
  }
}
```

--------------------------------

### Generate Strapi API

Source: https://github.com/strapi/community-content/blob/master/tutorials/code/gatsby-strapi-static-blog/backend/public/index.html

This command generates a new API within your Strapi application. It creates the necessary controllers, models, and routes for the specified API. Ensure you are in the project's root directory before executing.

```bash
strapi generate:api <apiName>
```

--------------------------------

### Display User Posts with Liquid Templating

Source: https://github.com/strapi/community-content/blob/master/tutorials/code/jekyll-strapi-tutorial/blog/_layouts/author.html

This snippet uses Liquid templating to fetch and display posts authored by a specific user. It checks if any posts exist, filters them by author ID, and then iterates through the filtered posts to display their creation date, author username, title, and a short content preview. Dependencies include the Strapi CMS and its content collections.

```liquid
{% assign posts=strapi.collections.posts | where:"author.id",page.document.id %} {%- for post in posts -%}*   {{ post.createdAt | date_to_string }} by {{ post.author.username }}
    
    ### [{{ post.title }}]({{ post.url | relative_url }})
    
    {{ post.content | markdownify | strip_html | truncatewords: 10 }}
    
{%- endfor -%}
```
Tokens:
Raw