March 2022 Summaries

A developer, interested in contributing to the Strapi CMS community, created the Publisher plugin, which allows users to schedule the publishing and unpublishing of content types. The idea stemmed from user discussions on the Strapi Discord, where there was a demand for scheduled content publication, further supported by documentation on auto-publishing. Once enabled, the plugin adds a Publisher section to content types and tracks schedule changes internally, checking every minute for any past publish or unpublish dates to trigger state changes. The developer is open to suggestions for new features, with a list view for tracking content states being the next planned addition. They invite collaboration and feedback through GitHub or Discord, driven by their background in mechanical engineering and a passion for programming within the open-source community.

The latest version 4.1.6 of Strapi introduces a highly requested Dark Mode feature, allowing users to switch between light and dark themes within the user-level settings. This addition aims to enhance readability by reducing eye fatigue and providing a soothing effect, particularly in low-light environments, while also contributing to energy savings on compatible displays. The mode adapts to browser settings by default and can be easily toggled in the User Profile tab. As part of the Strapi Design System, Dark Mode is built to support any application or plugin developed with Strapi, laying the groundwork for future advanced custom themes. Users are encouraged to upgrade to the latest version to access this feature and share feedback on social media platforms and the Strapi forum. New users can quickly get started with Strapi by using the command line instructions provided in the documentation.

The tutorial outlines the process of setting up a checkout page for an e-commerce website using Strapi, Nuxt.js, GraphQL, and Stripe, demonstrating how to create a new content type for orders and manage user permissions in Strapi. It explains how to integrate Stripe for handling payments, detailing the steps to add Stripe to the frontend app using the vue-stripe-elements-plus package and configuring the Stripe API in the nuxt.config.js file. The guide covers creating a form to collect user addresses and debit card details, generating a token via Stripe, and sending the token to the backend to create a charge using the Stripe Node library. Additionally, it provides instructions for configuring the backend to handle Stripe charges, including setting up environment variables and restarting the Strapi backend. The tutorial concludes by hinting at the next steps for deploying the Strapi and Nuxt.js applications.

The provided text offers a detailed tutorial on building a shopping cart feature using Vuex in a Vue.js application, specifically for an e-commerce website project that utilizes Strapi, Nuxt.js, GraphQL, and Stripe. It explains how to set up a new Vuex store named `cart.js` to manage the shopping cart's state, including defining state, mutations, and getters for adding, removing, and calculating the total price of items. The tutorial also details the creation of a `Cart.vue` component to display selected dishes, showcasing how to integrate this component into the application's pages. Additionally, it highlights the use of browser cookies to store cart data and the implementation of a `removeFromCart` method to update the cart dynamically. The guide emphasizes the benefits of Vuex's state management capabilities and provides code snippets to facilitate the integration of a fully functional shopping cart in the project.

The tutorial guides users through setting up an authentication system for an e-commerce website using Strapi, Nuxt.js, and Vuex. It begins with creating a Strapi project and installing necessary dependencies for the frontend, such as the Nuxt.js HTTP module. The process involves setting up a store to manage user information and sessions using Vuex and cookies, ensuring users remain logged in even after page reloads. The tutorial then details creating registration and login pages with form inputs for user credentials, using REST API calls for user actions like registration and login, and redirecting users upon successful authentication. A Header component is introduced to provide navigation links for logging in, registering, and logging out, as well as displaying a shopping cart dropdown. The tutorial concludes with integrating these components into the main layout and hints at future enhancements involving Stripe for the checkout process. Pierre, one of Strapi's creators, is mentioned as an advocate for open-source projects and enjoys windsurfing and mountain biking.

The text provides a tutorial for creating an e-commerce website using Strapi, Nuxt.js, GraphQL, and Stripe, guiding users through setting up a project with these technologies to develop a Deliveroo clone. It begins with instructions on creating a Strapi project using a command line tool, followed by setting up a Nuxt.js project, and includes guidance on configuring various development tools such as ESLint, Prettier, and Git. The tutorial emphasizes the use of modern web development frameworks and tools, offering insights into the folder structure of both Strapi and Nuxt.js projects, aiming to equip developers with a robust starting point for building both small and large applications. Additionally, it briefly mentions Strapi's co-founder, Pierre, highlighting his commitment to open-source projects and his personal interests.

You've created the first Strapi project with Nuxt.js, GraphQL, and Stripe, using a REST API to manage restaurants and their data. After creating the restaurant content type, you made it publicly accessible through the API, transformed the API into GraphQL, installed Apollo Client for state management, imported the @nuxtjs/apollo module, created a GraphQL query for fetching restaurants, and configured UIkit for styling your website. You've also created a new folder for utility functions and added a helper function `getStrapiMedia` to obtain images absolute URLs. Finally, you started the development server with `npm run dev`.

The tutorial outlines the process of building an e-commerce website using Strapi, Nuxt.js, GraphQL, and Stripe, focusing particularly on setting up a restaurant and dish database. It begins with creating a Strapi project and successfully displaying a list of restaurants, then progresses to creating a "dish" content type and establishing a one-to-many relationship with restaurants. The guide explains how to add entries to the database and ensure the content is accessible through the API. It also covers the creation of dynamic pages in Nuxt.js, demonstrating how to use a dynamic route to display dishes associated with each restaurant. The use of GraphQL queries to fetch restaurant and dish data is detailed, with instructions on setting up a template to facilitate data display on dynamic pages. The tutorial promises that the next section will guide users in developing a full-featured shopping cart, while also mentioning the origins of Strapi and its co-founder, Pierre, who advocates for open-source and remote work environments.

