Top 23 JavaScript Strapi Projects

• Strapi

  181 54,037 10.0 JavaScript

  🚀 Strapi is the leading open-source headless CMS. It’s 100% JavaScript, fully customizable and developer-first.

  

  Project mention: Strapi Homepage 3d Image Effects | /r/webdev | 2023-06-03

• awesome-strapi

  1 1,391 0.0 JavaScript

  A curated list of awesome things related to Strapi

  

  Project mention: Re-Introducing the Strapi Community Organization | dev.to | 2023-01-27

  The Organization aims to provide value to Strapi users by creating well-maintained plugins, integrations, and tooling. This dedicated GitHub organization already includes popular repositories such as the awesome-strapi repository, Dockerize, to add docker support for a Strapi Project or strapi-plugin-rest-cache.

• Appwrite

  appwrite.io

  sponsored

  Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

  

• strapi-docker

  2 1,133 3.2 JavaScript

  Install and run your first Strapi project using Docker

  

  Project mention: How to Set up Amazon S3 Upload Provider Plugin for Your Strapi App | dev.to | 2022-09-05

  Docker - docker repo I used Ubuntu 20.04 LTS for this tutorial.

• documentation

  3 681 8.4 JavaScript

  Strapi Documentation (by strapi)

  

  Project mention: Sanity vs Prismic vs Contentful vs Storyblok - Which API-Driven Hosted CMS for Content-Focussed Sites? | /r/JAMstack | 2023-03-29

  Suitability for content-first sites (marketing/personal/portfolio sites) Components and Dynamic Zones will be very helpful to allow content editors to build pages on the fly by reusing components you, as a developer, will configure (based on your Astro components) for them. Was the free plan adequate or did you find yourself nearing limits or having to go for paid plans? Free if you self-host but paid if you use Strapi Cloud. I understand you want to use a free plan but do make sure you anticipate the limits of free plans (which you might quickly reach) as the gap from free to paid can be high for some solutions. General developer experience and time/simplicity to set up Strapi has been created by developers for developers. You should easily get started https://docs.strapi.io/ :) User experience as a content manager using the CMS to make changes to the sit As mentioned above, Components and Dynamic Zones will help a lot. Content managers will enjoy other features such as role-based access control, content internationalization, custom fields, media library, etc.

• strapi-tool-dockerize

  3 294 10.0 JavaScript

  Easy add support for docker to your strapi project

  

  Project mention: How to Deploy and Scale Strapi on a Kubernetes Cluster 1/2 | dev.to | 2023-02-03

  Another great alternative to generate the Dockerfile, docker-compose.yaml and all the Docker related files is to use dockerize. This tool will automatically detect your project and help you add docker support via a nice CLI UI. From your project root folder, you need to run the following:

• strapi-middleware-cache

  0 282 3.8 JavaScript

  :electric_plug: A cache middleware for https://strapi.io

• strapi-plugin-sitemap

  1 213 3.5 JavaScript

  🔌 Generate a highly customizable sitemap XML in Strapi CMS

  Project mention: The Strapi Config Sync Plugin | dev.to | 2022-08-18

  The config-sync plugin is one of three plugins I have made open source for Strapi. The other two are url-alias and sitemap. With the release of Strapi v4.3, we now have Typescript support and the next step will probably be to migrate all of these plugins to be written in Typescript.

• Klotho

  klo.dev

  sponsored

  AWS Cloud-aware infrastructure-from-code toolbox [NEW]. Build cloud backends with Infrastructure-from-Code (IfC), a revolutionary technique for generating and updating cloud infrastructure. Try IfC with AWS and Klotho now (Now open-source)

  

• strapi-plugin-config-sync

  3 212 6.2 JavaScript

  :recycle: CLI & GUI for continuous migration of config data across environments

  Project mention: Goodbye 2022, Hello 2023! Strapi Wrapped in One Year | dev.to | 2023-01-30

  Strapi wouldn’t be anything without its community, which is very much represented by its Community Stars. The Write for the Community program resulted in 148 new articles being published, for a total of 1.3M views. 2022 was also the year of the launch of the Strapi Community Organization, a group of community members dedicated to empowering initiatives and highlighting them. Boaz, Mattie, Sacha, and Simen have been invaluable contributors to the Strapi Community, going above and beyond by developing open-source plugins and tools. Strapi config-sync plugin, mattie-strapi-bundle (for search), Strapi REST cache plugin, Dockerize tool, and more!

