January 2023 Summaries

The Strapi Community Organization has announced its first-ever web development competition, open to all web developers, where participants can showcase their skills and potentially win great prizes. To participate, simply copy and paste the command line `npx create-strapi-app my-project` in your terminal to create a new Strapi project. The competition requires participants to create a web application using any technology they choose, with a static design ready to be built upon, and includes requirements such as an INSTALL.md file with instructions on how to run the app and showcasing the strapi-community. The winner's website will win up to USD$500 and be used to host community information and marketplace plugins, with the competition running until February 28th, 2022.

Strapi, an open-source content management system (CMS), experienced significant growth and development in 2022, marked by the release of Strapi v4, which enhanced performance and customization through a new Plugin API and Design System. The year was highlighted by the StrapiConf event, where features like Strapi Market, Custom Fields, Dark Mode, TypeScript, and Strapi Cloud were announced, demonstrating the company's commitment to open-source development and community involvement. The community's contributions were pivotal, with the Write for the Community program generating 148 articles and the launch of the Strapi Community Organization to empower user initiatives. Strapi also achieved a milestone of 50k stars on GitHub, entered the top 150 most starred repositories, and secured a $31M Series B funding round to support its mission of empowering content sharing and management globally. Looking forward to 2023, Strapi plans to focus on Strapi Cloud, aiming to provide a seamless, managed CMS experience, and continue innovating in headless content management, with ambitions to enhance the editing experience and collaboration capabilities.

The Strapi Organization is an independent, decentralized, community-led entity aimed at providing value to Strapi users by creating well-maintained plugins, integrations, and tooling. The organization's creation was announced last year at StrapiConf 2022 and marks a commitment to Open Source and building a sustainable ecosystem around the core Strapi product. The council is led by four members who coordinate activities, manage expenses, and handle administrative tasks, with reimbursement processed through an open collective. Strapi also contributes to the organization's budget through donations. The organization welcomes participation via Discord and has a competition underway to build its website, with cash prizes. To stay up-to-date with org activity, join the com-org-hangout channel in Discord.

Strapi v4.6 introduces significant updates enhancing both developer and content management experiences, including a new data export and import system that simplifies data backup and restoration with built-in encryption and compression. This release also improves usability with redesigned relations that can be reordered easily via drag-and-drop, optimizing performance and accessibility. A new audit log feature enhances security by providing a detailed activity trail, crucial for compliance and data privacy. Additionally, the media library now offers customizable list and grid views to streamline asset management, and the Strapi marketplace has expanded to include over 100 plugins, enabling users to extend their applications with features like translation, payment processing, and notifications. The Strapi team remains engaged with its community, encouraging contributions and feedback to continue evolving the platform.

Micro frontends, a concept derived from microservices, enable teams to work independently on different parts of a website, increasing flexibility and allowing for the combination of components built with various frameworks or libraries. This approach facilitates independent deployments, where each component can have its own CI/CD pipeline, and encourages the formation of autonomous teams with full control over their deliverables. Maintenance and bug fixes are simplified due to smaller, decoupled units, while tech stack freedom allows teams to employ different technologies for different components. The tutorial demonstrates the use of module federation, a technique for sharing code between applications, to create a micro frontend project with Strapi, an open-source headless CMS, as the backend. Two separate applications were developed: one for the header and another for the content, showcasing how different teams can contribute to different sections of a website. This setup exemplifies how changes in one part do not affect others, promoting a modular and scalable development approach.

The article outlines a method for deploying a Strapi project on an Azure virtual machine using an Azure Resource Manager (ARM) template, which facilitates an infrastructure-as-code approach for efficient and consistent deployment. It provides a step-by-step process involving minimal user intervention, using a bash script for Strapi installation post-VM provisioning, with default parameters for both Azure infrastructure and Strapi configuration. The template and script are available on a GitHub repository, and users are advised against using the setup in production environments without modifications. The deployment process, which takes approximately 5-10 minutes, includes creating a new resource group and selecting a preferred region in the Azure portal. While basic knowledge of Azure and ARM templates is beneficial for customization, the guide aims to streamline the setup process with pre-defined variables, ensuring ease of use for exploration or sandbox scenarios.

Strapi has enhanced its website's content update efficiency by integrating Incremental Static Regeneration (ISR) in Next.js with Strapi's webhook feature, enabling near-instantaneous updates to its static site. This approach allows specific pages to be regenerated rather than the entire site, significantly reducing update times, especially for a site with over 1000 pages. The integration with Strapi's webhooks facilitates automatic page regeneration upon content changes, while also allowing manual revalidation for specific scenarios. Moreover, Cloudfront caching accelerates load times, and the Next.js revalidation route automatically invalidates the Cloudfront cache when a page is updated, ensuring users always see the latest content. This system optimizes performance and responsiveness, enhancing user experience on the Strapi website.

