Skip to main content

FireCMS - Our Commitment to Open Source

Β· 5 min read

Open Source

FireCMS: Open Source at Heart​

Soon we will release an updated CLI that will make it easier to start a new project, in the different flavors of FireCMS.

FireCMS was born as an open-source software project, and our plans are to keep it that way. We believe in the power of open source and the community surrounding it. We are committed to building a product that is not only useful but also transparent and accessible to everyone.

We want to take a moment to share our plans regarding licensing, open source, and next steps.

The FireCMS Multiverse​

From the first version up to today, we have been working on different versions of providing services based on FireCMS. You may be familiar with the Pro or Cloud versions. Also, most of our code is public, but not all of it is open source, as some packages use a different license.

Yes, we experience fragmentation, similar to Android. Let's take a look at these versions and clarify them. Basically, FireCMS 3.0 comes in several flavors.

FireCMS Community​

The core of FireCMS has an MIT license. Use it as you wish, with the freedom to modify and distribute. This is how we started, and we will keep it that way.

A TypeScript library built on top of React to manage data in Firestore forms the foundation of all other versions.

That's not all you need to start, but you get the idea. We are working to update the CLI to make it easier to start a new project.

You host it, you work on it, and you own it. Build whatever you need on top of it. You will get the baseline for the CMS, the same fancy UI, and the same data management capabilities as always. Collections, entities, subcollectionsβ€”it's all there.

Some of the other packages that are part of the Community version, also with an MIT license, are:

  • @firecms/firebase
  • @firecms/ui
  • @firecms/mongodb

Wait... MongoDB?

Yes, we designed the code to work with different backends. We released a MongoDB version compatible with Atlas, and you can build your own adaptation.

FireCMS Cloud​

FireCMS Cloud is a fully managed SaaS. You don't need to worry about hosting, scaling, or maintaining the CMS. You can start a new project in seconds and get a CMS up and running in no time.

How do you get started? Go to app.firecms.co and create a new project.

Even though it is a cloud-managed version, we allow you to extend the CMS with your own views, form fields, and other components. You can build and compile your own views, form fields, and other components, and upload them to your project. These will run in our infrastructure. You still own the data and the Google Cloud Project, but we take care of the rest.

If you want to delve into the code and adapt anything, you can try: npx create-firecms-app and start from there.

FireCMS Pro​

The new kid on the block. After building FireCMS Cloud, we decided to create a version that is self-hosted but includes some of the features of the Cloud version. You can obtain the same advanced features as the Cloud version but host it yourself.

This approach is similar to what other projects like Material UI or Redis have done.

Our goal is to provide more features and be able to work on them and sustain the project. This means we have some extended features, including:

  • User management and permissions
  • Data import/export
  • UI-based Collection Editor
  • AI-based generative features
  • And more

Start quickly: npx create-firecms-app --pro.

The features of this version use the BSL (Business Source License). This means that you can use it for free, but if you are using it for a commercial purpose, you need to pay a license fee.

Open Source​

We are committed to open source. We believe in the power of open source and the community surrounding it. We are dedicated to building a product that is not only useful but also transparent and accessible to everyone.

And we still need the community to make it a better product, whether it's notifying issues, **contributing code **, or just using it and giving feedback. We welcome any help, from Sponsors to Pull Requests.

Final Words​

Our promise is to make FireCMS the platform on which you can build anything, from a Firebase CMS to a real-time Dashboard. We intend to keep its core as open source with an MIT License.

We are thrilled to build in public, and we would make the same decision all over again. Seeing what you build with FireCMS is what keeps us going.

In the past years, we have loved how startups have built core parts of their products with FireCMS, from blogs to internal dashboards.

We are excited to see what you build next.

Exploring the Advantages of a React-based Headless CMS

Β· 5 min read

React Code

Navigating the digital landscape requires robust tools that adapt to evolving needs and enhance the interactive web experiences users demand. With its unique capabilities, React has become a staple for developers embarking on building user interfaces. But when it comes to managing content, pairing React with a headless CMS is proving to be transformative. In this deep dive, we’ll explore why a React-based headless CMS is essential for both developers and content creators.

The Modern CMS Evolution: Headless Versus Traditional​

Before understanding the allure of React in the CMS world, let's dissect the fundamental differences between headless and traditional content management systems.

Understanding Headless CMS​

Unlike traditional CMSs, which tightly bind the back-end content capabilities with the front-end presentation layer, a headless CMS separates the two. It offers content management capabilities broadly accessible via APIs. This separation allows developers to use any front-end framework or technology, like React, to craft dynamic interfaces without being tied to a pre-defined structure.

The Decline of Traditional CMS​

Traditional CMS platforms often impose limitations with their monolithic architecture. These systems are inflexible for campaigns requiring adaptability across devices or bespoke front-end designs. With a headless approach, developers can liberate themselves from these constraints, allowing for diverse digital expressions.

Embracing React: Why Opt for a React-based Headless CMS?​

React, a JavaScript library crafted by Facebook, simplifies creating efficient and dynamic user interfaces through its component-based architecture. Here’s why combining React with a headless CMS can revolutionize content delivery:

1. Reusable Components for Consistency​

With React, developers can modularize their interfaces into encapsulated, reusable components. This promotes efficient development and ensures a consistent user experience, regardless of the platform. When paired with a headless CMS, these components can integrate and display content efficiently across multiple channels.

2. Efficient Performance​

Thanks to the Virtual DOM optimization, React applications render swiftly, enhancing user experiences and reducing load times. When content is loaded through a React-based headless CMS, it reaches the audience with minimal delay, helping maintain engagement.

3. Progressive Web Applications (PWA)​

React supports developing PWAs, which deliver near-native experiences on the web with reliable performance despite varying network conditions. When married to a headless CMS, this capability ensures content reaches users smoothly across any device, facilitating broader engagement.

4. Rich Ecosystem​

The constantly growing React ecosystem includes numerous libraries and tools that simplify headless CMS integration. This wealth of resources enables developers to tailor user interfaces to specific needs, fostering rapid development and adaptive content experiences.

Benefits for Content Creators​