• strapi-plugin-transformer

  1 102 10.0 JavaScript

  A plugin for Strapi Headless CMS that provides the ability to transform the API request or response.

  Project mention: How to Build a Blog App Using Blazor WASM and Strapi | dev.to | 2022-11-28

  We will need to transform the JSON from the API request to work with our Blazor front-end. To do that, we will use Transformer by @ComfortablyCoding.

• strapi-plugin-rest-cache

  2 85 8.1 JavaScript

  Speed-up HTTP requests with LRU cache.

  

  Project mention: Goodbye 2022, Hello 2023! Strapi Wrapped in One Year | dev.to | 2023-01-30

  Strapi wouldn’t be anything without its community, which is very much represented by its Community Stars. The Write for the Community program resulted in 148 new articles being published, for a total of 1.3M views. 2022 was also the year of the launch of the Strapi Community Organization, a group of community members dedicated to empowering initiatives and highlighting them. Boaz, Mattie, Sacha, and Simen have been invaluable contributors to the Strapi Community, going above and beyond by developing open-source plugins and tools. Strapi config-sync plugin, mattie-strapi-bundle (for search), Strapi REST cache plugin, Dockerize tool, and more!

• strapi-tiptap-editor

  0 45 3.2 JavaScript

  A drop-in replacement for the strapi editor

• mattie-strapi-bundle

  2 36 10.0 JavaScript

  Mattie plugin bundle for Strapi

  Project mention: Goodbye 2022, Hello 2023! Strapi Wrapped in One Year | dev.to | 2023-01-30

  Strapi wouldn’t be anything without its community, which is very much represented by its Community Stars. The Write for the Community program resulted in 148 new articles being published, for a total of 1.3M views. 2022 was also the year of the launch of the Strapi Community Organization, a group of community members dedicated to empowering initiatives and highlighting them. Boaz, Mattie, Sacha, and Simen have been invaluable contributors to the Strapi Community, going above and beyond by developing open-source plugins and tools. Strapi config-sync plugin, mattie-strapi-bundle (for search), Strapi REST cache plugin, Dockerize tool, and more!

• shoes

  1 29 6.4 JavaScript

  Shoes is an online shoe store built using Gatsby and Strapi (by atapas)

  Project mention: Build your ecommerce store using Gatsby and Strapi | dev.to | 2022-08-01

  However, don’t worry: you can go way further from here. You can create templates for the categories and companies and have pages for each. You can develop search functions and create filter options for shoes by title, price range, company, and category. The project code is open source under the MIT license on GitHub.

• strapi-postgres-cloudinary

  2 28 0.0 JavaScript

  Deploy Strapi with PostgreSQL and Cloudinary on Render.

  

  Project mention: 6 Top Deployment Options For Your Strapi Application | dev.to | 2022-11-14

  Render is a cloud-based solution for building and running apps, websites, and CDNs with free TLS certificates. They have flexible pricing and offer database management with PostgreSQL. If you are considering this option, you can follow the deployment guide here.

• fastify-raw-body

  0 27 4.0 JavaScript

  Request raw body

• bank-website

  1 16 3.5 JavaScript

  Built with Anima: A functioning bank app powered by Anima & Strapi

  

  Project mention: Generated React Ant Menu component using Figma+Anima | /r/reactjs | 2022-06-14

  We used our tool, Anima, to automatically generate React Ant design code from a Figma file that our designer made. Would love feedback 🙌 https://github.com/AnimaApp/bank-website/blob/main/components/Menu/index.jsx

• personal-site

  0 10 1.3 JavaScript

  Personal website built with Next.JS and Strapi (by dietrichmax)

• strapi-provider-upload-ipfs-storage

  1 9 10.0 JavaScript

  IPFS (Filebase, Pinata, Fleek, Web3, Lighthouse) provider for Strapi uploads.

  Project mention: IPFS (Filebase, Pinata, Fleek, Web3) provider for Strapi uploads | /r/ipfs | 2022-11-06