The Import-Export Entries plugin for Strapi simplifies the process of migrating content between different environments, such as development, staging, and production, by providing an intuitive user interface to import and export data. To use the plugin, both the source and destination environments must be running the same version of Strapi, and the plugin must be installed and configured on each environment. Once set up, users can export content as JSON files, which can then be imported into the target environment, making it particularly useful for developers working in multi-environment setups. The process requires some initial setup, including installing necessary plugins and building the Strapi admin panel, but once configured, it facilitates easy content migration with minimal manual intervention. This tool is essential for efficiently managing content across various stages of development and deployment in Strapi projects.

The detailed tutorial outlines the creation of a Book Rating application using various web development tools and frameworks, including Next.js, Tailwind CSS, and Strapi. It walks through setting up a new Strapi project, integrating Cloudinary for image uploads, and using several npm packages to enhance functionality. The guide covers creating a backend with Strapi, detailing the implementation of custom controllers, middleware, and policies, specifically focusing on user roles and permissions for book and review management. The frontend is developed with Next.js, utilizing components and features like server-side rendering and dynamic imports. Tailwind CSS is employed for styling, while additional utilities like axios and react-hot-toast facilitate HTTP requests and notifications. The tutorial also explains the setup of a WYSIWYG editor, and includes steps for user authentication and API request handling. Overall, it provides a comprehensive walkthrough for building a full-stack application that allows users to review and interact with books, emphasizing modularity and the use of modern web technologies.

In this tutorial, we will create a Book Ratings application using Strapi Server API and Next.js. We will add policy, middleware, custom controllers, and routes to the Strapi Server API. We will also upload images to Cloudinary and utilize Strapi's built-in Ratings plugin. To get started, you need to have Node.js installed on your machine. You can download it from https://nodejs.org/en/. After installing Node.js, follow these steps: 1. Create a new project using the following command: ```bash npx create-strapi-app book-ratings --quickstart ``` 2. Install the required dependencies for Next.js and Strapi Server API by running the following commands: ```bash cd book-ratings yarn install ``` 3. Start the development server for both Next.js and Strapi Server API using the following command: ```bash yarn develop ``` 4. Open your browser and navigate to http://localhost:1337/admin to access the Strapi admin panel. Login with the default credentials (email: `[email protected]`, password: `strapi`) and create a new Content-Type called "Book" with the following fields: - Title (text) - Info (rich text) - Image (media) 5. Create another Content-Type called "Review" with the following fields: - Comment (text) - Rating (number) - Book (relationship) 6. Add a new policy to Strapi Server API by creating a file named `isAuthenticated.js` in the `./src/extensions/policies` directory. This policy will check if the user is authenticated before accessing certain routes: ```javascript module.exports = async (context, next) => { const authToken = context.request.headers['authorization']; if (!authToken) { throw new Error('Missing authentication token.'); } try { await strapi.plugins['users-permissions'].services.jwt.verify(authToken); } catch (error) { throw new Error('Invalid or expired authentication token.'); } return next(); }; ``` 7. Add a new middleware to Strapi Server API by creating a file named `requireAuth.js` in the `./src/extensions/middlewares` directory. This middleware will redirect unauthenticated users to the login page: ```javascript module.exports = async (config, { strapi }) => { return async (context) => { const authToken = context.request.headers['authorization']; if (!authToken) { throw new Error('Missing authentication token.'); } try { await strapi.plugins['users-permissions'].services.jwt.verify(authToken); } catch (error) { context.url = '/login'; return Promise.resolve(); } }; }; ``` 8. Add a new custom controller to Strapi Server API by creating a file named `book.js` in the `./src/api/book/controllers` directory. This controller will handle requests for creating, updating, and deleting books: ```javascript module.exports = { async create(ctx) { const { info, title } = ctx.request.body; const book = await strapi.services.book.create({ info, title }); return book; }, async update(ctx) { const { id } = ctx.params; const { info, title } = ctx.request.body; const updatedBook = await strapi.services.book.update({ id }, { info, title }); return updatedBook; }, async delete(ctx) { const { id } = ctx.params; await strapi.services.book.delete({ id }); return { message: 'Book deleted successfully.' }; }, }; ``` 9. Add a new custom route to Strapi Server API by creating a file named `create-book.js` in the `./src/api/book/routes` directory. This route will handle requests for uploading images and creating books: ```javascript const { createCoreRouter } = require('@strapi/strapi').factories; module.exports = createCoreRouter('api::book', ({ strapi }) => ({ async post(ctx) { const parser = new DatauriParser(); const { authToken } = ctx.request.headers; const image = ctx.request.files.image; try { const base64Image = await parser.format(path.extname(image.name).toString(), image.data); const uploadedImgRes = await strapi.plugins['upload'].services.uploader.upload(base64Image.content, 'ratings', { resource_type: 'image' }); const imageUrl = uploadedImgRes.url; const imageId = uploadedImgRes.public_id; const { data } = await strapi.plugins['book'].services.book.create({ info: ctx.request.body.info, title: ctx.request.body.title, imageUrl, imageId }, { headers: { Authorization: `Bearer ${authToken}` } }); return data; } catch (error) { ctx.status = 500; return error; } }, })); ``` 10. Create a new file named `fileValidation.js` in the `./src/utils` directory and add the following code: ```javascript export const validateSize = (file) => { if (!file) return; // if greater than 5MB if (file.size > 5000000) { return true; } return false; }; const getExtension = (filename) => { const parts = filename.split('.'); return parts[parts.length - 1]; }; export const isImage = (filename) => { const ext = getExtension(filename); switch (ext.toLowerCase()) { case 'jpg': case 'gif': case 'bmp': case 'png': case 'jpeg': return true; default: return false; } }; ``` 11. Create a new file named `editor.js` in the `./src/utils` directory and add the following code: ```javascript export const author_modules = { toolbar: [ [{ header: [1, 2, false] }], ['bold', 'italic', 'underline', 'strike', 'blockquote'], [ { list: 'ordered' }, { list: 'bullet' }, { indent: '-1' }, { indent: '+1' }, ], ], }; export const author_formats = [ 'header', 'bold', 'italic', 'underline', 'strike', 'blockquote', ]; export const reviewer_modules = { toolbar: [ [{ header: [1, 2, false] }], ['bold', 'italic', 'underline', 'strike', 'blockquote'], [ { list: 'ordered' }, { list: 'bullet' }, { indent: '-1' }, { indent: '+1' }, ], ['link', 'image'], ], }; export const reviewer_formats = [ 'header', 'bold', 'italic', 'underline', 'strike', 'blockquote', 'list', 'bullet', 'indent', 'link', 'image', ]; ``` 12. Create a new file named `cloudinary.js` in the `./src/utils` directory and add the following code: ```javascript import cloudinary from 'cloudinary'; cloudinary.v2.config({ cloud_name: process.env.CLOUDINARY_NAME, api_key: process.env.CLOUDINARY_API_KEY, api_secret: process.env.CLOUDINARY_API_SECRET, }); export default cloudinary; ``` 13. Create a new file named `appContext.js` in the `./src/utils` directory and add the following code: ```javascript import { createContext } from 'react'; const AppContext = createContext({}); export default AppContext; ``` 14. Create a new folder named `pages` inside the `book-ratings` project directory and create the following files: - `create.js` - `edit.js` - `single-book-and-review.js` - `signup.js` - `login.js` 15. Create a new folder named `components` inside the `book-ratings` project directory and create the following files: - `navigationBar.js` - `BookForm.js` - `ReviewForm.js` 16. Update the `create.js`, `edit.js`, `single-book-and-review.js`, `signup.js`, and `login.js` files with the appropriate code for each page. 17. Update the `NavigationBar.js`, `BookForm.js`, and `ReviewForm.js` components with the appropriate code for each component. 18. Add the following environment variables to your `.env.local` file: ``` CLOUDINARY_NAME=<your_cloudinary_name> CLOUDINARY_API_KEY=<your_api_key> CLOUDINARY_API_SECRET=<your_api_secret> ``` 19. Run the following command to start your application: ```bash yarn dev ``` 20. Open your browser and navigate to http://localhost:3000 to access your Book Ratings application. That's it! You have successfully created a Book Ratings application using Strapi Server API and Next.js. You can now create, update, delete books, add reviews, and rate books in your application.

