Redwood v0.36 🚀

Announcements Releases and Upgrade Guides
1

v0.36 Highlights :tada:

Current version is v0.36.4

This is a minor version release with major additions and improvements to Redwood. A massive “Thank you!” goes out to every individual that contributed code, updated docs, submitted issues, and participated in the amazing community. Well done, Team Redwood!! :rocket:

:warning: This release has breaking changes. Please follow the Code modifications section to upgrade your app

:tv: Watch the recorded Livestream : Highlights discussion + Upgrade walkthrough

:racing_car: Performance, Stability, and SEO

With version v0.36, you’ll experience much snappier performance and overall improved stability. There’s almost too many improvements and upgrades to list here:

  • A overhauled Redwood Dev Server when running yarn redwood dev
  • and an improved API two-step build including ESBuild
  • Webpack v5 and Webpack-dev-server v4
  • Jest v27
  • Storybook v6.3 (supporting Cypress E2E tests) using Webpack v5

Built-in Page SEO Title and Description
PR #3026 adds Helmet configuration by default on generated Pages, providing better SEO out of the box.

:test_tube: Built-in Testing for Functions and Webhooks

Testing serverless functions and webhooks can be difficult and time-consuming because you have to construct the event and context information that the function handler needs. As of this version, Redwood includes api testing utilities to make this a breeze!

:closed_lock_with_key: Redwood Auth updates + new Clerk provider

There’s a new loginHandler() for dbAuth. Magic.link and Firebase updates. And added Supabase providers for Twitch and SMS one-time-passwords with Twilio.

And Redwood Auth now has a new provider, supporting Clerk authentication:

:woman_scientist: Contributing to Redwood made (even) easier

In our never ending quest :dragon::person_fencing: for simple Redwood Framework local development, there’s a new command and workflow via rwfw project:sync. See the updated Contributing Docs.

And thanks to the fine folks from Gitpod, every Redwood PR can now be reviewed via a Cloud-based dev environment. :exploding_head: Simply click on the Gitpod “details” link in any PR. Or just use the syntax https://gitpod.io/#<link to PR or branch>. See #3150 for more details.

:world_map: Navigation

navigate() now gives you greater control over just how the browser’s history is updated. By passing in { replace: true } as a second parameter to navigate(), Redwood will use replaceState instead of pushState behind the scenes. There is also a new back() function exported from the router that does exactly what you think it does :slightly_smiling_face: Related PRs #2212 and #3055

:atom_symbol: Coming in the next version v0.37: migrating the GraphQL Server to Envelop+Helix

Since v0.35, Redwood projects have been able to run a preview version of Envelop+Helix as the GraphQL Server. Now that Envelop has reached GA, and after a lot of amazing progress and feedback, we are excited to annouce that Redwood will fully move to Envelop+Helix in v0.37 (which will replace Apollo Server — Redwood will still continue using Apollo Client). As always, we’ll do our best to make the switch as painless and clear as possible.

You can learn more about this switch and all the Envelop+Helix has in store via the following Forum Post. Additionally, we encourage you to try out the current preview of Envelop+Helix by following the included instructions:

Changelog

No. of unique contributors: 24
No. of PRs: 85

Added

Changed

Fixed

Package Dependencies

View all Dependency Version Upgrades

Breaking :warning:

1. Webpack bumped to v5.x

We’ve taken the leap, and upgraded Webpack to v5 and the Webpack-Dev-Server to v4. If you have any custom Webpack configuration (in ./web/config/webpack.config.js), please make sure all your config and custom plugins have been upgraded to support Webpack 5. The same is true for custom options used with devServer and/or when running yarn redwood dev --forward=... — it’s common to have a dev server configuration that needs a bit of tweaking.

See this Forum post Webpack and Jest v0.36 Upgrade Guide

2. Jest bumped to v27

We’ve migrated the test runner to Jest Circus. For the majority of users, this should be a non-breaking change. In the case you have any custom Jest config or are using custom test environments, this might be one to watch for.

See this Forum post Webpack and Jest v0.36 Upgrade Guide

3. Configuration changes

Very important (but small) changes are required to use this version of Redwood. Please make sure you follow steps 1. and 2. in the “Code Modifications” section.

4. Removed deprecated commands

We’ve removed some of the old deprecated commands e.g. yarn redwood db and yarn redwood generate util

5. dbAuth: New loginHandler()