• strapi-open-ai-text-generation

  1 7 10.0 JavaScript

  A Strapi Custom Field to generate text content with Open AI Text generation API

  Project mention: Building a Strapi Custom Field for Text Generation with Open AI | dev.to | 2023-02-07

  : acts as our input for prompts; we use onChange() ‘watcher’ to update the value of our prompt state as we type data. We then store the prompt in a variable called prompt. TextArea />: is what we use to store the value of our generated text. We use a to edit the generated text. We use a special implementation of our onChange() watcher, which allows us to pass an object of multiple values to update when a change occurs in that component.

  We also have two buttons where all the magic happens. One button calls generateText() - this function uses fetch to call our backend service, /ai-text-generation/generate-text that makes authenticated calls to the Open AI API (we’ll create this next). To authenticate this, we use auth from @strapi/helper-plugin which helps us make a secure request to the Strapi service we’ll create using the Admins token.

  We then parse our result and use the special implementation of onChange() to pass the parsed response as the content that will get added to our database with onChange({ target: { name, value: parsedResult, type: attribute.type } }).

  The other button calls clearGeneratedText() - this function clears all the text the AI generated in case we want to start over. At this point, our application should look something like this.

  

  Building a Custom Open AI Route in Strapi

  To access Open AI, we need to provide an API KEY; having this key in the admin poses a security risk, and to combat that, we’ll create a custom route that, when called, makes an API call to Open AIs API and returns the generated text that we can then send to the admin.

  So start, in our ./config/plugins.js file add a config object below enabled: true, your config file after should look like this:
  

  // …
  'ai-text-generation': {
        enabled: true,
        config: {
          apiToken: process.env.OPEN_AI_API_TOKEN,
        },
        resolve: './src/plugins/ai-text-generation'
      },
  
  

  Enter fullscreen mode Exit fullscreen mode

  Now, create a file called open-ai.js in ./src/plugins/ai-text-generation/server/services and paste the following code in it.

  For the code to work, you will also have to install axios, for that navigate to your plugin root and type yarn add axios
  

  'use strict';
  
  const axios = require('axios');
  
  module.exports = ({ strapi }) => ({
  
    async generateText(prompt) {
      try {
        const response = await axios(
          {
            url: 'https://api.openai.com/v1/completions',
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
              'Authorization': `Bearer ${strapi.plugin('ai-text-generation').config('apiToken')}`
            },
            data: JSON.stringify({
              'model': 'text-davinci-001',
              'prompt': `${prompt}`,
              'temperature': 0.4,
              'max_tokens': 64,
              'top_p': 1,
              'frequency_penalty': 0,
              'presence_penalty': 0
            })
          })
  
        return response.data;
      }
      catch (err) {
        console.log(err.response)
      }
  
    }
  
  });
  
  

  Enter fullscreen mode Exit fullscreen mode

  Here we define a function generateText() that takes a prompt as an argument. We then use prompt as a parameter in our request to Open AI.

  Next up, in the same services folder, paste the following code in your index.js file.
  

  'use strict';
  
  const openAi = require('./open-ai');
  
  module.exports = {
    openAi,
  };
  
  

  Enter fullscreen mode Exit fullscreen mode

  This code registers a service in Strapi that we call from a controller, before we do that. We need to create a controller. In ./src/plugins/ai-text-generation/server/controllers, create a file called ai-controller.js and paste the following code in it:
  

  'use strict';
  
  module.exports = ({ strapi }) => ({
    async generate(ctx) {
      ctx.body = await strapi
        .plugin('ai-text-generation')
        .service('openAi')
        .generateText(ctx.request.body.prompt);
    },
  });
  
  

  Enter fullscreen mode Exit fullscreen mode

  In this file, we call the generateText() function that we defined in the service we just made and pass ctx.request.body.prompt (from our POST request).

  In the same folder, we need to paste the following code in our index.js file:
  

  'use strict';
  
  const aiController = require('./ai-controller');
  
  module.exports = {
    aiController,
  };
  
  

  Enter fullscreen mode Exit fullscreen mode

  Lastly, we must create a route to access the controller we just created. In ./src/plugins/ai-text-generation/server/routes we need to paste the following code:
  

  module.exports = [
    {
      method: 'POST',
      path: '/generate-text',
      handler: 'aiController.generate',
      config: {
        policies: [],
      },
    },
  ];
  
  

  Enter fullscreen mode Exit fullscreen mode

  In this file, we define how our endpoint should behave. With this code, we create a POST method on the /generate-text URI and pass the aiController controller we created to define its behavior.

  In your preferred API client, you can now make a request to localhost:1337/ai-text-generation/generate-text and you should get AI-generated text as a response. Be sure to add your prompt as a parameter and pass your admin JWT for authentication.

  We should also get a response when we enter a prompt and click “generate” in our Custom Field.

  

  Publishing to npm

  Maxime from the Strapi team wrote an amazing article on how to publish your plugin to npm, and if you have any trouble you can refer to my package.json file for how to structure yours.

  You can also take your Custom field to the next level and submit it to the official Strapi marketplace.

  Hopefully, you have a better idea of how to build Custom fields now, and even better, you have a custom field that generates content for you with Open AI.

  Let us know if you build something, the Strapi community will be excited to try it out. Take care.

