DEV Community: Sven A

Webiny 5.0 Release

Sven A — Fri, 12 Mar 2021 13:22:17 +0000

It took us ~6 months, 179 calls with users and 3676 commits to ship this release. It is a release where all the changes are 100% driven by community feedback.

Here are the main highlights:

🚀 Drastic performance improvements (benchmarks included)
🔐 Default VPC and private VPC deployment are now supported
🗄 DynamoDB and Elasticsearch support
🏗 Page Builder overhaul - way faster and more stable than before
💻 Improved developer experience
🧱 IaC implementation via Pulumi

Check out the blog post for full details.

To get started with Webiny 5.0 (full tutorial)

In Other News

Webiny is proud to announce that we have received funding from Y Combinator and have joined their latest batch of companies.

Serverless Headless CMS by Webiny (Open-Source)

Sven A — Fri, 05 Jun 2020 09:05:56 +0000

So why you need another Headless CMS? For a change, with this one you won't worry about scaling, installing, configuring and managing infrastructure. On top of it, Webiny cuts your cloud hosting bill by anywhere between 60% and 80%! You will stop paying for resources you do not use. Now, who doesn't want all that?!

It's the first Headless CMS which runs on top of AWS serverless infrastructure. It's open-source and you host it on your own AWS cloud. You can use your favourite frontend development library, like GatsbyJs, Next.js and others to build your sites.

Webiny is live on Product Hunt and would appreciate if you would show us your support. That's what keeps us going!

What's the back story?

When we launched Webiny Page Builder over a year ago we took the early bet on serverless. Our vision is that serverless is the future of web development. To get to that world, we open-sourced Webiny in October of 2019 and saw amazing feedback from our community. Our project is now on over 2000 stars on Github. That would not be possible without all the amazing contributors and the community.

Now in 2020 we decided to launch our flag-ship product, Webiny Serverless Headless CMS. And like all other Webiny products, it's 100% free and open-source. You host it on your own AWS cloud (support for other clouds is coming at a later stage).

Some of its features:
✅ Powerful content modelling UI
✅ GraphQL API
✅ Multi-language support
✅ 100% Javascript
✅ Microservices architecture
✅ Support for multiple environments and aliases
... and much more. For a full set of features check out the product landing page

How do we differ from Strapi: Strapi runs on the "traditional" infrastructure, such as virtual machines and similar. That infrastructure is hard to maintain and scale without hiring a big team of expert engineers. Since Webiny runs on serverless infrastructure such as AWS Lambda, it can scale to handle millions of requests out of the box. No need for any performance, devops or network engineers. The other beautiful thing is that with serverless you pay per request. No need to heavily over-provision your infrastructure ahead of peak demand events, such as Black Friday and similar. Stop paying for stuff you don't use*.

How do we differ from Contentful and GraphCMS: Webiny is open-source and you host it yourself. This means you own and have full control over your data. On top of that, you can build custom apps and change any part of the system. Unlike Contentful or GraphCMS where they are a black-box SaaS product which you can't modify.

How do we differ from Netlify CMS: Netlify CMS is a great solution but it lacks many of the features you'll find in Webiny. Netlify CMS caters for more simple sites. For example, a feature like content modeling is done code and configuration files. There is no multi-language support, no environments and aliases. Managing users and permissions is very rudimentary.

Show us some love ❤️

I hope you give Webiny a try. Let me know what you think of it. The whole team really put a lot of effort into building it.

The team would really appreciate if you would show us your support by either contributing or starring(★) our repository. This is what keeps us going!

Please tweet and share this news if you liked what we had to share.

Serverless Side Render

Sven A — Fri, 07 Feb 2020 15:42:48 +0000

This is a shortened version of a very long and detailed article published here. https://blog.webiny.com/serverless-side-rendering-e1c0924b8da1

The article talks about our experience of implementing SSR mechanism for Webiny Serverless CMS. Many of our findings are transferable to other solutions so it will hopefully provide you with some useful insight.

In short (and believe me, this is short):