As much as developers are empowered by a React-based headless CMS, content creators also enjoy substantial gains:

1. Content-first Methodology​

Headless CMSs put content creation at the forefront by decoupling content from its presentation. This separation allows creators to focus on enhancing content quality, which is then displayed across web, mobile, and other platforms without format constraints.

2. Flexible Customization​

A React-based headless CMS supports customizable editorial workflows, easing content creation, management, and publication. By offering tools to manage content types, metadata, and taxonomies, content teams can craft and refine material efficiently.

3. Real-time Updates with Firebase​

Using Firebase as a backend adds value by offering rapid real-time content updates across various platforms and devices through API-driven architecture. Thus, users receive the most recent content without delay, fostering a seamless experience.

Choosing the Right Headless CMS​

Selecting the ideal headless CMS for your React application requires careful consideration of various factors:

  • Ease of Use: Opt for a CMS that offers clear documentation and integrates smoothly with React-based frameworks.
  • Multi-platform Support: Ensure the CMS can present content across an array of devices, maintaining responsiveness and design integrity.
  • Collaboration Capabilities: Seek features that facilitate team collaboration, such as real-time editing and version control.
  • Integration and Scalability: Evaluate the CMS's ability to integrate with third-party tools and scale as your needs evolve.
  • Security and Reliability: Choose a CMS that offers robust security measures and reliable performance to safeguard content integrity.

Getting Started: Integrating React with a Headless CMS​

Starting with a React app and a headless CMS is straightforward. Here's a basic guide using a combination of Firebase and React:

  1. Set Up Your React App: Begin with a fresh React installation.

    yarn create firecms-app --pro
  2. Connect Firebase: Integrate Firebase for backend functionality.

  3. Define and Structure Content: Configure your data models within Firebase, specifying necessary relationships and validation.

  4. Publishing and Fetching: Utilize Firebase's API to publish and retrieve content, connecting it to your React components.

  5. Testing and Optimization: Conduct thorough testing across devices and optimize for performance to ensure readiness for launch.

Final Reflection​

Incorporating a React-based headless CMS such as FireCMS enables both developers and content creators to unlock new levels of adaptability, performance, and collaboration. Combining React's flexibility with Firebase’s real-time data capabilities, FireCMS delivers a robust toolkit for managing and deploying content effectively.

It’s more than an investment in technology; it's a commitment to crafting responsive, reliable, and engaging digital experiences. As both the CMS ecosystem and React libraries continue to evolve, the potential to leverage these to improve and streamline your workflow grows exponentially. Explore FireCMS today to harness React's full power in your projects.

Do you Need a No Code Tool for Firebase?

Β· 5 min read

Firebase Landscape

Do You Need a No Code Tool for Firebase?​

This article was initially titled "No Code Tools for Firebase." We already knew some tools, but as we delved into the research, we decided to drop the titleβ€”and the idea. You probably don't need a No Code tool for Firebase. So instead of a benchmark, welcome to the most opinionated article about Firebase and No Code tools.

Firebase and Firestore​

Firebase is one of the greatest products built for developers. Based on Cloud Services, it features a Serverless architecture that allows you to focus on building your product without worrying about the underlying infrastructure. So you have:

  • Firestore: a NoSQL database to store your data in the cloud.
  • Functions: a serverless function that allows you to run your code in response to events.
  • Authentication: a secure authentication system.
  • Storage: a secure file storage system.
  • Hosting: a web hosting service that allows you to deploy your static files.
  • Messaging: a messaging service that allows you to send push notifications to your users.
  • A/B Testing, Remote Config, and many more services.

It gained a lot of popularity among mobile app developers. Here is our easy-to-integrate Backend as a Service with Authentication and File Storage. Simple to use and easy to integrate. Outstanding.

Is your value proposition building an Authentication system, Storage, or Backend? Have a seat and build your product. That's the idea.

Firebase in Your Tech Stack​

So, you decided to use Firebase to build your product. That usually means you are a developer or have an internal development team. The first decision is made. I am building a React App, so I am going to use Firebase for the Backend.

How are you going to integrate your client with Firebase? What strategy are you going to use to build your core product? The essence of your company.

Code

This can be debated, but if you are not ready to build code, you probably shouldn't use Firebase. Don't complicate yourself. There are amazing tools that can help you with that. Do you really want to handle Security Rules, Indexes, and all the other aspects you need to know about Firestore?

No Code Tools for Firebase​

There are some No Code tools for Firebase. Some of them are fully integrated, while others use limited functions of Firebase through their API. If a tool allows you to integrate with a REST API, you can probably use it. Some of them are: FlutterFlow, JetAdmin, Retool, Bubble, etc.

What are you going to build with these tools?

  • Admin Panel?
  • Landing Page?
  • Mobile App?

For some low-complexity products, these tools can be a great help. If you need to hack something quickly, these tools can be a great help. But for a developer, the best option is probably using custom code. Most of the founders I know prefer to build a React App for a landing page rather than using tools like Webflow. It may be faster, but it's going to be more flexible. And let's be honest, developers often struggle with the feature and customization options of these tools.

Inside FireCMS​

Is FireCMS a No Code tool? Yes, we built FireCMS Cloud for that: a fully managed SaaS.

But allow us to share a secret. We had the SaaS, a full No Code tool ready to launch, but we stopped. Why? Because we are developers. We wanted our customers to have the freedom to build anything they could with the previous code-based version. We didn't want to limit them. It didn't make any sense for us to release a new product with fewer features. So we stopped and built that. Using module federation, we allow FireCMS Cloud customers to upload custom code and change whatever they want. Give us the code, and we will handle it for you. From yarn deploy to app.firecms.co.

You could say that FireCMS is a No Code, Low Code, or even Full Code tool. It depends on how you want to use it.

Firebase in Our Tech Stacks​

As many of you may know, FireCMS was born as an internal tool. We built it. Then we used it again, and again, and again. And ended up releasing it as a product.

What kind of projects? Startups. We helped build software-based startups. Among them: medicalmotion.de, theplanetapp.com, oikosbrain.com. Everything from simple landing pages to business intelligence dashboards and ETL pipelines.

In most of these projects, we used Firebase as a Backend. And we always missed a good Admin Toolβ€”a professional dashboard to manage the data. A tool with a good UI/UX, permissions, and a good developer experience. Our best users are developers and ourselvesβ€”a serious dashboard for operations.

Ending Thoughts​

So, why won't you find a lot of No Code tools for Firebase? Because you probably don’t need them. Because maybe Firebase is not the best tool for your product.

If you need a UI on top of your Firebase data, go for software that allows you to customize anything. We will be happy to help you if you decide to use FireCMS. If not, custom code it is.

What Are You Going to Build?​

We want to hear about it :) Find us on Discord, LinkedIn, or ping us at hello@firecms.co.

Firebase: The Ultimate Backend for Your CMS

Β· 6 min read

Firebase logo

In the rapidly evolving landscape of content management systems (CMS), choosing the right backend is more critical than ever. Developers are faced with a plethora of options, from traditional setups like WordPress to modern headless CMSs like Strapi, Contentful, and Sanity. At FireCMS, we've embraced Firebase as the backbone of our CMS, and in this article, we'll delve into the benefits of using Firebase over other CMS backends. We'll also provide direct comparisons to alternative CMSs to help you make an informed decision.

The Firebase Advantage​

Firebase, a platform developed by Google, offers a comprehensive suite of tools for app development. It provides:

  • Cloud Firestore: A flexible, scalable NoSQL cloud database for storing and syncing data in real time.
  • Authentication: Secure and easy-to-use authentication services supporting email and password, phone auth, and social logins.
  • Cloud Functions: Serverless framework to run backend code without managing servers.
  • Hosting: Fast and secure web hosting for your web app, static and dynamic content.
  • Realtime Database: A real-time, low-latency database for mobile, web, and server development.

By leveraging Firebase, FireCMS offers a CMS that is not only powerful but aso scalable, secure, and cost-effective.

FireCMS Dashboard The sleek and intuitive FireCMS dashboard powered by Firebase.

Why Choose Firebase Over Alternative CMS Backends?​

Scalability and Performance​

Firebase is built on Google's infrastructure, ensuring high performance and reliability. It automatically scales to handle your app's growth without the need for manual intervention.

Compared to WordPress:

  • WordPress relies on traditional hosting and databases like MySQL. Scaling requires significant effort, often involving complex setups with load balancers and database replication.

Compared to Strapi and Ghost:

  • Strapi and Ghost require self-hosting, which means you're responsible for scaling your servers as your user base grows.
  • Firebase handles scaling seamlessly, allowing you to focus on developing features rather than infrastructure.

Real-time Data Synchronization​

Firebase's real-time databases enable instant data updates across all clients, enhancing user experience in collaborative environments.

Compared to Contentful and Sanity:

  • Contentful and Sanity offer real-time editing but may require additional configurations or costs for real-time data syncing in your applications.
  • With Firebase, real-time capabilities are built-in and readily accessible.

Security and Authentication​

Firebase Authentication provides a robust security layer without the need for additional backend code.

Compared to Strapi and KeystoneJS:

  • Strapi and KeystoneJS offer authentication but often require additional setup and maintenance.
  • Firebase provides a secure, out-of-the-box solution that integrates seamlessly with FireCMS.

Serverless Architecture​

Firebase's serverless approach means you don't have to manage servers or worry about server maintenance.

Compared to Self-hosted CMSs:

  • Self-hosted solutions like Strapi, KeystoneJS, and Ghost put the onus on you to manage servers, updates, and security patches.
  • Firebase's serverless services reduce overhead and potential downtime.

Cost-effectiveness​

Firebase offers a generous free tier and a pay-as-you-go model, making it suitable for projects of all sizes.

Compared to Contentful and Agility CMS:

  • Contentful and Agility CMS can become costly as you scale, with pricing based on usage, users, and features.
  • Firebase's pricing model is straightforward and often more affordable in the long run.

Direct Comparisons with Other CMSs​

To better understand Firebase's advantages, let's compare it directly with other popular CMS backends.

Firebase vs. WordPress​

WordPress is a long-standing CMS known for powering blogs and websites.

  • Architecture: WordPress is monolithic, coupling the frontend and backend. Firebase, used with FireCMS, promotes a headless architecture, offering more flexibility.
  • Scalability: Scaling WordPress can be complex and costly. Firebase scales automatically.
  • Security: WordPress sites can be vulnerable if not properly maintained. Firebase provides robust security out of the box.

Firebase vs. Strapi​

Strapi is an open-source headless CMS that allows you to create APIs quickly.

  • Hosting: Strapi requires self-hosting, adding to maintenance efforts.
  • Flexibility: While Strapi is customizable, Firebase offers greater flexibility with serverless functions and integrations.
  • Real-time Data: Firebase excels in real-time data handling, whereas Strapi would require additional setup.

Firebase vs. Contentful​

Contentful is a headless CMS that offers content infrastructure for digital teams.

  • Cost: Contentful's pricing can be prohibitive for larger teams or projects. Firebase's pay-as-you-go model can be more economical.
  • Customization: Firebase allows for extensive customization with Cloud Functions. Contentful may have limitations due to its SaaS nature.
  • Vendor Lock-in: With Firebase, you're building on a platform with widespread adoption and support. Contentful's proprietary setup may limit flexibility.

Firebase vs. Sanity​

Sanity is a headless CMS with real-time capabilities.

  • Data Management: Sanity uses GROQ for queries, which is less common than Firebase's querying methods.
  • Ecosystem: Firebase integrates seamlessly with other Google Cloud services, offering more tools and services.
  • Scalability: Both offer scalability, but Firebase's infrastructure is arguably more robust given Google's backing.

FireCMS: Harnessing Firebase's Potential​

With FireCMS, you get a CMS explicitly designed to leverage Firebase's strengths.

  • Easy Setup: Configure your CMS with minimal code using FireCMS's intuitive schema definitions.
  • Real-time Admin Panel: Experience instant updates in your admin panel, streamlining content management.
  • Customizable UI: Tailor the admin interface to your brand and workflow needs.
  • Extensibility: Use Firebase Cloud Functions to extend functionality without managing additional servers.

