Relay setup automation for CRA, Next.js and Vite

Overview

create-relay-app

Easy configuration of Relay.js for existing projects

Latest version published to npm npm downloads per month Project license

Showcase

Motivation

Setting up Relay can be quite time consuming, since there are many setup steps that might differ depending on the toolchain you use.

The goal of this project is to automate the setup process as much as possible and give you a fast and consistent configuration experience across the most popular React toolchains.

Contrary to many existing tools that aim to solve similiar use cases, this project isn't simply scaffolding a pre-configured boilerplate. We actually analyze your existing code and only insert the necessary Relay configuration pieces.

Supported toolchains

create-relay-app supports:

Usage

  1. Scaffold a new project using the toolchain of your choice (as long as it's supported)
    • Next.js: yarn create next-app --typescript
    • Vite.js: yarn create vite --template react-ts
    • Create React App: yarn create react-app <new-project-directory> --template typescript
  2. If you are inside a Git repository, ensure your working directory is clean, by commiting or discarding any changes.
  3. Run the script inside of the scaffolded directory:
npm/yarn/pnpm create @tobiastengler/relay-app@latest
  1. Follow the displayed Next steps to complete the setup (You can also find them here)

Note: We are working on getting the create-relay-app name!

This will prompt you for a bunch of questions around your project setup. If you do not want to specify these options interactively, you can also specify them through the CLI arguments. Passing -y will infer all arguments based on your project.

Comments
  • App creation fails if yarn isn't installed, even if yarn isn't selected or used for running create-relay-app

    App creation fails if yarn isn't installed, even if yarn isn't selected or used for running create-relay-app

    Here's the error log:

    Command "npm install --save-exact --save-dev relay-compiler@latest @types/react-relay@latest @types/relay-runtime@latest babel-plugin-relay@latest vite-plugin-relay@https://github.com/tobias-tengler/vite-plugin-relay#tte/fix-plugin" failed
    
    npm ERR! code 127
    npm ERR! git dep preparation failed
    npm ERR! command /home/dev/.nvm/versions/node/v16.16.0/bin/node /home/dev/.nvm/versions/node/v16.16.0/lib/node_modules/npm/bin/npm-cli.js install --force --cache=/home/dev/.npm --prefer-offline=false --prefer-online=false --offline=false --no-progress --no-save --no-audit --include=dev --include=peer --include=optional --no-package-lock-only --no-dry-run
    npm ERR! > [email protected] prepare
    npm ERR! > husky install && yarn build
    npm ERR! npm WARN using --force Recommended protections disabled.
    npm ERR! fatal: not a git repository (or any of the parent directories): .git
    npm ERR! sh: line 1: yarn: command not found
    npm ERR! npm ERR! code 127
    npm ERR! npm ERR! path /home/dev/.npm/_cacache/tmp/git-cloneUKSqXM
    npm ERR! npm ERR! command failed
    npm ERR! npm ERR! command sh -c husky install && yarn build
    npm ERR! 
    npm ERR! npm ERR! A complete log of this run can be found in:
    npm ERR! npm ERR!     /home/dev/.npm/_logs/2022-09-07T18_54_35_818Z-debug-0.log
    
    npm ERR! A complete log of this run can be found in:
    npm ERR!     /home/dev/.npm/_logs/2022-09-07T18_54_31_413Z-debug-0.log
    

    Seems like probably the command sh -c husky install && yarn build is making the whole thing fail.

    Looking at the README, the first step is only using yarn:

    1. Scaffold a new project using the toolchain of your choice (as long as it's supported)
      • Next.js: yarn create next-app --typescript
      • Vite.js: yarn create vite --template react-ts
      • Create React App: yarn create react-app <new-project-directory> --template typescript

    But the 3rd steps shows that any package manager can be used:

    1. Run the script inside of the scaffolded directory:
    npm/yarn/pnpm create @tobiastengler/relay-app@latest
    

    I think there maybe should be a clearer note in the docs that a yarn installation is also required for running the command in the 3rd step.

    opened by expesh 6
  • Add Relay plugin configuration: Unexpected error

    Add Relay plugin configuration: Unexpected error

    After setting up next and running npx @tobiastengler/create-relay-app and selecting the next option, this output appears:

    test [main] % npx @tobiastengler/create-relay-app
    ? Select the toolchain your project is using Next.js
    ? Select the language of your project Typescript
    ? Select the path to your GraphQL schema file ./src/schema.graphql
    ? Select the package manager you wish to use to install packages npm
    
    ✔ Add Relay dependencies: react-relay
    ✔ Add Relay devDependencies: relay-compiler @types/react-relay
    ✔ Add Relay configuration to package.json
    ✖ Add Relay plugin configuration   Unexpected error
    
    ### NEXT STEPS ###
    1. Replace ./src/schema.graphql with your own GraphQL schema file.
    2. Replace the HOST variable in the RelayEnvironment.ts file.
    

    Not sure why the last step yields Unexpected error.

    opened by damassi 3
  • Friendlier error message on missing package.json

    Friendlier error message on missing package.json

    Just saw your comment here and wanted to take for a spin! I too agree that Relay has some onboarding issues.

    One issue I just encountered was after running npx @tobiastengler/create-relay-app and then getting the error Error: package.json file is missing. I initially thought that this would bootstrap whatever framework the user chose before setting up the Relay bits (eg, npx create-next-app), so seeing that issue was a bit confusing. Maybe something like

    Error: package.json file is missing. Did you remember to setup <create-react-app|next|vite> before running this command?
    

    Would fix the issue.

    opened by damassi 3
  • Add option to integrate with vite-plugin-relay-lite

    Add option to integrate with vite-plugin-relay-lite

    vite-plugin-relay-lite has some advantages like providing smooth integration with the Relay compiler, and transforming the code really fast. While I think it shouldn't be recommended in general (since it doesn't actually parse AST, which makes it break on some cases), I believe it's worth adding an option for it.

    opened by XiNiHa 1
  • Request ownership transfer of create-relay-app package

    Request ownership transfer of create-relay-app package

    The create-relay-app package is currently taken by https://www.npmjs.com/package/create-relay-app

    The package hasn't been updated in 5 years and seems to have no active users.

    Therefore I think it's reasonable to ask, if the owner of the package can transfer ownership over the package to us, so we can publish this package under its name.

    opened by tobias-tengler 1
Releases(v2.0.0)
  • v2.0.0(Dec 18, 2022)

    Changes

    • Script now infers project details per default. Interactive mode needs to be requested via --interactive explicitly
    • Put script arguments into README.md

    Full Changelog: https://github.com/tobias-tengler/create-relay-app/compare/v1.0.0...v2.0.0

    Source code(tar.gz)
    Source code(zip)
  • v1.0.0(Sep 10, 2022)

    Changes

    • Fix Next.js 12.3 Typescript issue, by passing RelayPageProps to AppProps<T> in _app component
    • Prevent initialRecords regenerating Relay environment upon new page visit
    • Introduce new typescript helpers like the afformentioned RelayPageProps, and GetRelayServerSideProps as well as GetRelayStaticProps
    • Update documentation to reflect changes: updated documentation

    Full Changelog: https://github.com/tobias-tengler/create-relay-app/compare/v0.0.7...v1.0.0

    Source code(tar.gz)
    Source code(zip)
  • v0.0.7(Sep 10, 2022)

    Changes

    • Re-add vite-plugin-relay now that it supports Vite 3

    Problems

    I'm aware of a Typescript issue with Next.js 12.3. I'm working on resolving it for v1.0.0.

    Full Changelog: https://github.com/tobias-tengler/create-relay-app/compare/v0.0.6...v0.0.7

    Source code(tar.gz)
    Source code(zip)
  • v0.0.6(Sep 8, 2022)

  • v0.0.5(Aug 28, 2022)

  • v0.0.4(Aug 19, 2022)

    Changes

    • Add integration tests using Playwright to ensure that the tool is compatible with scaffolded projects produced by CRA, Vite and Next.js.
    • Support Next.js server side rending
    • Merge configuration in next.config.js instead of bailing
    • Project can now only be run from the root directory of a project
    • Lots of internal refactoring to make it more testable

    Full Changelog: https://github.com/tobias-tengler/create-relay-app/compare/v0.0.3...v0.0.4

    Source code(tar.gz)
    Source code(zip)
  • v0.0.3(Aug 14, 2022)

    Changes

    • Support Create React App Typescript and Javascript projects
    • Provide guidance on babel-plugin-relay setup for CRA: Link
    • Add reminder to use the babel-plugin-relay macro

    Full Changelog: https://github.com/tobias-tengler/create-relay-app/compare/v0.0.2...v0.0.3

    Source code(tar.gz)
    Source code(zip)
  • v0.0.2(Aug 14, 2022)

    Changes

    • Add relay-compiler --validate to "build" script in package.json, if present
    • existing "relay" configuration in package.json is merged with new configuration
    • Consolidate CLI argument / prompt handling
    • Speed up checking for installed dependencies
    • Add "eagerEsModules": true to relay-compiler configuration for Vite, to generate correct artifacts also for Javascript
    • Display default values that were chosen when running with --yes

    Full Changelog: https://github.com/tobias-tengler/create-relay-app/compare/v0.0.1...v0.0.2

    Source code(tar.gz)
    Source code(zip)
  • v0.0.1(Aug 14, 2022)

    ⚠️ This package is not stable yet! I'm just publishing it, so you don't have to remember to append @experimental. I'll consider it stable, once a v1.0.0 is released. In the meantime feel free to try it out and give feedback! :)

    New features

    • Support configuration of Next.js Javascript and Typescript projects
    • Support configuration of Vite.js Javascript and Typescript projects
      • We are installing the vite-plugin-relay package from an open PR at the moment, until it's published and the latest Vite version is officially supported.
    • Support configuration of Create React App Javascript and Typescript projects
      • The babel-plugin-relay transform is currently not being setup. This will be added in the next version!

    Learn how to use it

    Full Changelog: https://github.com/tobias-tengler/create-relay-app/commits/v0.0.1

    Source code(tar.gz)
    Source code(zip)
Owner
Tobias Tengler
Tobias Tengler
Vite plugin for more convenient Relay experience.

vite-plugin-relay Vite plugin for more convenient Relay experience. What this plugin does for you: Generates artifacts on code changes Transform codes

Hyeseong Kim 13 Nov 7, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
A new generation GUI automation framework for Web and Desktop Application Testing and Automation.

Clicknium-docs Clicknium is a new generation GUI automation framework for all types of applications. It provides easy and smooth developer experience

null 109 Dec 19, 2022
Fullstack twitter clone developed with GraphQL and Relay

Fullstack twitter clone developed with GraphQL and Relay

null 31 Dec 1, 2022
📟🤖 PagerDuty Discord Webhook Relay

PagerDuty Webhook Relay PagerDuty doesn't natively have Discord webhooks, so we made this CloudFlare worker to relay them to Discord. We use Uptime Ku

Hop 10 Aug 2, 2022
Create a new project with Next.js, TypeScript, Eslint, Prettier in just 1 second and you don't need to setup anything.

Next + TypeScript + Eslint + Prettier Template ?? Create a new project with Next.js, TypeScript, Eslint, Prettier in just 1 second and you don't need

Hung Minh 11 Oct 2, 2022
This project is a boilerplate for Next and TypeScript projects. This template was built with Vite, TypeScript and Stitches.

Awesome Template Stitches — NextJS, TypeScript, Stitches and Design Tokens Summary About this template Avaliale scripts Other scripts available Main t

Diego Silva 14 Dec 29, 2022
This repository contains a basic example on how to set up and run test automation jobs with CircleCI and report results to Testmo.

CircleCI test automation example This repository contains a basic example on how to set up and run test automation jobs with CircleCI and report resul

Testmo 2 Dec 23, 2021
Service Installer for VMware Tanzu is a one-click automation solution that enables VMware field engineers to easily and rapidly install, configure, and operate VMware Tanzu services across a variety of cloud infrastructures.

Service Installer for VMware Tanzu Service Installer for VMware Tanzu seeks to provide a one-click automation solution to enable our VMware engineers

VMware Tanzu 42 Dec 1, 2022
Android ROM device support and bringup tool, designed for maximum automation and speed.

adevtool Android ROM device support and bringup tool, designed for maximum automation and speed. Features This tool automates the following tasks for

Danny Lin 186 Dec 21, 2022
A demo for E2E build piplelines in Design Systems using monorepo's and automation :zap:.

Design System Pipelines demo What is it? A working demonstration for end-to-end build piplelines in Design Systems using Primer Primitives, Primer CSS

Rez 7 Oct 20, 2022
BI, API and Automation layer for your Engineering Operations data

Faros Community Edition Faros Community Edition (CE) is an open-source engineering operations platform that connects the dots between all your operati

Faros AI 272 Dec 23, 2022
Campus hiring and training automation platform.

⚡ Supported Use Cases Student register themselves on the portal Student fills details in their academic profile Student opt for campus hiring / intern

null 7 Aug 24, 2022
Minimalistic, opinionated, and predictable release automation tool.

Release Minimalistic, opinionated, and predictable release automation tool. General idea Think Prettier but for automated releases: minimalistic, opin

Open Source: JavaScript 173 Dec 18, 2022
Boilerplate project to run MOBILE Test Automation with WebdriverIO v7, Mocha, Appium, Allure reporting and Momentum Suite cloud device farm support

WebdriverIO Mocha Appium Momentumsuite WebdriverIO Integration with local or Momentum Suite real mobile farm devices Supports Native or Hybrid Android

Momentum Suite 21 Dec 5, 2022
An unofficial companion tool created for use alongside PhotoPrism to enable API endpoints and automation.

PhotoPrism Helper PhotoPrism Helper is an unofficial companion tool created for use alongside PhotoPrism. This project isn't associated with the Photo

Ryan Miller 9 Dec 25, 2022
ChainJet is a workflow automation platform specialized in blockchain and cloud infrastructure.

A workflow automation platform specialized on blockchain, with more than 300 integrations. Description ChainJet is a workflow automation platform spec

ChainJet 38 Dec 24, 2022