Giter VIP home page Giter VIP logo

testing-mono-repo's Introduction

FVST Monorepo

The FVST Monorepo is a monorepository project based on Turborepo. You can read more about Turborepo here.

The core applications are based on NestJS for the backend and NextJS for the frontend. For the backend demo application we show both REST and GraphQL implementations for constructing and communicating with the front end. Our GraphQL implementation is based on Apollo, and we use Federation to join different services and their respective sub-graphs together.

Folder structure

The root of the Monorepo contains the turborepo configuration files, and the main package.json which defines the directories and scripts used in the Monorepo. The directories set up in the template are following this structural logic.

Directory What goes inside of it
apps All backend and frontend apps
packages Here we keep code that we want to re-use across apps
tooling Here we have all the configuration code for all the tooling we use inside the monorepository

NPM Scripts

Command Description
npm run lint Runs prettier, eslint and tsc (checks types)
npm run format Runs prettier and eslint --fix
npm run dev Starts the dev environment for all apps
npm run build Builds all the apps and packages
npm run test Runs the test suite
npm run prepare Prepares Husky in the repository

Set up

The application scripts are set up in package.json with additional Turborepo related addons declared in turbo.json. As such, commands can be run both inside separate applications and from the root directory. If run from the application directory, then it affects only the application and when run from the root, it will affect all applications that have the script with the same name in their definitions.

By default, all npm scripts in the root run the respective turbo scripts which run all application scripts.

To start, install all npm packages with npm install from the root directory. Run docker compose up to run the required Postgres/Redis instances.

Next go to each application in the /apps directory and copy their respective .env.example files into .env files.

Note that NextJS uses both .env and .env.local as the files it checks for environment variables. It is better to use .env.local as that is the first preferred location for NextJS to look.

To run all applications, just run npm run dev and that will start all the applications. You can also run each application separately if you navigate into the directory of the application and run the command directly from there.

Authentication

Go to https://clerk.com/ and:

  • Register an account
  • Open their dashboard
  • Add a new application
  • Go to JWT Templates and add a new Blank template
    • Under Claims add { "userId": "{{user.id}}" }
    • The Issuer field value goes under process.env.CLERK_ISSUER
    • The JWKS Endpoint field value goes under process.env.CLERK_JWSK_URL

Troubleshooting

When adding new applications/tooling/packages, changing their directory names or moving them, npm can get confused on where the package itself is located. To remedy these situations it is required sometime after these actions to delete all the node_modules directories as well as the package-lock.json file in the root of the monorepository.

After that, run npm install at the root of the mono repository and an updated package-lock.json file will be generated representing the new Monorepo structure.

testing-mono-repo's People

Contributors

peeter-tomberg avatar

Watchers

 avatar James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.