How to deploy a demo app for a ReactJS component library on netlify?

Question

I am building a ReactJS library component:

GitHub repo: https://github.com/appukuttan-shailesh/neo-viewer/tree/react_lib
branch: react_lib

The demo app that uses this component is located within the demo directory (location: js/react/demo). The app that I am trying to deploy is this demo app.

My package.json for the component (js/react) has "scripts" setup as:

"scripts": {
    "build": "rollup -c",
    "build-watch": "rollup -c -w",
    "start-demo": "cd demo && npm run start",
    "i-all": "npm i && cd demo && npm i",
    "dev": "npm-run-all --parallel build-watch start-demo"
  }

Locally, I run my app by doing: npm run dev

But this doesn’t work when I am deploying to netlify. I tried other build commands as well such as:
rollup -c
rollup -c && cd demo && npm run start
npm-run-all --parallel build-watch start-demo

I have managed to deploy other apps on netlify in the past (but they all were simpler apps that would build by yarn build), but this one has a different structure and I don’t know how to proceed.

I presume I need to handle this deployment differently because it makes use of rollup? From Netlify support, what I understand is that:

you can’t run a server on Netlify.

and

what you need is a command to build a production version - something that will output the required files and the command would exit. After this happens, Netlify will deploy your website.

I suppose I need to produce a 'dist' or 'build' directory for the demo app which can then be deployed on netify. How can do I do this?

Answer 1

Resolved this finally with help from netlify team (see here)!

Summary

Best advice:

To debug I’d suggest starting again from a fresh clone of your own repo and paying attention to the steps you need to perform to get it working locally. You’ll need to ensure that the instructions you provide Netlify perform those same steps.

This worked for me locally

git clone --single-branch --branch react_lib https://github.com/appukuttan-shailesh/neo-viewer

cd neo-viewer/js/react

npm update && npm run build-lib && npm run i-all && npm run build-demo

serve-s demo/build

FYI, my “scripts” in the base "package.json" is set as follows:

"scripts": {
    "build-lib": "rollup -c",
    "build-lib-watch": "rollup -c -w",
    "build-demo": "npm run build-lib && cd demo && react-scripts build",
    "start-demo": "cd demo && npm run start",
    "i-all": "npm i && cd demo && npm i",
    "dev": "npm-run-all --parallel build-lib-watch start-demo"
  }

So now I set the “build” command on netlify to:

npm update && npm run build-lib && npm run i-all && npm run build-demo

And everything works! :-)