- what tools and libraries are included in every Webiny project
Webiny is an open-source project, and as such, it is also relying on other open-source software and tools, to bring the best possible experience and increase development productivity.
In this key topic, we briefly cover all of the different tools that are included and automatically configured for you, in every Webiny project.
Note that a Webiny project is a full-stack project, and that some of the tools mentioned might be more relevant only for backend development, and less for frontend (and vice-versa).
In terms of runtimes, for backend development, Node.js is used. Version 14 is the minimum required version.
Except TypeScript mentioned above, every Webiny project comes with the following static code analysis tools:
- Prettier - makes sure the code is consistently formatted across the whole project
- ESLint - warns about bad coding practices, redundant code, and more
For unit and integration testing purposes, Jest is configured, also with TypeScript support.
For end-to-end (E2E) testing, we provide an easy way to get started with Cypress - an E2E Testing Framework.
For all code building needs, every Webiny project comes with the gold standard tools:
- Webpack - performs code bundling and optimization
Both tools are used in frontend and backend development.
For everything deployment-related, by default, Webiny projects come with Pulumi - a modern infrastructure as code (IaC) solution. Essentially, necessary cloud infrastructure is defined via TypeScript code, and the tool itself performs deployments, change detection, handles multiple environments, and more.
For backend development or in most cases, development of HTTP APIs, Webiny almost exclusively relies on the GraphQL standard, and provides an easy way to create new schemas or expand existing ones, via plugins. Note that, behind the scenes, the GraphQL Tools library is what is being used to make it happen.
As far as databases are concerned, you are allowed to bring your own database clients and other related tools. But, by default, we do provide our own database client which you can use as well.
Along with the primary database of default Webiny applications, for example Page Builder and Headless CMS, they also rely on Elasticsearch - a distributed search and analytics engine. The official client is what we use for interacting with it, and we also provide a convenient way to include it in your code, using the
Read more about the cloud infrastructure resources that get deployed into your AWS account in our Cloud Infrastructure key topics section.
When it comes to authentication and authorization, no particular open source libraries are being used. Webiny provides a couple of its own packages that deal with it.
For communicating with AWS services, you are, naturally, free to use the AWS SDK.
Finally, it’s worth mentioning that chrome-aws-lambda library is used within the Page Builder application, for prerendering pages, and sharp for transforming images, which is part of the File Manager application.
For frontend development, first and foremost, Webiny relies on React - a library for building user interfaces.
On top of it, there are many other libraries that are used, but the most significant might be:
- Apollo GraphQL Client (v2) - for everything GraphQL-related
- React Material Web Components (RMWC) - used in Admin Area React application, wrapped with our
- Emotion - used for additional CSS styling
For everything else, you’re free to bring your own libraries and tools.
Yes. The mentioned tools and libraries create a solid foundation, but feel free to expand it in any way needed.
Can I Use Another UI Library, for ExampleVue.js?
The Admin Area application, and other Webiny applications like Page Builder or Form Builder, are built with React, so when using or expanding these, you will have to use it too.
But if you’re building a brand new app from scratch, and, for example, you just want to interact with the Webiny GraphQL API, you can certainly use another library.
Can I Replace theRMWCThat's Used in the Admin Area React Application?
You can, but it has been shown several times that it’s not that easy. We don’t recommend doing it because, essentially, you’d be recreating everything from scratch. If you still want to try, send us a message, we might be able to help.