crisp-react VS react-redux-universal-hot-example

If TypeScript doesn't put you off (it's really a good choice for both backend and frontend), have a look at Crisp React.

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

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.

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.

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.

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:

Crisp React uses the same Express server in production and debugging (for full stack builds only).

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.

You can have Login/authentication SPA, Reporting SPA, etc. Each SPA does its own routing as demonstrated here.

I am developing an app based in this React Redux boilerplate. In one component I need to get the current URL when component is mounted in order to generate a shareable URL for social media. Than component is being accesible from dynamically generated URLs with React Router. In client side I wouldn't have any problem by getting it through javascript document object but the problem lies server side.

export default class ApiClient { constructor(req) { /* eslint-disable no-return-assign */ methods.forEach((method) => this[method] = (path, withCredentials, { params, data } = {}) => new Promise((resolve, reject) => { const request = superagent[method](formatUrl(path)) if (withCredentials) { console.log('first of all, its true') console.log(this) } if (params) { request.query(params) } if (__SERVER__ && req.get('cookie')) { request.set('cookie', req.get('cookie')) } if (data) { request.send(data) } request.end((err, { body } = {}) => { return err ? reject(body || err) : resolve(body) }) })) /* eslint-enable no-return-assign */ } /* * There's a V8 bug where, when using Babel, exporting classes with only * constructors sometimes fails. Until it's patched, this is a solution to * "ApiClient is not defined" from issue #14. * https://github.com/erikras/react-redux-universal-hot-example/issues/14 * * Relevant Babel bug (but they claim it's V8): https://phabricator.babeljs.io/T2455 * * Remove it at your own risk. */ empty() {}} I want to connect this to my auth so that I can prepend headers to protected endpoints, like so: