crisp-react
single-spa
Our great sponsors
crisp-react | single-spa | |
---|---|---|
24 | 48 | |
185 | 13,017 | |
- | 0.7% | |
0.0 | 6.3 | |
about 1 year ago | 6 days ago | |
TypeScript | JavaScript | |
MIT License | GNU General Public License v3.0 or later |
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.
crisp-react
-
Best way to create Express websites
If TypeScript doesn't put you off (it's really a good choice for both backend and frontend), have a look at Crisp React.
-
Ask HN: Cloudflare Pages vs. Netlify vs. Others?
Ability to handle a monorepo with 2 builds depends on a particular monorepo. For example, Crisp React (https://github.com/winwiz1/crisp-react) has 2 logical projects: server (https://github.com/winwiz1/crisp-react/server) and client (https://github.com/winwiz1/crisp-react/client). Each project can be built separately. And this is the website built (both projects used) and deployed automatically by Cloudflare Pages: https://jamstack.winwiz1.com
-
Large React Site
You can use Crisp React to split a monolythic React SPA into several SPAs. Each SPA will have its own instance of React Router that is aware of the several pages that belong to that particular SPA.
-
What to look for on a slow website
The VM resorces such as CPU and memory should be used to handle API calls and return data. That's in case some webpages are dynamic and require API data. All static assetts including images are better to be served by a CDN. Which means your VM will serve the static assets to the CDN data centers and not to end users. Example: this website or that.
-
Best practices for sharing code between client and server in 2021?
For deployment you can use Docker multi-staged build to ensure the backend run-time environment doesn't contain the client build-time dependencies e.g. client/node_modules/. It improves security and reduces container's storage footprint. An example for React client and node server is here. Although this has nothing to do with code/types sharing.
-
There's never been a better time to build websites
https://github.com/winwiz1/crisp-react/blob/master/docs/benc...
Tailwind is powerful, consistent and comprehensive but again the advantages come not without a drawback: In order to use it effectively one needs to learn/memorise yet another CSS. I have better things to do and think it's more efficient to use a set of CSS management approaches:
-
How to serve static site from express in development?
Crisp React uses the same Express server in production and debugging (for full stack builds only).
-
Which is better CSS-in-JS or CSS for large and scalabe project?
The alternative approach is to use not many but several tools in a manner that utilises advantages while minimising drawbacks. You can read about it here, scroll down to the CSS bullet.
-
How to compose a suite of react apps into a single wrapper app?
You can have Login/authentication SPA, Reporting SPA, etc. Each SPA does its own routing as demonstrated here.
- How to deploy Node/React website on Google Compute Engine with hardened security starting at $3/month
single-spa
-
Micro frontend frameworks in 2024
Single-SPA Framework - One of the most popular choices. It has a large community behind it and offers robust routing and lifecycle management for microapps. Ref - https://single-spa.js.org/
-
⏰ It’s time to talk about Import Map, Micro Frontend, and Nx Monorepo
Joel Denning is the visionary behind single-spa, boasting profound insights into the true mechanics of the web and is, in my view, a pioneer in micro frontend architecture. I highly recommend checking the single-spa website and his YouTube channel. While the videos might appear dated at first glance, rest assured, Joel is ahead of his time, and the content remains incredibly relevant today.
-
Single-SPA and Svelte advices.
You got me curious and I found that single spa is something new to me - if I read https://github.com/single-spa/single-spa then I reckon you can use Svelte(Kit) in such framework - like you can use angular etc
- Speed Run de MicroFrontends com Single-SPA (any%)
-
Use web components for what they’re good at
I’ve actually done that “web components as the interoperability layer”!
It was this old angular 1.8 app with new features being written in angular-hybrid-ized angular 8. Ripping out angular-hybrid and separating the angular 1.8 routes from the modern angular routes was difficult, but now they were totally separate.
The only thing linking them together was an object with some RXJS streams in it for state, and a little in-house wrapper “app” who just loaded one component or another depending on the URL and a hash of routes for config. (I’d probably use SingleSPA [1] now. Same thing really.)
We could deploy them separately since the build just ends up being another JS file somewhere that just gets included with a script tag at runtime. No version bumping! No big mega build!
We started replacing the remaining “old” routes 1 by 1 with a “new” counter part. That was the easiest part, and went at a pace devs were comfortable with (fast enough) and business folk could tolerate. (modular enough to not HAVE to be done all at once)
Last I checked, the angular 1.8 stuff is gone years ago. :)
[1] https://single-spa.js.org/
-
Micro-frontend with Module Federations [Part 1] - Vite
Module Federation is not the unique solution, for example single-spa
-
Vue 2 EOL
You may want to look into using single-spa to run Vue 2 and Vue 3 side by side while you're migrating. Once your app is fully converted, you can stop using single-spa
- Angular et micro front-end : conseils et à la recherche d'un bon tuto
-
Building a Large Scale Micro-frontend Application.
Single-SPA and module federation are potent tools for building scalable micro-frontends. Single-spa provides a framework for building a modular front-end application. It allows lazy loading of micro-frontends, which helps improve the application's performance. In contrast, module federation enables communication and dependency sharing between different micro-frontends. It reduces code duplication, which can help with scaling an application.
-
How to split an Angular app into micro-frontend apps
Since micro-frontend allows us to develop applications individually, this also means you can use different frameworks and libraries together to develop each section of this application. Of course, this will have some advantages and disadvantages. If you are using different technologies to serve different parts of the application, it won't be so easy to move developers within teams. However, the door is open, and if you want to do something like that, you could use something like Single SPA, or some other, to help you organize and connect the different technologies into a larger application.
What are some alternatives?
react-redux-universal-hot-example - A starter boilerplate for a universal webapp using express, react, redux, webpack, and react-transform
nx - Smart Monorepos · Fast CI
create-react-app - Set up a modern web app by running one command.
Bit - A build system for development of composable software.
compress-create-react-app - An NPM package which allows easily adding post build compression to a create-react-app with minimal configuration
qiankun - 📦 🚀 Blazing fast, simple and complete solution for micro frontends.
nestjs-bff - A full-stack TypeScript solution, and starter project. Includes an API, CLI, and example client webapp. Features include production grade logging, authorization, authentication, MongoDB migrations, and end-to-end testing.
piral - Framework for next generation web apps using micro frontends. :rocket:
electron-react-boilerplate - A Foundation for Scalable Cross-Platform Apps
FrintJS - Modular JavaScript framework for building scalable and reactive applications
generator-react-webpack - Yeoman generator for ReactJS and Webpack
lerna - :dragon: Lerna is a fast, modern build system for managing and publishing multiple JavaScript/TypeScript packages from the same repository.