I'm building a Node and React app, both using TypeScript. Its directories tree is as follows:
My question:
Since I'm using the same language for both stacks, and in the future the React Native will be added also using TypeScript, I wonder how I can create one group of classes to be used for all of them.
Why I want to do this:
DRY (Don't repeat yourself): My intention is to take full advantage of using the same programming language in all layers so there's no sense creating two equal classes.
What I have tried so far:
I created a third folder called "util" and put a generic class just to test both Node and React using it. Like this:
In Node.js I used the command below to import it:
import Person from "../../util/person.class";
And in React.js, I used the same logic to import it:
import Person from "../../util/person.class";
As I already expected, both deny using files that are outside their respective root folders:
I also searched in the internet about this and I found some "eject" command that, once used, there's no way back, whatever. I'd like to avoid such ways. Is there any approach where I could take in my favor?
I also want to mention that I created a tsconfig.json for backend using "tsc --init" and set the rootDir as "./src/" and outputDir as "./dist/".
Thanks.
You could set up a third project that has the shared functionality. Then you can publish the shared package to a npm repository. And then you can install the shared package in the frontend and backend project.
If you want to send the react from the sever then the front-end files should be under the back-end folder
/app root
/ back-end
/shared-front-end-classes
/front-end-desktop
/front-end-mobile
Though this is not the best solution
The best solution is to host the front-end on a different server and make the
back-end totally functional with APIs
For example :
I have a blog that I host the
Front-end:
Github pages "Support react via a small npm package"
Back-end:
Hosted on Heroku
DB:
I am using mongoAtlas "A cloud DB"
now you have 3 separate places to hold all of your code independent of each other
Now for your other problem, you want to use the same classes over the two front-ends
For me, I usually make a small repo with all the components/ pages that I want then import this in any project for future use
I am not sure if this follows the DRY concept but you will not write your code twice
Related
I am kinda new to front web development, but there is one interesting question for me.
I got a simple vanila html+css+js website, in which I want to integrate a few actions (profile page, custom e-commerce, checkout, etc) using React.
As I followed this tutorial (Add React in One Minute),
I had successfully "inserted" react component into the webpage. But the normal reactjs applications are able to use installed libraries, use props to pass data.
So, basically, the question is how to run this webpage the way that react will be able to handle libraries installation (common npm i example) in order to be able to import them and work like with normal react application created by npx create-react-app my-app
You could use libraries via a CDN link, the same way you added React via a script-tag to your site. Ultimately i think you're looking for the developer experience one gets while using JSX-syntax and this would require you to rewrite your exitsing app, achieved trough setting up a node project with your mentioned command npx create-react-app <app-name>.
JSX must be compiled to regular JavaScript so that browsers can interpret them correctly, much like you would compile a C++ program to a binary file.
I want to have a mono repo that contains the following:
shared: a bunch of TypeScript classes that can be used ANYWHERE
WebClient: a react web app in JavaScript (that needs to use code in shared)
WebServer: a TypeScript server app for the react app (that also needs to use shared code)
The key issue is: how to I define, configure and access the shared code?
I'm totally lost, I've tried a hundred different approaches and nothing works. Any help would be appreciated.
NOTE: appreciate any comments, but please explain like I'm 5! A mini GitHub repo with 3 HelloWorld projects would be great!
Install Lerna and use it to manage the shared classes as packages. Read the documentation and don't be afraid to experiment with it.
If you want to see a Github repo that makes use of Lerna, there are quite a few, one of which is Facebook's Jest.
https://github.com/facebook/jest
I have started to learn react and I am very confused with the concept of packages.
and why we can't just use a simple link as cdn and there is a module which i don't understand it and what's npm and why i have to use it with react
Not trying to give the definite answer here, but trying to explain the 3 terms as simple as I can:
A module is just a file containing lines of JavaScript code.
A library uses one or many modules to provide a set of features.
A package is a downloadable, versioned library. Think of someone putting it in a box and shipping it to you, so you can import it and use it in combination with your own code.
so I came with conclusion and hope you tell me if I get it right or not .
-Module : it is justba javascript file but it's different from normal script that it has its own scope so you have to use import or export to exchange information between modules.
-Library : it is a group of modules or scripts that it is responsible for the function you want .
-package : can be one or more libraries but it is also contain files that don't deal with the functionality but it's only role to make sure the libraries and functional file work properly .
like react package it is come with react library deals with the functionality and also has babel compiler to make browser read and understand react library.
It is very much possible to use a simple link such as a CDN. Many packages also have links available, such as material UI. However, it quickly becomes unmanageable to use CDN links when your project grows, and it can affect performance and load times of your site.
Npm stands for Node package manager. It handles packaging for Node, where it would not be suitable to use a simple link.
It turns out that it is possible to also use npm for web applications, by combining it with a bundler. The bundler (such as webpack) takes all of your modules (JavaScript files and npm packages) and bundles it together so that you get a single script which you can run in the browser.
I have a project built using create-react-app. When importing, a path will first be checked for a package file, and then for an index file. I am looking for a method to add a further step to this logic. Specifically in the absence of a package or index file, I would like to import from any Javascript file that shares a name with it's parent directory.
For example consider the following project structure:
services
billingService.js
userService.js
services.js
app.js
If within app.js I performed import services from './services' (how I would import currently but not how a solution must necessarily) my desired outcome is a resolution that identifies no index.js file is present, and then defaults to returning services.js, which shares the name of its parent directory.
I am aware of Webpack plugins that can accomplish this, however as my project is currently built using create-react-app I currently have limited access to Webpack's configuration. I will eject if I have to but first I am keen to explore other options, if any are available.
I would of course also be very interested to know if there is a way to accomplish this in Webpack while using create-react-app that I am unaware of.
Thank you in advance for any suggestions you can provide.
Edit: Added example as requested
I've been moving from jQuery to React and need some help understanding how to make webpack to split my code from react itself.
I'm using react to build widgets. Each is it's own "app" and multiple of them may be embedded to a non react page. Because of that, I need react included in the page only once (like when using jQuery). I'm currently using create-react-app as it's very easy to start with.
Could you please point me into the right direction?
You could work with multiple entries (documentation) if you would like to work with webpack. This may look like the following:
entry: {
react: ["react", "react-dom"],
app: ['./index.js']
}
Be aware of the fact that you can't use your own webpack-config in the apps created by create-react-app unless you remove or replace the whole react-scripts part, since they handle all of the webpack staff internal.
If you want to use your components external (like different websites), you should create a package (npm or those alike) for each of those. A different option would be to add everyone of those components as an entry point in the webpack->entry object. But if you want to use them external, this seems to be a huge overhead when serving from different hosts.