Configuring FireCMS Easily configure your FireCMS with straightforward schemas.

Addressing Common Concerns​

Learning Curve​

Adopting new technology can be daunting. However, Firebase and FireCMS offer extensive documentation and community support.

  • Resources: Access tutorials, guides, and a vibrant community on Discord.
  • Support: FireCMS provides commercial support to assist with your project's needs.

Data Modeling with NoSQL​

Firebase uses NoSQL, which differs from traditional relational databases.

  • Flexibility: NoSQL allows for more flexible data models.
  • Guidance: FireCMS's schema system helps structure your data effectively.

Vendor Lock-in​

Relying on a platform can raise concerns about dependency.

  • Open Source: FireCMS is open-source, giving you control over the CMS codebase.
  • Data Control: With Firebase, your data is stored in standard formats, and exporting is straightforward.

Get Started with FireCMS and Firebase​

Transitioning to Firebase with FireCMS empowers you to build scalable, secure, and high-performance applications.

  1. Explore FireCMS: Visit firecms.co to learn more about features and capabilities.
  2. Try the Demo: Experience FireCMS firsthand with our live demo.
  3. Join the Community: Connect with other developers on our Discord server.

Final Thoughts​

Choosing the right backend for your CMS is a pivotal decision that impacts scalability, security, and development speed. Firebase, paired with FireCMS, offers a compelling solution that outshines traditional CMS backends like WordPress, Strapi, Contentful, and Sanity.


What's Next for Your Project?​

We'd love to hear about what you're building. Whether you're updating an existing project or starting something new, FireCMS and Firebase can help you achieve your goals faster and more efficiently.

Get in Touch:

Let's build something amazing together!

The Good, the Bad, and the Ugly of Open Source

Β· 4 min read

The good the bad and the ugly

OpenSource, The Good, the Bad, and the Ugly​

Open source is a hot topic right now. Often making headlines due to high-profile conflicts like the recent WordPress vs. WP Engine dispute over plugin licensing disagreements, or Elastic's licensing battle with AWS, which led to a shift to a source-available license. These incidents underscore the complex landscape of open-source development, a journey we've been navigating since our initial commit on GitHub in April 2020.

Since its inception, FireCMS has evolved from an internal tool to a widely-used open-source content management system (CMS) that helps developers build and prototype products efficiently. We want to share our experiences; the good, the bad, and the ugly of building FireCMS in public with an open-source license.

The Good​

Our journey with FireCMS began as an in-house solution to streamline our development process. Seeing it grow beyond our organization and being utilized by other projects and companies has been profoundly fulfilling. It not only helped us in building and prototyping products faster but also empowered others to do the same.

Our obsession is building the best CMS out there, focusing on creating a functional and beautiful software experience. The feedback we receive from the community is incredibly helpful. Bugs, feature requests, and sometimes even pull requeststhese contributions drive us forward.

Our stakeholders are developers in the sprints, and our QA team is the community. We prioritize features requested by even a single user because we believe in building something that genuinely helps people. While other companies have private messaging apps, we have an open Discord server for everyone. This transparent and collaborative approach has fostered strong, organic community growth; a huge push for us.

Watching FireCMS grow organically has been incredibly rewarding. We've always felt that we're doing something right as the community and usage expand naturally. Seeing developers embrace our project fills us with pride and motivates us immensely.

FireCMS Dashboard The intuitive interface of FireCMS that our users love.

The Bad​

Monetizing an open-source project is not easy. While we started receiving sponsorships on GitHub, it quickly became clear that it wasn't enough to sustain the project's growing demands. As we invested more time into the codebase, turning it into a full-time job, we needed to find a way to make it sustainable, because we truly love working on FireCMS.

Transitioning from a passion project to a sustainable business was tougher than we expected. We decided to build a SaaS product: a completely managed service where you bring your Firestore (or MongoDB) project, and we take care of the rest. With more features, plugins, and extensions, it offered a commercial product with a different business model. However, it's not just about having a good product; it's about selling it.

We faced resistance as users were accustomed to free access, and the number of people willing to pay for a product is tiny. We experimented with premium features and consulting services, but these options didn't fully address the sustainability challenge.

Usually, it's at this crossroads; having a lot of people using your product but few willing to pay, where open-source projects change their licenses. Companies like ElasticSearch, MongoDB, Redis, and HashiCorp have transitioned to source-available licenses after facing similar challenges.

The Ugly​

Encountering companies that clone not just our code but our entire brand identity was disheartening. Copycats, not competitors or alternative builds, but entities that copied even our landing page and branding. Not cool.

We would love to have more working hands on the project, but looking back over the past year, we've received more feature requests than pull requests. We never aspired to hold the title of Benevolent Dictator for Life, so popular these days. Open source thrives on community contributions, and we hope more developers will join us in enhancing FireCMS.

What's next?​

More FireCMS, for sure. Struggles and everything, we are still obsessed in making functional and beautiful software. So check the releases, get in our Discord, start a project in FireCMS Cloud or give us a star in Github.

What are you going to build?​

We want to hear about it :) Find us on Discord, LinkedIn, or ping us at hello@firecms.co

How we built NEAT, the 3D gradient tool

Β· 5 min read

The first time I saw the Stripe shader animation on their website, I was hooked. I really wanted to have something that cool for the websites I was working on and tried to reverse engineer what Stripe does. I must say, it wasn't easy! I had to learn a lot about shaders, WebGL, and three.js to get to the point where I could create something similar.

We are going to be using a lot of Perlin noise functions to generate the waves and the gradient. Perlin noise is a type of gradient noise used in computer graphics to create natural-looking textures. It was invented by Ken Perlin in the 1980s. The noise is generated by interpolating between random values. It is locally stable, so it is well-suited for generating animations by including a time parameter in the noise function.

Perlin Noise Texture

The Stripe animation is really a 3D shape, a plane divided in triangles acting like a flag that has waves passing through it. On top of that, there is a gradient that changes color and brightness. That is really the essence of the effect.

