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 →
Top 23 JavaScript Strapi Projects
-
Strapi
🚀 Strapi is the leading open-source headless CMS. It’s 100% JavaScript, fully customizable and developer-first.
-
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 - 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!
-
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.
-
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.
-
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:
-
-
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
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
:recycle: CLI & GUI for continuous migration of config data across environments
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
A plugin for Strapi Headless CMS that provides the ability to transform the API request or response.
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 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 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!
-
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.
-
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.
-
-
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
-
-
strapi-provider-upload-ipfs-storage
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
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 usesfetch
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 useauth
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 withonChange({ 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 belowenabled: 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 modeNow, 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 modeHere 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 modeThis 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 calledai-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 modeIn this file, we call the
generateText()
function that we defined in the service we just made and passctx.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 modeLastly, 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 modeIn this file, we define how our endpoint should behave. With this code, we create a
POST
method on the/generate-text
URI and pass theaiController
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
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.
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.
-
-
-
publishing-strapiv4-heroku
A production ready Headless CMS template of Strapi installable via Heroku Button
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
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
- Hilfe mit Wordpress
- 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!
- CMS + Ecommerce without using wordpress+woocommerce. What's you pick?
- Ask HN: Do all headless CMSs just suck at localization?
- How To Build a Hotel Management App Using Strapi & Next.js
- Es Bananin
-
A note from our sponsor - InfluxDB
www.influxdata.com | 6 Jun 2023
Index
What are some of the best open-source Strapi projects in JavaScript? This list will help you:
Project | Stars | |
---|---|---|
1 | Strapi | 54,037 |
2 | awesome-strapi | 1,391 |
3 | strapi-docker | 1,133 |
4 | documentation | 681 |
5 | strapi-tool-dockerize | 294 |
6 | strapi-middleware-cache | 282 |
7 | strapi-plugin-sitemap | 213 |
8 | strapi-plugin-config-sync | 212 |
9 | strapi-plugin-transformer | 102 |
10 | strapi-plugin-rest-cache | 85 |
11 | strapi-tiptap-editor | 45 |
12 | mattie-strapi-bundle | 36 |
13 | shoes | 29 |
14 | strapi-postgres-cloudinary | 28 |
15 | fastify-raw-body | 27 |
16 | bank-website | 16 |
17 | personal-site | 10 |
18 | strapi-provider-upload-ipfs-storage | 9 |
19 | strapi-open-ai-text-generation | 7 |
20 | secure-job | 6 |
21 | todox-client | 5 |
22 | strapi-recipes-v4 | 5 |
23 | publishing-strapiv4-heroku | 4 |