Project Configuration: Dev, Test, Build

Babel

Out of the box Redwood configures Babel so that you can write modern JavaScript and TypeScript without needing to worry about transpilation at all. GraphQL tags, JSX, SVG imports—all of it's handled for you.

For those well-versed in Babel config, you can find Redwood's in @redwoodjs/internal.

Configuring Babel

For most projects, you won't need to configure Babel at all, but if you need to you can configure each side (web, api) individually using side-specific babel.config.js files.

Heads up

.babelrc{.js} files are ignored. You have to put your custom config in the appropriate side's babel.config.js: web/babel.config.js for web and api/babel.config.js for api.

Let's go over an example.

Example: Adding Emotion

Let's say we want to add the styling library emotion, which requires adding a Babel plugin.

1. Create a babel.config.js file in web:

touch web/babel.config.js

2. Add the @emotion/babel-plugin as a dependency:

yarn workspace web add --dev @emotion/babel-plugin

3. Add the plugin to web/babel.config.js:

web/babel.config.js

module.exports = {
  plugins: ["@emotion"] // 👈 add the emotion plugin
}

// ℹ️ Notice how we don't need the `extends` property

That's it! Now your custom web-side Babel config will be merged with Redwood's.

Jest

Redwood uses Jest for testing. Let's take a peek at how it's all configured.

At the root of your project is jest.config.js. It should look like this:

jest.config.js

module.exports = {
  rootDir: '.',
  projects: ['<rootDir>/{*,!(node_modules)/**/}/jest.config.js'],
}

This just tells Jest that the actual config files sit in each side, allowing Jest to pick up the individual settings for each. rootDir also makes sure that if you're running Jest with the --collectCoverage flag, it'll produce the report in the root directory.

Web Jest Config

The web side's configuration sits in ./web/jest.config.js

const config = {
  rootDir: '../',
  preset: '@redwoodjs/testing/config/jest/web',
  // ☝️ load the built-in Redwood Jest configuration
}

module.exports = config

You can always see Redwood's latest configuration templates in the create-redwood-app package.

The preset includes all the setup required to test everything that's going on in web: rendering React components and transforming JSX, automatically mocking Cells, transpiling with Babel, mocking the Router and the GraphQL client—the list goes on! You can find all the details in the source.

Api Side Config

The api side is configured similarly, with the configuration sitting in ./api/jest.config.js. But the api preset is slightly different in that:

• it's configured to run tests serially (because Scenarios seed your test database)
• it has setup code to make sure your database is 1) seeded before running tests 2) reset between Scenarios

You can find all the details in the source.

GraphQL Codegen

Redwood uses GraphQL Code Generator to generate types for your GraphQL queries and mutations.

While the defaults are configured so that things JustWork™️, you can customize them by adding a ./codegen.yml file to the root of your project. Your custom settings will be merged with the built-in ones.

If you're curious about the built-in settings, they can be found here in the Redwood source. Look for the generateTypeDefGraphQLWeb and generateTypeDefGraphQLApi functions.

For example, adding this codegen.yml to the root of your project will transform all the generated types to UPPERCASE:

# ./codegen.yml

config:
  namingConvention:
    typeNames: change-case-all#upperCase

For completeness, here's the docs on configuring GraphQL Code Generator. Note that we currently only support the root level config option.

Debugger configuration

The yarn rw dev command is configured by default to launch a debugger on the port 18911, your Redwood app also ships with default configuration to attach a debugger from VSCode.

Simply run your dev server, then attach the debugger from the "run and debug" panel. Quick demo below:

ℹ️ Tip: Can't see the "Attach debugger" configuration? In VSCode

You can grab the latest launch.json from the Redwood template here. Copy the contents into your project's .vscode/launch.json

Customizing the debug port

You can choose to use a different debug port in one of two ways:

a) Using the redwood.toml

Add/change the debugPort under your api settings

redwood.toml

[web]
  # .
  # .
[api]
  port = 8911
  debugPort = 18911 # 👈 change me!

If you set it to false, no debug port will be exposed. The debugPort is only ever used during development when running yarn rw dev

b) Pass a flag to rw dev command

You can also pass a flag when you launch your dev servers, for example:

yarn rw dev --debugPort 75028

The flag passed in the CLI will always take precedence over your setting in the redwood.toml

Just remember to also change the port you are attaching to in your ./vscode/launch.json