I tried achieving the same effect with basic three.js, but it was really hard to get it right. I quickly realized that I need to use custom shaders, one for determining the position of each vertex in the plane and another one for assigning the color of each pixel. The first iterations were calculating the position of each vertex in the CPU and sending it to the GPU. This was really slow, and I had to find a way to calculate the position of each vertex in the GPU.

Creating the Vertex Shader​

The vertex shader is in charge of determining the position of each vertex. We have this loop running on the CPU using requestAnimationFrame that triggers updates. Each vertex is passed through a Perlin noise function. This Perlin function receives the coordinates of the shader, as well as the elapsed time and some parameters that we use to tweak the waves animation. We can change the frequency of the waves, the amplitude, the speed, and the horizontal and vertical pressure.

Creating the Fragment Shader​

The fragment shader is in charge of determining the color of each pixel. NEAT uses from 1 to 5 colors as input. Each of these colors is passed through a Perlin noise function that generates a pattern like the one represented above. The colors are then mixed together based on the noise value. If we don't apply any blending to the colors, the result will be a sharp transition between the colors, as represented in the video above. We can apply a blending factor to the colors so that the transition between them is smoother. We can also apply horizontal and vertical pressure to the color patterns, so they are more or less pronounced.

Post Processing​

If we put it all together, we get a 3D gradient that morphs and changes. At this point, we can apply some post-processing effects to the final image. We can change the brightness and saturation of the colors. It turns out this is pretty easy to do with WebGL shaders once you have calculated the color of each pixel. We can also add some shadows and highlights based on the vertex normals. This is a simple way to add some depth to the image. In the latest versions, we added some grain to the image to make it look more like a film. We can change the scale, intensity, and speed of the grain.

The Editor​

Having all this power in a single shader is really cool, but it's not easy to tweak the parameters. That's why we created a simple editor that allows you to change the parameters in real-time. You can change the speed, the frequency of the waves, the amplitude, the colors, the blending, the brightness, the saturation, the grain, and the resolution of the image, among other things. All this is performed in real-time. Every change is passed to the shaders as a uniform variable, and the image is re-rendered.

This is really cool because you can see the changes immediately. Until we had the editor, we were tweaking the parameters in the code and reloading the page to see the changes. This was really slow and cumbersome. It was also hard to know if we were going in the right direction. It was more a process of trial and error. It was not until we had the editor that we could really see the potential of the tool. We could create a lot of different patterns and see how they look in real-time. We could also save the patterns we liked and keep them as presets.

At this point, we were able to fine-tune a gradient to make it look exactly like the Stripe gradient. It has been quite a journey, but we are really happy with the results. Once you have a gradient you like, you can export it as a JSON object and use it in your projects. We have created a lot of patterns with NEAT, and we are really happy with the results. We have used it in many projects, and it has always been a hit. We are really proud of it, and we hope you like it too.

Check the NEAT website to see some examples of what you can do with it. You can also check the NEAT repository to see the code and the editor in action.

FireCMS Beta.9 is out

Β· 3 min read

Check what's new in your favourite CMS

We are excited to announce the release of FireCMS Beta.9. This release includes a lot of new features and improvements, including a new Markdown editor, multi select, and MongoDB support.

FireCMS continues its journey to become the most flexible and powerful CMS. We aim to become a true headless CMS, with and by headless we mean compatible with any database and backend, as well as also detached from any frontend technology.

New Markdown editor​

Editor

Completely revamped Markdown editor inspired by Notion, with an amazing UX and autocomplete features. The previous editor was not very user-friendly, and we have decided to replace it with a new one that is more powerful and easier to use. It is also now possible to upload images inline. The editor can be used as a Markdown field in your collections, as well as a standalone component in your components.

Multi select​

Multi select

We have improved the multi select component, now supporting search and better performance. The previous version would clip items based on the position of the dropdown, which was not ideal.

MongoDB support​

FireCMS continues to expand its database support. We have added a new package @firecms/mongodb that allows you to connect to MongoDB databases.

You can now run FireCMS PRO with MongoDB as your backend, with no connection to any Firebase services. Use the Auth and Database services of MongoDB Atlas to authenticate and store your data.

This is part of our efforts to bring all the power of FireCMS with the PRO version to any database you want.

UI updates​

Our FireCMS UI package is available as a separate package, @firecms/ui. This allows you to use the same UI components we use in FireCMS in your own projects.

Toleroo

We have improved it's customization capabilities. For example, Toleroo needs to apply it's brand guidelines to its CMS implementation. Until now we could only change colors, but now we can change fonts, sizes, and more. For each text variant you can define a set of tailwind classes.

If you are updating from a previous version, you will need to add an import in your css:

@import "@firecms/ui/index.css";

and then you are free to customize each style as you see fit.

.typography-h1 {
@apply text-6xl font-headers font-light;
}

.typography-h2 {
@apply text-5xl font-headers font-light;
}

.typography-h3 {
@apply text-4xl font-headers font-normal;
}
/* ... */

And more​

There are many more improvements and bug fixes. Check the changelog for more details.

Hello MongoDB! FireCMS Gets a NoSQL Boost

Β· 3 min read

Dark mode

Say Hi to MongoDB!​

For FireCMS users, connecting to MongoDB just got a lot easier. While FireCMS has always offered the flexibility to integrate with various databases, we're thrilled to announce a dedicated package for seamless MongoDB integration.

How easy? npm easy npm install @firecms/mongodb, or yarn easy yarn add @firecms/mongodb.

This is part of our efforts to bring all the power of FireCMS with the PRO version. The most advanced and flexible version of FireCMS.

Why MongoDB?​

Choosing the right database is crucial, and MongoDB, especially when paired with its cloud counterpart Atlas, presents a compelling option for many projects. Its document-oriented structure aligns well with how we often model data, and its performance and scalability make it suitable for projects of all sizes.

Same FireCMS Experience, Now Powered by MongoDB​

We implemented the necessary utilities to connect and consume Atlas MongoDB database and authentication services.

So that means that you can use all the features already available in FireCMS. From the collection editor to the LLM based content generation, you can use all of them.

