Comments (9)
Checkout the npm link
command. You can use this to link a local build of the components repo to your hospitalrun-frontend project.
from components.
Once you link it, every time you rebuild it should pick up the changes. You should be able to run the components repo in watch mode, so I think you should get a near live reload experience. I believe the only thing you'd need to do is restart frontend repo.
from components.
@fox1t Yes I can take a look at that over the weekend.
from components.
@jackcmeyer I would like to try solving this, but I'm not exactly sure how to test it. Since the front end and component libraries are separate repos, how can I test what effect the changes to the component library have on the front end? This seems tricky since they are running on completely separate dev servers.
At first glance, it seems that the SCSS isn't being imported or compiled correctly in the build files, either due to a configuration issue with Webpack, or possibly due to an issue with the structure of the class names. The only components that have their own SCSS files are the callout and the toaster. Comparing the two files, it seems that the toaster follows a different naming convention (BEM) than the callout. The toaster uses selectors like div.Toastify__toast.Toastify__toast--success
whereas the (broken) callout selectors are like .callout-success
. Not sure if this is related to the bug or not.
from components.
@jackcmeyer One other question: this is the first project I've worked on where the components and main front end codebase are separate repos. Is it possible to enable live reloading between repos? Meaning that if I change a component in the component repo, the front end updates that component immediately? Or do I need to rebuild the project and relink it every time there is a change? Thanks.
from components.
@jackcmeyer I finally figured out how to link the two repos. It was not straightforward and involved several steps. Perhaps we should add some instructions to the readme? In case anyone is wondering these were the steps I took:
- cd to the components repo and run
npm link
- delete
"@hospitalrun/components": "~1.16.0"
from the dependencies for the front end repo (this should not be committed) - cd to the front end repo and run
npm link @hospitalrun/components
- run
npm i
in the front end repo and restart the dev server. - You might now see an error message when you go to localhost:3000:
Hooks can only be called inside the body of a function component.
There are three common reasons you might be seeing it:
You might have mismatching versions of React and React DOM.
You might be breaking the Rules of Hooks.
You might have more than one copy of React in the same app.
The reason you are seeing this message is because the component library is trying to run React from it's own node_modules folder, when it should be running the same copy as the front-end repo. To fix this you should:
- run
npm install npm-link-shared -g
- Add the following script to the front-end repo:
"prestart": "npm-link-shared ./node_modules/@hospitalrun/components/node_modules . react"
This will tell npm to use the front end repo's version of React for both the front end and the component library when you runnpm run start
- Restart the dev server and the 2 repos should now be linked correctly.
Let me know if you have a simpler way of doing this. This is just what worked for me.
from components.
@jackcmeyer I finally figured out how to link the two repos. It was not straightforward and involved several steps. Perhaps we should add some instructions to the readme? In case anyone is wondering these were the steps I took:
1. cd to the components repo and run `npm link` 2. delete `"@hospitalrun/components": "~1.16.0"` from the dependencies for the front end repo (this should not be committed) 3. cd to the front end repo and run `npm link @hospitalrun/components` 4. run `npm i` in the front end repo and restart the dev server. 5. You might now see an error message when you go to localhost:3000:
Hooks can only be called inside the body of a function component. There are three common reasons you might be seeing it: You might have mismatching versions of React and React DOM. You might be breaking the Rules of Hooks. You might have more than one copy of React in the same app.
The reason you are seeing this message is because the component library is trying to run React from it's own node_modules folder, when it should be running the same copy as the front-end repo. To fix this you should:
1. run `npm install npm-link-shared -g` 2. Add the following script to the front-end repo: `"prestart": "npm-link-shared ./node_modules/@hospitalrun/components/node_modules . react"` This will tell npm to use the front end repo's version of React for both the front end and the component library when you run `npm run start` 3. Restart the dev server and the 2 repos should now be linked correctly.
Let me know if you have a simpler way of doing this. This is just what worked for me.
"@hospitalrun/components"
is supposed to work in the workspaces environment. We are waiting for npm v7 to test npm workspaces
. As of today, we are using yarn v1 workspaces but they are broken at the moment.
Your findings are awesome and we should take them as a starting point. Would you like to work on a PR that explores how to fix workspaces? There are 3 possible candidates: yarn v2 workspaces
; npm v7 workspaces
; pnpm workspaces
.
from components.
🎉 This issue has been resolved in version 2.0.1 🎉
The release is available on:
Your semantic-release bot 📦🚀
from components.
🎉 This issue has been resolved in version 3.0.0 🎉
The release is available on:
Your semantic-release bot 📦🚀
from components.
Related Issues (20)
- Type '{ children: string; eventKey: string; }' is not assignable to type 'IntrinsicAttributes & Props'. HOT 1
- Add Logout icon HOT 4
- How Observable call HOT 1
- New Patient Icons HOT 9
- Select should show all options when opened regardless of filter HOT 6
- Any NavLink label should be able to be any React component HOT 6
- Add markdown support on homepages of Storybook HOT 9
- Provide callbacks for filter/search capabilities on table column HOT 16
- Table component should use generics HOT 3
- Basic authentication prompt HOT 12
- v2.0.1 fails build of @hospitalrun/frontend HOT 4
- Modal Dialog Form: UX improvements relating to closing of component HOT 1
- Add Integration Testing during build pipeline
- Upgrade to React 17.0.x HOT 8
- Add Billing and Inventory icons HOT 2
- Add a billing icon HOT 4
- Add an inventory icon HOT 8
- Add tests and Storybook components for arrow icons HOT 3
- Select - add the ability to display error messages HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from components.