jazelle
create-react-app
Our great sponsors
jazelle | create-react-app | |
---|---|---|
7 | 576 | |
97 | 101,893 | |
- | 0.2% | |
6.4 | 1.5 | |
5 months ago | 13 days ago | |
JavaScript | JavaScript | |
MIT License | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
jazelle
-
Advice on migrating from multirepo to monorepo
But we also have teams working full time on monorepo stuff. I wrote tooling myself to bridge some of the gaps in the web ecosystem (e.g. we integrate w/ bazel to compute build graphs), but one still needs to integrate that w/ CI. Our solution uses dynamic pipeline generation, spot instances for elastic compute power, a bunch of crazy optimizations, a test flakiness detection system, a merge queue system (because we have hundreds of commits landing daily and HEAD must be green at all times)... A lot of this has no turn-key open source / commercial offerings and you're gonna need to invest time into integrations w/ the ones that do. Monorepos can be quite a commitment.
-
Turborepo 1.2: High-performance build system for monorepos
Yes, it's possible. At Uber we run a 1000+ package monorepo w/ Bazel and Yarn. Someone else mentioned rules_nodejs if you want to go with the popular option that is more or less in line with the Bazel philosophy[0]. We use a project called jazelle[1] that makes some different trade-offs that lets us do some interesting things like not busting the whole world's cache when lockfile changes, and source code generation (including automatic syncing of BUILD files to package.json)
[0] https://news.ycombinator.com/item?id=30959893
[1] https://github.com/uber-web/jazelle
-
[AskJS] question about your monorepo workflow
I maintain the web monorepo at Uber (a fairly large codebase w/ ~1000 packages). Our monorepo uses a tool I wrote called jazelle that wraps over yarn workspaces and bazel.
-
[AskJS] How should mono repo test status/coverage in CI be handled?
3) Yes, you can have granular smart tests. Again, tooling can help. We use Bazel (I wrote a JS-oriented wrapper on top of it called jazelle), which can compute dependency graphs and only test things that changed. For example, with my tool, you can have a master job call jazelle changes to figure out what projects need to be checked given a git diff, and then we distribute the workload across multiple machines to parallelize tests/lint/bundle size analysis/etc (we can do a full run of several thousand compute hours for ~1000 packages in about 20 wall clock minutes). Other similar tools exist for dep graph computation, e.g. turborepo, and to some extent Rush and yarn workspaces + foreach, which might be sufficient for your scale.
-
From a Single Repo, to Multi-Repos, to Monorepo, to Multi-Monorepo
Nice write-up. I have explored different repo strategies quite a bit myself in the course of a few efforts that I've been involved with. On one, we originally had a monolythic framework and everything the article said about cons is pretty spot on. However, I'll qualify by saying that I think the problems come less because of the nature of monolyths in general and more because of lack of experience with modular design.
We then wrote a new framework using a monorepo approach, with separate packages using Lerna. The problem here was tooling. Dependent builds were not supported and I've had to delete node_modules more times than I'd ever cared to count. The article talks about some github specific problems (namely, the issues list being a hodge-podge of every disparate package). We tried zenhub, it works ok, but it's a hack and it kinda shows. I've seen other projects organize things via tags. Ultimately it comes down to what the team is willing to put up with.
We eventually broke the monorepo out into multi-repos, and while that solved the problem of managing issues, now the problem was that publishing packages + cross-package dependencies meant that development was slower (especially with code reviews, blocking CI tests, etc).
Back to a monorepo using Rush.js (and later Bazel). Rush had similar limitations as Lerna (in particular, no support for dependent tests) and we ditched it soon afterwards. Bazel has a lot of features, but it takes some investment to get the most out of it. I wrote a tool to wrap over it[0] and setup things to meet our requirements.
We tried the "multi-monorepo" approach at one point (really, this is just git submodules), and didn't get very good results. The commands that you need to run are draconian and having to remember to sync things manually all the time is prone to errors. What's worse is that since you're dealing with physically separate repos, you're back to not having good ways to do atomic integration tests across package boundaries. To be fair, I've seen projects use the submodules approach[1] and it could work depending on how stable your APIs are, but for corporate requirements, where things are always in flux, it didn't work out well.
Which brings me to another effort I was involved with more recently: moving all our multi-repo services into a monorepo. The main rationale here is somewhat related to another reason submodules don't really fly: there's a ton of packages being, a lot of stakeholders with various degrees of commit frequency, and reconciling security updates with version drift is a b*tch.
For this effort we also invested into using Bazel. One of the strengths of this tool is how you can specify dependent tasks, for example "if I touch X file, only run the tests that are relevant". This is a big deal, because at 600+ packages, a full CI run consumes dozens of hours worth of compute time. The problem with monorepos comes largely from the sheer scale: bumping something to the next major version requires codemods, and there's always someone doing some crazy thing you never anticipated.
With that said, monorepos are not a panacea. A project from a sibling team is a components library and it uses a single repo approach. This means a single version to manage for the entire set of components. You may object that things are getting bumped even when they don't need to, but it turns out this is actually very well received by consumers, because it's far easier to upgrade than having to figure out the changelog of dozens of separate packages.
I used a single repo monolyth-but-actually-modular setup for my OSS project[2] and that has worked well for me, for similar reasons: people appreciate curation, and since we want to avoid willy-nilly breaking changes, a single all-emcompassing version scheme encourages development to work towards stability rather than features-for-features-sake.
My takeaway is that multi-repos cause a lot of headaches both for framework authorship and for service development, that single repos can be a great poor-mans choice for framework authors, and monorepos - with the appropriate amount of investment in tooling - have good multiplicative potential for complex project clusters. YMMV.
[0] https://github.com/uber-web/jazelle
[1] https://github.com/sebbekarlsson/fjb/tree/master/external
[2] https://mithril.js.org/
-
JavaScript Monorepos with Lerna
Bazel is still our bread and butter at Uber. Nothing in the JS space comes close in terms of features. I wrote a tool that wraps over it called jazelle
-
[AskJS] Is it just me or is core-js fundamentally broken?
Oh sorry, we just moved it here https://github.com/uber-web/jazelle
create-react-app
-
Top 12+ Battle-Tested React Boilerplates for 2024
Create React App (CRA) abstracts away the complexity of configuring Webpack, Babel, and other build tools, allowing developers to focus on writing React code. It includes features such as hot module reloading for efficient development.
-
Integration of Angular, Vue.js and React with .NET: Creating a Modern Web Experience
Immerse yourself in the official Create React App documentation for a deeper understanding.
-
Free Resources Every Web Developer Should Know About
Create React App (https://create-react-app.dev/)
-
Learn CSS Layout the Pedantic Way
- And ofc, there are some templates/frameworks that bring something of that together (https://create-react-app.dev/; maybe https://vitejs.dev/) - google for templates.
I recommend finding some friend with modern experience or at least some youtube tutorials or at least some learning course. That would help you to catch up on the best way to bootstrap your first project. Then you can practice.
-
React Labs: What We've Been Working On – February 2024 – React Compiler
What's the connection?
Also, take a look at this response from 2021: https://github.com/facebook/create-react-app/discussions/117...
- JamesCheng wants to pay 0 USD to have this issue fixed
-
Getting Started with React: An Introduction and Setup Guide
Create React App Documentation
- Membangun Aplikasi To-Do List dengan React.js dan Tailwind CSS
-
Build and Deploy a ReactJS App to AWS EC2 with Docker, NGINX, and Automate with GitHub Actions.
Inside the react-tutorial-app folder, to create a new React project runs the following command using create-react-appand for more details on how create-react-app works and other staff, please visit the official website: https://create-react-app.dev/
-
🌟 Unleashing React Code Splitting: The Epic Guide! 🚀
Before we embark on our journey, make sure you have React installed and a React project set up. If not, fear not! Create React App is your trusty sidekick for a quick start.
What are some alternatives?
rules_nodejs - NodeJS toolchain for Bazel.
craco - Create React App Configuration Override, an easy and comprehensible configuration layer for Create React App.
fusionjs - Modern framework for fast, powerful React apps
vite - Next generation frontend tooling. It's fast!
nx - Smart Monorepos · Fast CI
babili - :scissors: An ES6+ aware minifier based on the Babel toolchain (beta)
nwb - A toolkit for React, Preact, Inferno & vanilla JS apps, React libraries and other npm modules for the web, with no configuration (until you need it)
event-dispatcher - Provides tools that allow your application components to communicate with each other by dispatching events and listening to them
react-boilerplate - :fire: A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices.
fjb - fast javascript bundler :package:
turborepo - Incremental bundler and build system optimized for JavaScript and TypeScript, written in Rust – including Turborepo and Turbopack. [Moved to: https://github.com/vercel/turbo]