As you may already know, MongoDB Atlas doesn't provide a Storage service, such as AWS S3 or Firebase Storage. But no worry, you can fill the gap with FireCMS's extensibility. You're free to integrate any storage solution you prefer, take inspiration from our Custom Storage Documentation which details the interface and a sample for an AWS S3 integration.

Only MongoDB?​

While this announcement focuses on MongoDB, it's crucial to remember that FireCMS's core is database agnostic. The power lies in its adaptability. You can build custom Data Source integrations, connecting FireCMS to everything from traditional SQL databases like Postgres to lightweight options like SQLite.

How to get started?​

We recommend you take a look ath the documentation regarding FireCMS Controller. We also dropped an example in our Github: FireCMS MongoDB Example.

But here are the steps if you want to jump on it:

  • Install the package yarn add @firecms/mongodb or npm install @firecms/mongodb
  • Add the atlas config, example:
const atlasConfig = {
"appId": "your_app_id",
"appUrl": "your_app_url",
"baseUrl": "your_base_url",
"clientApiBaseUrl": "your_client_api_base_url",
"dataApiBaseUrl": "your_data_api_base_url",
"dataExplorerLink": "your_data_explorer_link",
"dataSourceName": "mongodb-atlas"
};
  • Create a new MongoDBController instance and pass the atlas config:
const { app } = useInitRealmMongodb(atlasConfig);
  • Init the new MongoDB hooks:
const authController: MongoAuthController = useMongoDBAuthController({
app
});

const cluster = "mongodb-atlas"
const database = "todo"

const mongoDataSourceDelegate = useMongoDBDelegate({
app,
cluster,
database
});

And that's it. The rest of the job it's identical to any other FireCMS project. Check the complete instruction in the FireCMS MongoDB Documentation.

What are you going to build?​

We want to hear about it :) Find us on Discord, LinkedIn, or ping us at hello@firecms.co

Picking a CMS in 2024

Β· 12 min read

CMSs

If you are working on any kind of public-facing digital project β€”no matter if it's a website, a web app, a mobile app or desktop app β€” you will likely need a Content Management System. There are a lot of options to chose from, and different solutions are better suited for some needs than others. We can distinguish some categories straight away:

  • General purpose or web oriented
  • Headless or traditional
  • By access to data APIs (GraphQL, REST, SDKs)
  • Cloud based or self-hosted

We are building this guide to help you pick the right CMS for your project. We will be updating it regularly, so make sure to check back often.

One of the motivations for this guide is to help users understand the differences between CMSs. Despite creating FireCMS, we are not trying to promote it as the best solution for everyone. We are just trying to help people understand the trade-offs of different solutions. This is the same thing we say to our users when they ask us for advice on what solution to use.

General purpose or web oriented​

The first thing to consider is whether you need a general purpose CMS or a web-oriented one. A general purpose CMS is a tool that can be used to manage content for any kind of project (apps, desktop, web), while a web-oriented CMS is a tool that is designed to manage content for websites.

Web oriented CMSs are built with the assumption that the content will be displayed on a website, and they usually provide a web editor to edit the content. This is not the case for general purpose CMSs, which can be used to manage content for any kind of project, including mobile apps, desktop apps, etc.

Web oriented CMSs are usually simpler to use, but they are also more limited in terms of features and integrations. They provide built-in support for pages, headers, footers, navigation menus, and other common website features, but they are not as flexible as general purpose CMSs. Also, they will typically have a published flag (or equivalent) for each entity. Of course, nothing stops you from using a general purpose CMS to manage content for a website.

Do you need a blog? A web-oriented CMS will likely have a built-in blog solution, while a general purpose CMS will not.

Examples of web-oriented CMSs are Wordpress, Prismic or Storyblok. Those are the way to go if your main goal is to build a website and a web editor is useful to you.

General purpose CMSs can be used to manage any type of content. Think of things like the menu of a restaurant or a delivery app. Or the exercises and videos of a fitness app. Or the podcasts in a podcast app. If you are working on a mobile app or a web app where you need to manage any content related to your business, FireCMS is a great option. It has all the advantages of other general purpose CMSs, but it uses Firebase as a backend, so you have access to all the robustness, extensibility and features of Google Cloud.

Headless or traditional​

Traditional CMSs are the ones that provide a web editor to edit the content, and they will be responsible for rendering it on the website. So the admin interface and the website are tightly coupled.

Headless CMSs are the opposite: they are not coupled to the rendering of the website and are in charge of managing the content exclusively. CMS and website are different software components in this case. They provide an API to access the content. The website is responsible for rendering the content, and it can be built with any technology.

Headless CMSs are more flexible than traditional CMSs, but they require more work to build the website. The benefit is that you can build it with any technology you want.

Note that a CMS can be web-oriented and headless at the same time. In this case, the CMS will provide a web editor to edit the content, but it will not be responsible for rendering it on the website. Examples of this are Prismic, Contentful or Agility CMS.

Examples of headless and general purpose CMSs are Strapi, GraphCMS or Sanity

FireCMS is a headless and general purpose CMS. It is a general purpose CMS that can be used to manage content for any kind of project, including websites, web apps, mobile apps, desktop apps, etc.

Access to data APIs​

The next thing to consider is the APIs provided by the CMS. The most common APIs are REST and GraphQL. REST APIs are the most common, but they are not as flexible as GraphQL APIs. GraphQL APIs are more flexible, but they are a bit harder to use.

Some CMSs provide SDKs to make it easier to use their APIs. SDKs are usually available for the most common languages, like JavaScript, Java, Python, PHP, etc.

FireCMS uses Firestore as a backend, so it benefits from all the native SDKs provided by Google. This is a big advantage, because it means that you can use the same SDKs to access the CMS and to access the Firestore database. At the same time, having Firebase as a backend means that you can use all the Firebase features, like authentication, hosting, functions, etc. No other CMS can offer this.

Cloud based or self-hosted​

The last thing to consider is whether you want a cloud based CMS or a self-hosted one. Cloud based CMSs are hosted by the CMS provider, and you don't need to worry about hosting and maintenance. Self-hosted CMSs are installed on your own servers, and have a little more overhead, but also better flexibility.

