What you’ll learn
  • what tools and libraries are included in every Webiny project
Tools and LibrariesTools and Libraries
(click to enlarge)

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).

Toolchain
anchor

Languages and Runtimes
anchor

In terms of languages, Webiny prioritizes TypeScript (v4) . Only in a few cases, like for example configuration files, you will encounter pure JavaScript.

In terms of runtimes, for backend development, Node.js is used. Version 14 is the minimum required version.

Package Manager
anchor

From version 5, every Webiny project is initialized using yarn 2 , with the workspaces feature enabled. This is necessary because Webiny projects are using the monorepo organization.

Static Code Analysis
anchor

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

Testing
anchor

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.

Building Code
anchor

For all code building needs, every Webiny project comes with the gold standard tools:

  • Babel - transpiles next-gen code into backwards compatible version of JavaScript
  • Webpack - performs code bundling and optimization

Both tools are used in frontend and backend development.

Deployment
anchor

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.

You don’t have to install Pulumi by yourself. Webiny automatically downloads necessary binaries for you, and exposes common commands via the Webiny CLI.

To learn more about Pulumi, visit our IaC with Pulumi key topic.

Backend Development
anchor

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 @webiny/api-elasticsearch package.

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.

Frontend Development
anchor

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:

For everything else, you’re free to bring your own libraries and tools.

FAQ
anchor

Can I Bring My Own Tools and Libraries?
anchor

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 Example Vue.js ?
anchor

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 the RMWC That's Used in the Admin Area React Application?
anchor

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.