• secure-job

  1 6 10.0 JavaScript

  HELLO and welcome to my first open-source project! This is just a simple website that displays job posts that are fetched from Strapi's server. This application can obviously be improved and have more features implemented to it.

  Project mention: Building a Job Board with Next.js, Tailwind CSS, and Strapi | dev.to | 2022-09-06

  This project in the tutorial is absolutely open source and if you want to add a feature or edit something, feel free clone it and make it your own or to fork and make your pull requests.

• todox-client

  0 5 0.0 JavaScript

  Advanced and Modern Todo application with user based todo lists.

• strapi-recipes-v4

  0 5 0.0 JavaScript

  Simple recipe app created with Strapi & NextJS

• publishing-strapiv4-heroku

  3 4 10.0 JavaScript

  A production ready Headless CMS template of Strapi installable via Heroku Button

  

  Project mention: Strapi on Heroku - how many dynos? | /r/Strapi | 2023-02-14

  I'm getting conservatively 800 req/sec on Heroku Standard-1x for my Strapi instance this is on mini postgres with the redis LCU cache, benchmarks here https://123dyno.com/blog/cpu-autoscaling-on-heroku-with-123-dyno. I'd highly recommend installing the redis cache if you haven't looked into it, have my setup in a button here if you want to check out the plugin setup https://github.com/123-Dyno/publishing-strapiv4-heroku. It jumps occasionally when cache clears but for the most part is fine.

• InfluxDB

  www.influxdata.com

  sponsored

  Access the most powerful time series database as a service. Ingest, store, & analyze all types of time series data in a fully-managed, purpose-built database. Keep data forever with low-cost storage and superior data compression.

  

JavaScript Strapi related posts

• Strapi Homepage 3d Image Effects
  1 project | /r/webdev | 3 Jun 2023
• Hilfe mit Wordpress
  1 project | /r/de_EDV | 1 Jun 2023
• A Serious Issue: I am using strapi in my project but a text area field is not working. It is not showing me any text in it. HELP ME!
  1 project | /r/Strapi | 26 May 2023
• CMS + Ecommerce without using wordpress+woocommerce. What's you pick?
  2 projects | /r/webdev | 5 May 2023
• Ask HN: Do all headless CMSs just suck at localization?
  1 project | news.ycombinator.com | 2 May 2023
• How To Build a Hotel Management App Using Strapi & Next.js
  4 projects | dev.to | 21 Apr 2023
• Es Bananin
  1 project | /r/programacion | 17 Apr 2023
• A note from our sponsor - InfluxDB
  www.influxdata.com | 6 Jun 2023

  Ingest, store, & analyze all types of time series data in a fully-managed, purpose-built database. Keep data forever with low-cost storage and superior data compression. Learn more →

Index

Sponsored

Write Clean JavaScript Code. Always.

Sonar helps you commit clean code every time. With over 300 unique rules to find JavaScript bugs, code smells & vulnerabilities, Sonar finds the issues while you focus on the work.

www.sonarsource.com

Do not miss the trending JavaScript projects with our weekly report!