Other considerations​

Main user type​

If your main user type is a content editor, you should consider a CMS that allows them to edit the content without having to write code. Also, you want to make sure that the CMS is easy to use, and that it provides a good user experience, as well as preventing users from making mistakes, that could potentially break the apps linked to the underlying database.

Data portability​

If you are planning to use a CMS for a long time, you should consider the data portability. You want to make sure that you can easily export the data from the CMS, and that you can easily import it in another CMS.

Also, you want to check the license of the CMS. Some CMSs are open source, while others are proprietary.

CMSs comparison​

Check the comparison table below to see which APIs are provided by each CMS.

NAMEFireCMSAgility CMSButterCMSContentfulGhostGraphCMSKeystone JSPrismicSanityStoryblokStrapiWordpress - unite cms
Installation
Open Sourceβœ…βŒβŒβŒβœ…βŒβœ…βŒβœ…βŒβœ…βœ…
Cloud ServiceWIPβœ…βœ…βœ…βœ…βœ…βŒβœ…βœ…βœ…βŒβœ…
On Premises Installationβœ…βŒβŒβŒβœ…βŒβŒβŒβŒβœ…βœ…βœ…
Cloud Service Hosted in Europeβœ…βŒ~❌~βœ…βŒ~βœ…βœ…~βœ…
Commercial Support Available?βœ…βœ…βœ…βœ…βœ…βœ…βŒβœ…βœ…βœ…βœ…βœ…
Users
User Managementβœ…βœ…βŒβŒβŒβŒβœ…βŒβœ…βœ…βœ…βŒ
Role Based Permissionsβœ…βœ…βœ…βœ…βœ…βœ…βœ…βœ…βœ…βœ…βœ…βœ…
Document Level Permissionsβœ…βœ…βŒβŒβŒβŒβœ…βŒβœ…βœ…βœ…βœ…
Features
Web builderβŒβŒβŒβŒβœ…βŒβŒβœ…βŒβœ…βŒβœ…
Real time supportβœ…βŒβŒβŒβŒβŒβŒβŒβŒβŒβŒβŒ
Search: Full Text Searchβœ…βœ…βœ…βœ…~βœ…βŒβœ…βœ…βœ…βœ…~
Eventbusβœ…~❌❌~βŒβŒβŒβœ…βœ…βŒβŒ
Client Side Formsβœ…βœ…βŒβŒ~βœ…βœ…βŒβœ…βŒβœ…βŒ
Plugin Systemβœ…βœ…βŒβŒβŒβŒβœ…βŒβœ…βœ…βœ…βŒ
Customizable UIβœ…βœ…βŒβœ…~βŒβœ…βŒβœ…βœ…βœ…βœ…
Content Treesβœ…βœ…βŒβŒ~βŒβŒβŒβŒβœ…βŒ~
Nesting fields/elementsβœ…βœ…βœ…βœ…~βŒβŒβœ…βœ…βœ…βœ…
Image: Manipulationβœ…βœ…βœ…βœ…~βœ…βœ…βœ…βœ…βœ…~
Technical
OAuth 2.0 Supportβœ…βœ…βŒβœ…~βŒβœ…βŒβœ…βœ…βœ…~
CDN Supportβœ…βœ…βœ…βœ…~βœ…βŒβœ…βœ…βœ…βœ…βœ…
Backup Featureβœ…~❌❌~βœ…βŒβŒβŒβœ…βŒβŒ
Import/Exportβœ…βœ…βœ…βœ…~βœ…βœ…βœ…βœ…βœ…βŒβœ…
CLIβŒβŒβŒβœ…βœ…βŒβœ…βœ…βœ…βœ…βœ…βœ…
Web Hooksβœ…βœ…βœ…βœ…βœ…βœ…βŒβœ…βœ…βœ…βœ…βœ…
Versioningβœ…βœ…βŒβœ…βŒβŒβŒβœ…βœ…βœ…βŒβœ…
Data
GraphQL: APIβŒβœ…βœ…βœ…βŒβœ…βœ…βœ…βœ…βœ…βœ…βœ…
REST: APIβœ…βœ…βœ…βœ…βœ…βœ…βŒβœ…βœ…βœ…βœ…βœ…
SDK: Javaβœ…βŒβŒβœ…~βŒβŒβœ…βŒβœ…βŒβŒ
SDK: C#βœ…βœ…βœ…βœ…~βŒβŒβœ…βœ…βŒβŒβŒ
SDK: PHPβœ…βŒβœ…βœ…~βŒβŒβœ…βœ…βœ…βŒβŒ
SDK: JavaScriptβœ…βœ…βœ…βœ…βœ…βœ…βŒβœ…βœ…βœ…βœ…βŒ
SDK: Reactβœ…βœ…βœ…βŒ~βœ…βŒβŒβœ…βœ…βŒβŒ
SDK: AngularJSβœ…βŒβœ…βŒ~βœ…βŒβŒβŒβœ…βŒβŒ
SDK: TypeScriptβœ…βŒβŒβœ…~βœ…βŒβŒβœ…βœ…βŒβŒ
tip

Picking a CMS is a very personal decision, and there is no one-size-fits-all solution. You should consider your team's experience, the project's requirements and your budget.

Beta Launch, FireCMS 3.0 Cloud and Cloud Plus

Β· 8 min read

FireCMS 3.0 The Next CMS that is already here.πŸ”₯​

Three years ago we launched the first version of FireCMS. We started offering an open source core so that anyone could build whatever they need. FireCMS started as an internal tool that we offered to our clients. The usual use case is: you are building an app or a web using Firebase as a backend, and need a backoffice tool to manage your data, your users, your files. Everything in a secure environment and with a strong roles and permissions system. Along the years, we have developed full stack solutions for partners like as Oikosbrain, medicalmotion or ThePlanetApp. Likewise, many agencies have benefited from the open-source nature of the project and use it to develop internal apps for their own clients. Since it’s inception, FireCMS has been downloaded 200k+ times in NPM.