The text is a step-by-step tutorial on deploying a Strapi v4 project using Heroku and Netlify, aimed at building an e-commerce website with Strapi, Nuxt.js, GraphQL, and Stripe. It provides detailed instructions on setting up a local Git repository, creating a Heroku project with a custom URL, adding a Heroku Postgres database, and managing environment variables for deployment. The tutorial also covers deploying the frontend application on Netlify, utilizing the Netlify CLI for authentication and deployment, and configuring necessary URLs and API keys within the project files. The guide concludes with encouragement to customize and extend the project, highlighting Pierre, one of Strapi's creators, who is passionate about open-source and remote work.

Strapi has introduced an in-app plugin marketplace for its v4 and newer versions, allowing users to easily find and install plugins directly within the application, enhancing convenience by eliminating the need to switch tabs. This marketplace mirrors the web version, offering the same selection of plugins, including integrations with tools like Sentry and features such as SEO and content versioning. Plugin creators benefit from increased visibility and can submit their work directly through the app. Details about this release and further developments, like adding providers to Strapi Market, are available on GitHub, and user feedback is encouraged to guide future enhancements. Strapi remains free and user-friendly, with quick-start options and demo projects for new users.

StrapiConf, the global annual conference for the Strapi community, unveils key updates and product enhancements, including the introduction of an in-app marketplace with Strapi version 4.1.4, migration guides for transitioning from v3 to v4, and the anticipated release of Strapi v4.2, which will feature Dark Mode and TypeScript support. The platform emphasizes security, quality, and openness in its marketplace, and supports customization through new features like custom fields, enhancing content editing and API aggregation capabilities. Strapi Cloud aims to simplify deployment with a Platform-as-a-Service approach, promising features like automatic backups and a fast CDN, while inviting users to participate in the alpha and beta programs. With a focus on user feedback, Strapi continues to prioritize development based on community input, offering a seamless and customizable experience for developers.

The article provides an in-depth overview of the different types of hooks available in Strapi, a self-hosted and customizable headless CMS that operates using JavaScript. It explores lifecycle hooks, server hooks, and webhooks, detailing their implementation methods, common use cases, and how they can extend Strapi's core functionality. Lifecycle hooks allow developers to add custom code that executes when queries are performed on a Content-Type, making them useful for automating actions like sending email notifications in an e-commerce app. Server hooks are integrated into Strapi's core at boot and are commonly used for third-party service integrations, with the ability to be loaded as node modules or local project-specific hooks. Webhooks, which notify external applications of specific events via HTTP POST requests, are highlighted for their utility in CI/CD processes and other automation scenarios. The article also notes that Rami, a Senior Software Engineer and Strapi Community Star, has contributed to the community through forums and tutorials, aiding in the understanding and implementation of Strapi's capabilities.

The text provides a detailed tutorial on how to replace the default WYSIWYG editor in Strapi with the Quill editor, specifically using the react-quill library. It begins by outlining the creation of a new Strapi project, either through Yarn or npm, and then guides the reader through setting up an admin user and a simple collection type. The tutorial includes steps for generating a new plugin field in Strapi's administration panel, installing react-quill, and integrating it as a WYSIWYG component. It also explains how to use Strapi's MediaLib for managing media files within the editor, and offers an alternative setup for including an image module directly within the Quill editor. The guide emphasizes the importance of being cautious when changing editors on existing projects with Markdown content, as it requires conversion to HTML.

In this detailed guide, readers are introduced to building a startup website for an estate business using Strapi for the backend and React for the frontend. The tutorial outlines the process of setting up a Strapi project to manage backend content and APIs, including the creation of an "Estate" content type to manage property listings. Strapi's flexibility and ease of API scaffolding are highlighted, along with the use of Postman for testing endpoints. The frontend setup involves creating a React application, integrating axios and react-router-dom, and implementing React's Suspense API for improved data fetching. Additionally, the article covers integrating SendGrid with Strapi for newsletter functionality, detailing the creation of an API key and setting up email services. The author emphasizes the practicality of these technologies and offers insights into the integration process, concluding with the implementation of a newsletter signup form in the React app, aimed at enhancing user engagement through email communications.

This tutorial offers a comprehensive guide on creating a basic plugin for Strapi v4, a popular Node.js-based content management framework. It begins with setting up a Strapi project and details the steps to generate a new plugin, covering both the front-end and back-end aspects. The tutorial explains how to configure routes, controllers, and services to fetch and display Content-Types within the plugin. It also demonstrates how to use Strapi's Design System and the `useCMEditViewDataManager` hook for accessing entry data in the content manager. The guide encourages customization and experimentation, offering insights into injecting components into Strapi's admin panel and highlighting the potential for contributing plugins to the Strapi Marketplace.

Strapi is a flexible, open-source headless CMS that enables developers to choose their favorite tools and frameworks, allowing editors to manage and distribute content easily. It provides an admin panel to edit and create APIs, easily-editable code using JavaScript, and supports plugins for customization. To install Strapi, users can run the command `npx create-strapi-app my-project` or `yarn create strapi-app my-project`. Once installed, users can access the development server at `https://localhost:1337/admin`. Strapi provides a great package to query its backend API, and @nuxtjs/strapi makes it easier. Users can use Nuxt.js with SSR mode and server hosting, along with Tailwind CSS as their preferred CSS framework. The @nuxtjs/strapi module is used to find all articles, display them on the page, and check if a user is logged in before allowing access to certain routes. Strapi also provides a plugin system for extensibility and customization. Users can create an authenticated middleware to restrict access to certain routes based on user authentication status. The tutorial covers building a blog app with Strapi and Nuxt.js, including creating a login and signup page, articles page, article content page, and create article page. It also includes manual population of the `users_permissions_user` field and file upload logic. With this tutorial, users have what it takes to tackle Strapi authentication with NuxtJs in their arsenal.