Update documentation for npm link

[dc2007git]

After discussion with @eatyourpeas the thought came to my mind that the documentation is not up to date for performing npm link between the component and the client, which is crucial for local development.

Simon has a simple methodology for performing this action and as such we should update the documentation accordingly. I will outline what I can remember here, @eatyourpeas please feel free to edit/add anything I have missed and then we can make changes in the documentation site.

1. Make sure that there are no sym links between your current working directory and any other packages/directories first by performing npm ls -g --depth=0 --link=true, both in the client and component.
2. Use nvm use node to move to the latest version of node. Perform this in the client and the component.
3. In the client, perform sudo npm link @rcpch/digital-growth-charts-react-component-library@7.0.0. Then in the component, perform npm link
4. After this, run npm run build in the component and following that run s/deprecated/start-react-client

The specified version of the component should now be running alongside the client.

Note: whenever changes are made to the component library, execute ctrl+C in the client and re-run npm run build in the component. Then, execute s/deprecated/start-react-client again in the client terminal.

[mbarton]

Deffo up for updating the documentation, this stuff is so tricky!

When using nvm you shouldn't need sudo to run npm link, everything is under your home directory.

[dc2007git]

Yeah I thought that would be the case but for me I had to use sudo! Not sure why it wouldn’t work otherwise.

…

On 28 Mar 2024, at 16:34, Michael Barton ***@***.***> wrote: Deffo up for updating the documentation, this stuff is so tricky! When using nvm you shouldn't need sudo to run npm link, everything is under your home directory. — Reply to this email directly, view it on GitHub <#82 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/APUTDK7AC7M3WOBKIPYS5MTY2QZ75AVCNFSM6AAAAABFNA6N3WVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAMRVGY2DENRYHA>. You are receiving this because you authored the thread.

[eatyourpeas]

You are nearly there. I was going to update the docs so thank you for beating me to it :)

NPM linking

1. make sure you already have a version of the chart component in your node_modules: current live version is 6.1.15
2. navigate to root of the chart component: npm link
3. navigate to root of the client: npm link @rcpch/digital-growth-chart-react-component-library@7.0.0
   Note, you should be using the same version of node in both consoles
   This is because npm link creates a global sym link in the node version you are using.
4. in the component: npm run build: this transpiles the react code into the build folder ready to use in the client
5. in the client: s/deprecated/start-react-client (this clearly needs a better work flow)
   NOTE any changes you make in the component you will need to run npm run build before the changes are reflected in the client.

Pitfalls
If you get a hooks error and a blank screen, this is because of a clash between react versions between the client and the component. The component now runs react 18 and is a peer dependency. It is necessary for storybook, but not if you are using the component with the client, as the component can use the client's react version instead. Therefore, if you get a hooks error, you will need to navigate to the node_modules folder in the component and delete the react and react-dom folders. The client should then work. Note that if you do this, storybook will stop working in the component, and therefore you will need to go to step one of the next section to fix.

Storybook

If you want to develop on the component without using the client, you can now use storybook 8.0 instead. Again, best to use node LTE version >=20

1. In the component: npm install
2. npm run storybook
   This should open a browser on port 6006
   Note that this will install react and react-dom in the node_modules, as it is a storybook dependency. This will cause a hooks error should you subsequently come to npm link the component to the client. See above for a fix.

[dc2007git]

Perfect @eatyourpeas thank you. Leave it to me

[dc2007git]

Closing as per PR 103 in documentation repo