Along the years we understood that we need to make it simple for the customer to install and configure FireCMS, but also keep the power of using code to extend the base product with any feature. We helped customers build extensions for other database providers, such as MongoDB, or create a 3D model editor using Three.js. And that’s our focus for the next years: Build the best no-code CMS, while preserving all the customization options in code, and ease of use our users love.

Launching the Beta version of FireCMS 3​

We have put a lot of effort into building a hosted version of the collection editor, including most of the customization an validation oprions. We provide a great UI, and you extend it however you need.

☁️ The Cloud Version​

One of the most significant additions to FireCMS 3.0 is the introduction of the SaaS cloud-hosted version. This new offering allows users to easily access and manage their FireCMS projects directly from the cloud. With this feature, users no longer need to worry about setting up and maintaining their own infrastructure, as FireCMS takes care of it all. This greatly simplifies the deployment process and allows end users to focus more on building their applications.

You no longer need to manually update CMS versions since every update is pushed to the cloud and received by all clients.

πŸ”‘ The customers still own the data​

Your data is yours, we don’t need to access it. Each FireCMS project is linked to a Firebase project, that is owned by you, the customer. We just provide the interface to manage the data. If you need, we also help you creating and configuring the Google Cloud project and the Firebase project. We can help you with the process. Starting now.

πŸ§‘β€πŸ’» Customization with Code​

With FireCMS 3.0, customization options have been taken to the next level. Now, users can leverage the power of code to personalize their CMS even further. Whether it's tweaking the layout, adding custom fields, or implementing complex business logic, developers have the flexibility to extend and modify FireCMS to suit their specific needs. This level of customization empowers users to create truly unique and tailored CMS experiences. We even built a CLI for that. Start the project, write the code, upload it and find the features in the app. Extend the React basecode with Typescript or Javascript.

An example of highly customized instance of FireCMS, with the ThreeJS editor integrated

An example of highly customized instance of FireCMS, with the ThreeJS editor integrated

We have also built a CLI for making the interaction with the Cloud easier. Start the project, write the code, upload it and find the features in the app. Extend the React base code with Typescript or Javascript.

And just deploy with one command:

firecms deploy

New UI collection schema editor​

Originally, collections were only defined in code. Now, you can do it with a UI as well. Add fields, add collections, property types, files, images. All the properties, now they can be configured with a few clicks. If you need to add some logic to your collections, like enabling some fields based on other values, you can get the code for your current collection

FireCMS collection editor

But it gets even better! FireCMS can automatically detect new values and add them to the schema with just a single click. This empowers users to easily customize and adapt their collection schemas to meet their evolving needs.

Even though the collection schema is now stored in the backend, you still maintain full control over which properties can be modified from the user interface. Moreover, you have the ability to define default values for new documents, ensuring consistency and efficiency in data management.

New data inference​

Do you have a few collections in your project and want to get started quickly? FireCMS can now infer the schema from your data. This means that you can begin using FireCMS in just a few minutes, without the need to write a single line of code. Simply import a data file and start immediately.

πŸ’½ Data import and export​

Now, you can import and export the data. As we've stated, you are the owner of the data and it's up to you to decide.

Import​

You can now import data from CSV, JSON, or Excel files. This feature is excellent for migrating data from other systems. We have incorporated a modern UI that enables you to define how the data is imported and how it is mapped to your collections.

Import data view

Export​

You now have better control over how your data is exported:

  • Define the format of your timestamps.
  • Define how arrays are serialized in CSV files (assigning one column per array item, or serializing the array as a string).
  • Export your data as JSON or CSV.

πŸ€– GPT-4 Content Generation​

We have improved our interface to enable content generation. You can create a complete database row from a prompt, a title, or any available field. We also provide a UI to perform various actions such as summarizing, translating, and expanding. Whatever you can think of is ready to use. We use GPT-4 under the hood.

🚀 Performance improvements​

Versions 1.0 and 2.0 of FireCMS were based on Material UI (mui). This was great for getting started quickly, but it had some drawbacks. The main one was that performance was not great. The styling solution of MUI is based on emotion which resolves styles at runtime. This means that the browser has to do a lot of work to resolve the styles. This is not a problem for small applications, but it can be a problem for large applications.

In FireCMS 3.0, we have migrated to Tailwind CSS. This is a utility-first CSS framework that allows us to generate a small CSS file with all the styles resolved at build time. This means that the browser does not have to do any work to resolve the styles, which results in a much faster experience. πŸš€

πŸ‘₯ Roles and permissions​

Now you can leverage out of the box invitations, user management, and a role system. The default ones, Viewer, Editor, or Admin, or create your own custom ones.

Search out of the box. No need to create an index or to rely on a third-party provider, type and find your records. We look through all the fields and perform a smart search. Just click on search and start typing.

🎨 New components library, theming and better icons​

In FireCMS 3.0, components, icons and colors have received a significant upgrade.

We have built a full component library

The new release includes an expanded set of icons, giving users more options to choose from when designing their CMS. Additionally, the color palette has been expanded, allowing for greater flexibility in creating visually appealing interfaces. These enhancements enable developers to create stunning and intuitive CMS designs that align with their brand and aesthetic preferences.

Pricing​

We decided to provide a free tier of use of the CMS. FireCMS Cloud Free. This is everything you have in the Free version:

  • Unlimited projects
  • Unlimited collections
  • Custom fields and custom views
  • Customization with Code
  • All available form fields
  • Schema editor and inference from data
  • Advanced data import and export
  • Default roles
  • 3 users

If you need some extra features, we have FireCMS Cloud Plus, which includes:

  • Everything in the free tier
  • Local text search
  • Unlimited users and roles
  • Unlimited data export
  • Theme and logo customization
  • Custom user roles
  • GPT-4 content generation

While the free plan is, well, free, the Plus is 9,99€ per customer per month. We are continuously going to add features, provide support, and a live web app where you can find your projects.

How to get started?​

Go to app.firecms.co and create your project.

What are you going to build?​

We want to hear about it :) Find us on Discord, LinkedIn, or ping us at hello@firecms.co

Sign up to our newsletter to get the latest news and updates. No spam!