Search code examples
reactjspackagelocaldevelopment-environment

Want an easier way to develop react package in local


Hi I was trying to develop a react package which I did and published, but I want to know a way on how I can easily do the development in the local. As what I did is, I developed a component and then published in npm and installed to use it, however it is also possible to use npm i '/folderName' this requires a new project to be used. Now this leads to a total confusion, How am I supposed to use the component? and do the development without publishing each time.

Package is : @venkataramanan/simple-react-package (Just a template from: https://medium.com/weekly-webtips/how-to-build-a-react-library-with-typescript-d0f08a1f517e) and any answer is appreciated.

Tried to work with react package however I want to publish it each time before running in local or have to create a seperate package itself, need a shorter and easier development mode.


Solution

  • To test your project locally, you need to use npm link.

    1. Finalise your application. Make sure all the dependencies are installed.
    2. Run npm link in the root of your application. This will create a symlink to your application and will be added to the npm global packages.
    3. create a new folder to test your application. run npm init -y to create a package.json file.
    4. Now, here we are going to link our application. Run npm link my-test-app. 'my-test-app' is the name of the application we built initially in step 1.
      Note: we define the name property in the package.json file.
    5. The my-test-app package will be installed in your new test folder.

    From the test folder it seems that we have installed it from npm, but it is actually symlinked to another folder. With this arrangement, you may now do changes on your my-test-app application, and then the changes shall be reflected directly into the folder which is using your package, that too without installing or anything.