single page applications (SPAs) are cool but unfortunately, have bad SEO support
learn about different approaches of rendering on the web by checking out this Google article, and choose the approach that works best for your use case
for the Webiny Page Builder app, we decided to try “Prerendering on-demand” (using chrome-aws-lambda) and “SSR with (re)hydration”
implementing both of these approaches in the AWS cloud can be achieved with just a couple of serverless services — S3, Lambda, API Gateway, and CloudFront
prerendering on-demand works and it’s a good approach if the initial loading screen (shown while the app is initializing) is not an issue in terms of UX, and SEO is your only concern, otherwise use SSR with (re)hydration
allocate more RAM (1600MB+ ) to the Lambda function that will actually be doing the pre-rendering, and a minimum amount of RAM to the one that will be just serving static files (128MB or 256MB)
although we didn’t try it, you would probably need to implement some form of caching of the prerendered content, so that you get a better SEO results by returning the initial HTML faster
when implementing SSR with (re)hydration, allocate more RAM to the Lambda function that will actually be generating the SSR HTML
in general, SSR is a resource-intensive task, which will prevent you from serving your website fast enough, so you will most likely need to implement some kind of caching
we used CloudFront CDN to cache SSR HTML and depending on the app you’re building, choose between short and long-lived cache TTLs
if going with the latter, know that you will need to do cache invalidation which can get tricky very quickly
do cache-invalidation selectively, or in other words, if possible, invalidate cache only for pages that actually require it — this may save you significant amount money along the way (cache invalidation requests are charged by CloudFront)
if the content is changing very frequently, use shorter TTLs because it’s more effective
the good news is that, with Webiny, this is all handled and maintained for you, feel free to check us out if this sounds interesting 🚀 🙂

I hope you found this useful - make sure to check out the full article.

Form Builder by Webiny Serverless CMS

Sven A — Thu, 05 Dec 2019 09:32:39 +0000

We at Webiny believe that serverless will be the future of development, but there is still much work to be done on the tooling, processes and application side. For that reason, we release our apps and tools under the open-source license.

A crucial part of most websites are forms. Be that simple contact forms, or more complex lead generation forms. Businesses rely on these forms to generate revenue, grow their user base and even handle payments. Forms are everywhere.

Webiny Form Builder

Like all other Webiny CMS apps, the Form Builder is designed to be deployed into a serverless environment. At the moment Webiny supports AWS, but the support for other cloud vendors is coming in 2020.

Features

Webiny Form Builder features a Drag&Drop editor:

It supports themes and customizations:

You can serve forms in multiple languages:

There is so much more that the Form Builder offers. Developers can expand and change its functionality via plugins, there is a Webhooks integration as well as ReCAPTCHA and so on.

Live on Product Hunt

Today, on our launch day, the whole Webiny team is live on Product Hunt. We are happy to answer any questions there, and we would appreciate if you would show us your support:

https://www.producthunt.com/posts/form-builder-by-webiny

Get Started

Here are the basic resources to get yourself familiarized with Webiny Form Builder:

Product page: https://www.webiny.com/serverless-app/form-builder
Documentation: https://docs.webiny.com/docs/webiny-apps/form-builder/introduction
GitHub: https://github.com/webiny/webiny-js

Creating and deploying a website using Webiny Serverless CMS ⚡️ + Free SWAG 👚👕

Sven A — Mon, 04 Nov 2019 14:06:49 +0000

| Note: This article is now slightly out of date. Please follow this article: https://docs.webiny.com/docs/get-started/quick-start

To prep for this tutorial there are a few prerequisites you'll need to have:

NodeJs - In case you don't have it installed, follow this tutorial
Yarn - Although it's a replacement for NPM, yarn comes with some added functionality, which is required to run Webiny.
MongoDB database - I would recommend using MongoDB Atlas free tier
AWS User credentials - Don't have one? Here is how to set it up

About the tutorial

In this tutorial, I'll walk you through steps of:

Installing and configuring Webiny
Deploying Webiny to your own AWS cloud
Getting back a CDN URL to access your site
Creating your first user
Creating your first page

About Webiny

Webiny is an open-source CMS (webiny/webiny-js) created for serverless web development. It comes with several ready-made apps like Page Builder and a File Manager. There is a GraphQL API with integrated security and an AWS Cognito user pool.

You can use Webiny to build websites, applications, APIs and microservices. All that inside a serverless environment. The Serverless Framework handles the deployment operation.

1. Installing and configuring Webiny

First, make sure that you've got all the prerequisites in place. They are at the top of the article.

Installing Webiny is a simple matter of running the following command in your terminal:

npm -g install @webiny/cli

Once the package is installed you can create your new project.

webiny create my-project
//note the link to the SWAG page 😉
cd my-project

This will create the full project structure, including any dependencies and configuration files you will need.

Before we can deploy our project, there is only one more thing we need to configure. Open api/.env.json file and change the value of MONGODB_SERVER variable to match your database connection string.

In case you are using MongoDB Atlas, just click on the Connect button in your cluster and select the application connection option. You will get the connection URL back.

2. Deploying Webiny to AWS

Webiny uses 2 commands for deployments, one deploys the APIs and the other one deploys the React apps. Both commands need to be run from the root of your project.

Let's say we are deploying the website into our dev environment. To deploy the APIs run the following command:

webiny deploy-api --env=dev

The first deployment might take 3-4 minutes to complete. The operation is deploying dozen lambda functions, several API Gateways, an S3 bucket, and creating a new CloudFront distribution.

After the deployment is done, you will see a screen with the URL to your API. It ends with /graphql.

Note: On the first deployment the URL will not work for about ~10 minutes. This is because CloudFront takes its sweet time to get created.

While you are waiting for the CloudFront URL to start working, you can trigger the deployment of the React apps:

webiny deploy-apps --env=dev

The same thing, in the end you will get a CDN URL back.

4. Finishing the installation

Once the URL starts working, point your browser to {cdn_url}/admin to finish the installation. This will trigger an install process. In the first step, you will create your admin user. After that just follow all the steps until the end.

5. Creating your first page

By default, Webiny will point you to a list of pages.

Click the big green button in the lower-left part of the screen to create a new page, this will open the page editor.

This video provides a good overview of how to use the page editor:

Done

Hope you have enjoyed this tutorial and learned a thing or two. In case you have any questions or comments, please post them below.

If you liked Webiny and wish to contribute to the project, we would love to have you. Join us on our Github.

webiny / webiny-js

Open-source serverless enterprise CMS. Includes a headless CMS, page builder, form builder, and file manager. Easy to customize and expand. Deploys to AWS.

Open-Source Serverless Enterprise CMS

Website | Documentation | Community Slack | Forum | Twitter

product-video-2022.mp4

Webiny Serverless CMS includes:

1️⃣ Page Builder - Drag&drop page editor. Pages are prerendered automatically and cached on CloudFront for lightning-fast delivery.

2️⃣ Headless CMS - Headless CMS with a GraphQL API. Build APIs and content models through a UI. It includes content revisions, localization, and fine-grain permission control.

3️⃣ File Manager - Upload files images. Search and organize your assets. It includes a built-in image editor for basic image manipulations.

4️⃣ Form Builder - Build forms with a drag&drop editor. Insert forms through Page Builder into your pages. It has webhook support and ReCaptcha integration.

All Webiny apps can be customized easily to fully fit an enterprise publishing workflow and integrate with leading identity providers like OKTA and Cognito.

🏁 Quick installation guide

Create a Webiny project:

npx create-webiny-project my-new-project

Deploy to your AWS…

View on GitHub

Webiny - Serverless CMS

Sven A — Mon, 18 Mar 2019 12:31:13 +0000

Check it out - https://www.webiny.com/

Webiny presents a milestone where we as a team and company are transitioning from a standard web agency, into a product business. In the past years we build few hundred websites, saas products and platforms for many different clients.

Over this time we learned what it takes to build, maintain, grow, update and scale such applications, and we poured all that knowledge into building this system.

Some of the features of Webiny CMS:

open source (MIT license)
optimized to run inside a serverless environment (like AWS Lambda)
frontend is built with React and Google Material Design (CRA v2)
backend is powered by Node and MongoDb
GraphQL API layer (Apollo Client)
ready made visual page builder
image editor
documentation and tutorials already available

On top of the CMS, we are providing a highly-available serverless environment to run your Webiny instances.

Feel free to ask us any questions below the post, we would love to hear your feedback.