The text provides a comprehensive guide on implementing unit tests for a Strapi plugin using the Jest testing framework, emphasizing the importance of testing in software development to ensure code reliability. It outlines the process of setting up a Strapi project, installing Jest, and configuring test scripts within the package.json file. The tutorial uses a simple todo plugin as an example, demonstrating how to create and test functions within the controller and service layers, including mocking external calls and objects like the Strapi and ctx objects. It details the creation of test suites for both the controller and service layers, highlighting the use of Jest's mocking capabilities to isolate and test individual code components. Additionally, it offers a brief insight into integrating testing into a continuous integration workflow using GitHub Actions, stressing the significance of automated testing in preventing code from being merged if tests fail. The guide concludes by acknowledging the potential challenges of testing, while underscoring its long-term benefits in maintaining a stable production environment.

Creating a Strapi project is as simple as running the command `npx create-strapi-app my-project` in your terminal, which sets up a new application with the necessary dependencies and configuration to get started with building a Headless CMS using the Jamstack ecosystem. As a self-taught front-end developer from South Africa, working remotely for Strapi offers flexible hours and a work-life balance that was previously uncommon in her country. To stay productive while working from home, she sets up a clean workspace, prioritizes tasks, avoids multitasking, takes regular breaks, and schedules time to relax and recharge. With the benefits of remote work, including saving money on commuting and enjoying more flexibility, she believes that more companies should adopt this type of work culture and environment, allowing employees to work from anywhere and at any time.