Imagine i have large reactjs project lets call it A and i want to use external component residing in another project which consist only of pure components (.jsx & .css files) without node_modules folder lets call that project B.
Problem component from project B cannot find react.
Module build failed: Error: Couldn't find preset "react" relative to directory
Logically because there is no node_modules folder in project.
Is there a way to instruct components from project B to use node_modules from project A
I was thinkning somehow utilize webpack but no idea how ?
You can create a root folder that contains a node_modules folder that will be shared to all your sub-projects (A and B). Inside this folder you can drop all the "common" components, modules, libraries, etc.
When you require a module, NodeJS will look for the node_modules folder on that project, if doesn't find the module there, it will look for it in a directory above and so long.
Related
I have been using the command npx create-react-app my-app to build a new React app environment. It creates a simple and generic app with the React logo. It generates folders such as public with index.html and src with your typical files such as App.css, App.js, and index.js, among others.
While studying the code for reverse engineering purposes I noticed that some projects have a file called main.js. I assume people are manually creating this file and input code similar to pre-populated index.js code (automatically created by npx create-react-app my-app). Essentially code for routing or calling components which gets rendered.
Are these two file names interchangeable or should they serve different purposes?
The file name for the JS file you use as your entry point is arbitrary. Your bundler’s (Webpack, Parcel, etc) configuration will determine which file it looks for.
I would like to make a new ReactJS component with Typescript and publish it on npm.
My idea is to have only a project folder with:
/dist build for final distribution on npm
node_modules
/public where I will have my index.js to locally run my app for development purposes and one folder components where all files for my distributed component will be stored (only component folder will be published)
and other files like .gitignore, .npmignore, package.json and so on..
Something like this:
I have seen many guides (and spent many hours) figuring out how to publish a ReactJS component like:
Create an NPM Package from a React Component
Create a React Component Library using TypeScript
How To Make a React Component Library - Making A React Library
Publish A React Component On NPM
create-react-library
But most of them have such a complicated structure (like script files, babel files, webpacks ..) and generated files that I don't understand.
My idea was to use react-script to run and develop the app locally and then run tsc to compile my component to build. I thought that I don't need create-react-app/library, babel or webpack to publish a react component - if they are necessary, why do we need them? I just thought it should be possible to do it simply and lightly - like just to take tsx files compile them into js..
To me, it seems that the process of publishing a ReactJS component library with TS to npm is not that well documented. Can you please provide steps or some well and easy-to-understand guide on how to publish react component? Also with all the configurations (configuration files), since I think I messed it somewhere there.
Thanks in advance!
i am learning react and writing my own components but i ran into an issue with project organisation.
here is my tree
Project_Folder
- Components
- Form
- index.js
- form.less
- package.json
- Button
- index.js
- button.less
- package.json
- node_modules
- <million unknown packages>
- application.js
- webpack.conf.js
In my application.js i import form like that: import Form from './Components/form/index.js'; Recently i figured if i just put my components folder in to node_modules folder i can import my components with import Form from 'Components/Form'; which is much better. but then developing this components becomes a hell just because whenever i go in to node folder it has millions of other modules which are required by webpack or babel or mini-CSS-extractor.
is there any solution to a better organization within node_modules, or maybe i should install dev tools globally ?
Definitely you shouldn't keep your components in node_modules catalog, that's where you keep only dependencies of your app. Here's might be a good read for you. Especially when you'll be using git repository, you shouldn't copy your node_modules catalog in there, because, as you've noticed - it's huuge. Let any other person working on this code to install dependecies on it's own, after cloning a repo.
There's few conventions - one will be to keep your components in src/ catalog. My advise for you will be to install globally create-react-app (a boilerplate generator for React sites, available here) and check it's conventions. Should be a great lesson for you.
One thing that concerns me is why there's package.json inside each component? There should be only one package.json file for a whole project. Read here.
If you want your file paths shorter and easier to read/use, you can create aliases with Webpack like this.
It is not a good idea to have your components inside the node_modules folder. Unless you are creating shareable code between teams through other tools/frameworks. Using your components there create a whole bunch of a problems that you have not faced YET :( !
i.e Node modules give the flexibility to share code using only the package.json and ignoring them with .gitignore. And reinstalling them through npm install.
Can you see the problem here?
To be able to share your components now inside the node_modules the options are:
either push your files without the folder losing your components (Not an option after all :()
send the whole application and the modules which could be huge and forces everyone to have to download a massive repo or even in case of upload to the repository (git, bitbucket, gitlab) (taking forever to upload)
create a whole module for that component only to write './X' into 'X' (requires extra effort and does not sound a good deal for me)
Structuring folder is a delicate topic. It envolves a little bit of analysis of what suits your taste better and there is no right way of doing (even if you find experts that claim that such way is the correct)
For a better approach you could check the react documentation:
https://reactjs.org/docs/faq-structure
and a tutorial that I think will suffice in your case
https://medium.com/hackernoon/the-100-correct-way-to-structure-a-react-app-or-why-theres-no-such-thing-3ede534ef1ed
Goodluck:)
You should avoid messing with your node_modules folder. It is best to let npm or yarn write into it.
What will happen if you need to delete your node_modules and rebuild it? All your code will be lost.
What will happen if you want to share your code or push it to remote repository.
You will be force to share your nodes_modules folder around.
As for react project best file structure, checkout this article on react website.
There is not really a best structure, all depend on you and your team. Usually people:
Group files by feature
common/
Avatar.js
Avatar.css
APIUtils.js
APIUtils.test.js
feed/
index.js
Feed.js
Feed.css
FeedStory.js
FeedStory.test.js
FeedAPI.js
profile/
index.js
Profile.js
ProfileHeader.js
ProfileHeader.css
ProfileAPI.js
Group files by type
api/
APIUtils.js
APIUtils.test.js
ProfileAPI.js
UserAPI.js
components/
Avatar.js
Avatar.css
Feed.js
Feed.css
FeedStory.js
FeedStory.test.js
Profile.js
ProfileHeader.js
ProfileHeader.css
I want to create a java-script library file that contains a few React components I composed and I used "create-react-app my-app --scripts-version=react-scripts-ts" command with npm to create the project (link).
I want to pack/bundle this project (Webpack) without having any html file.. only components so I can take the output js file, include it in another project and use its components.
I tried looking for some Webpack configuration but all I find is not sutiable for TypeScript project.
Can you help me configuring Webpack?
I'm trying to use Angular2 with Springboot, but I can't set them together.
I first started a springboot project, and then tried to follow the Angular 2 Tour of Heroes by johnpapa and run npm install.
The structure looks like below:
I have the /app folder, and the .js are compiled to resources/static/app/js.
Problems:
1) The folder resources/static/node_modules/ has lots of files. So when running bootRun, it gets really slow and sometimes can't even refresh the files. I believe I shouldn't put the node_modules there, but not sure..
2) npm install puts the files in ./node_modules so currently I copied them to static folder. Should I just build the node_modules to static?
3) My structure looks hacky.. what is the best way to do it ?
How to set this structure? Also, please let me know if I should start using grunt/gulp or some other tool to make this easier.
Ps.: In case anyone is interested in the johnpapa's guide: johnpapa's angular2 guide
1) Remove node_modules from static folder. Your build process should bundle all the necessary modules. node_modules is used only during build.
2) Do not copy node_modules into static folder
3) Remove sources from static folder. That one is meant only for generated bundle + some static PROD files like index.html
Try really cool project builder Jhipster ;)
I shared on github a project that integrates Angular 2 with springboot. you can check here Angular 2 with spring boot