For projects using dbAuth, there are two breaking changes related to adding a new loginHandler() function and changes to Login/Signup Components. (PR #3111)

See “Code Modifications” below for required changes.

How to Upgrade

Code Modifications

1. Remove babel config from .api side

Option A If you do not have any custom babel plugins on your api side, simply remove.babelrc.js.

rm api/.babelrc.js

Option B If you want to use custom babel plugins on your API side, you can create api/babel.config.js file, but you should not import babel preset from redwood or extend the root babel config.

For more information, see #3187

2. How you set your App’s title has changed

Please remove any code to set your App’s title from ./web/config/webpack.config.js (if you have it).

// ./web/config/webpack.config.js
module.exports = (config, { _env }) => {
-  config.plugins.forEach((plugin) => {
-    if (plugin.constructor.name === 'HtmlWebpackPlugin') {
-      plugin.options.title = 'Redwood App';
-    }
-  });

  return config;
};

Setting the title is now much simpler, by simply setting the title property in your redwood.toml. We recommend you read the following details here and update your project to take advantage of the improved SEO settings.

3. Upgrade Tailwind dependencies and Config

Upgrading Webpack to v5 made it possible to upgrade other Tailwind dependencies. And for projects running yarn redwood setup tailwind for the first time, they’ll see other config improvements (see related PRs #3087 and #3181):

If your project is using Tailwind, changes are not required. However, we recommend you read this Forum post Tailwind v0.36 Upgrade Guide and update dependencies and config for stability and performance improvements.

4. dbAuth: new loginHandler()

Users who have implemented dbAuth since the last release must add a loginHandler() function in their api/src/functions/auth.js. A new instance of DbAuthHandler is created and passed several options. loginHandler() needs to be added to that list.

See this Forum post for details: dbAuth v0.36 Upgrade Guide and Breaking Changes

Upgrade Packages to v0.36.x from v0.35.x

Run the following command within your App’s directory:

yarn redwood upgrade

Upgrading from an earlier version?

Please follow the “how to upgrade” sections for each newer version here :point_right: Releases · redwoodjs/redwood · GitHub, as there may be manual code mods needed for each version.

Upgrading to a version that is not the latest?

The command yarn rw upgrade will always upgrade to the latest (i.e. most recent) Redwood version. If you need to upgrade incrementally to an earlier, specific release, use the --tag option. For example, if you need to upgrade from v0.27.0 to v0.28.4, run the following command:

yarn redwood upgrade --tag 0.28.4

Need help or having trouble upgrading packages?

See this forum topic for manual upgrade instructions and general upgrade help.

Redwood Releases on GitHub

You can see all Redwood release notes and version history on GitHub

8 Likes
2

Incredible work everyone! It’s inspiring to see the continued momentum of the project!

4 Likes
3

Absolutely incredible, wonderful, and fantastic !!

2 Likes
4

Awesome! Looking forward to checking it all out!

1 Like
5

I added a link to the recorded Livestream from today. Check it out!

Recorded Walkthrough

:tv: Watch the recorded Livestream : Highlights discussion + Upgrade walkthrough

1 Like
6

Really completely awesome. The testing improvements for serverless and webhooks rocks, and so does the Gitpod PR review.

Are there any links to background on the move to Envelop+Helix and the why of moving away from Apollo?

7

Are there any links to background on the move to Envelop+Helix and the why of moving away from Apollo?

Glad you asked! We actually have two posts about the migration:

It’s pretty deep in the weeds stuff for anyone not steeped in the world of GraphQL servers and deployment of serverless APIs, but we think it’s a really exciting combination and potentially transformative for the entire framework.

8

Also a good read are The Guild’s posts about their rationale for Envelop:

https://twitter.com/dotansimha/status/1418204383813144584

as Redwood shares many of the same sensibilities.

1 Like
9

I am about to listen to

In this episode, we talk to the founder of The Guild, Uri Goldshtein. We discuss Envelop (a new GraphQL plugin system) as well as other projects The Guild is working on

1 Like
10

^That’s a great pod! We also had Uri on FSJam back in May talking about these subjects as well if anyone is interested. He actually announced Envelop for the first time on the episode.

1 Like
11

Patch Release

v0.36.1

Includes the following fixes:

12

What if I love Apollo Server? Can I be as comfortable and productive with Envelop + Helix? Does it have all the same great features?

13

Just to be clear, there is no change on the web client side – currently this uses Apollo Client by default and you can swap this out.

The change is to the api side and how the request is handled and resolved.

It should - could you name a few that your apps rely on so we can check that it does?

For example, are you using any Apollo Server plugins?

Thanks!

14

Well, I see it supports @defer and graphql-upload - that’s two things I always look for. :slight_smile:

However, in Helix the DSL to create the schema uses the “plain” Graphql tools. I find the way you create typeDefs and resolvers in Apollo Server and the way you can build your schema across Redwood services directory much nicer IMO. But I will look into it further before forming a true opinion.

1 Like
15

Thanks for the update and welcome your thoughts on how we can make for a better DX.

This won’t change at all. The same way you create SDL and use generators and we map the service to a resolver in the past will be the same way moving forward.

We are just changing out the pipeline and including Envelop’s new plugin system.

All this work is to let us support multiple handlers (not only AWS) so we can deploy out to Azure, Google Cloud, Cloudflare, etc easier.

2 Likes
16

Cool, thanks for your answer.

2 Likes
17

I am getting the following message with dev server after upgrade

api | Importing Server Functions... 
gen | pluginHelpers.getCachedDocumentNodeFromSchema is not a function
gen | pluginHelpers.getCachedDocumentNodeFromSchema is not a function
gen | 
gen | Error: Could not generate GraphQL type definitions (web)
gen | 
gen | 163 files generated

I am not able to find out what’s causing this when generating the types.

Could we add more debug information for this? Danny mentioned this could be related to duplicate query names or empty query names but I have no further information on which file has this issue.

18

Does you sdl include any comments like

# my comment

or descriptions like

"""
this field name is for names
"""

If so, there is a bug in graphql-tools that was introduced that isn’t parsing sdl with comments and we’re awaiting a fix to patch.

19

There were comments, but it was all // comment style. But I had removed those and gave it a try, and still no luck :frowning:

20

Patch Release

v0.36.2

Includes the following fixes:

1 Like