How to deploy an app that uses rollup

Support
,
1

Site: https://neo-viewer.netlify.app/

GitHub repo: https://github.com/appukuttan-shailesh/neo-viewer/tree/react_lib
branch: react_lib
(note: it is NOT ‘react’ branch of the repo, but ‘react_lib’)

I am building a ReactJS library component. 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 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?
Can you help me deploy this app? Thanks.

2

You need to produce a static build to deploy with Netlify.

You want to avoid starting a file watcher (rollup -c -w) or a server (npm run start -> react-scripts start).

I haven’t tested or checked where everything outputs to, but for a “build” it looks like the commands you might want to run are something like:

rollup -c && cd demo && react-scripts build
3

Hi, @appukuttan-shailesh. I believe this support guide should have the answer:

To summarize, Netlify build image is designed to run commands which create static files to be deployed to our CDN.

Your command isn’t building static files for deployment. Your command is running a server that serves the responses and isn’t supported at Netlify.

If might be possible to use Netlify Functions for this instead, though, if you are creating an API:

If there are other questions about this, please let us know.

4

Thanks @nathanmartin and @luke for looking into this. Based on your suggestion, I updated my “scripts” to:

"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"
  }

Now, when I run this locally:
npm run build-demo

image
image890×1022 129 KB

I do get a build folder created for my demo:
image

When I try to follow their instruction:

You may serve it with a static server:
serve -s build

I do get my app working at both the provided URLs.
image

But when I try to replicate this on Netlify, it seems to fail (I am very likely not doing all that is needed).
I keep encountering this error in my logs:

10:07:16 AM: [1/4] Resolving packages…
10:07:16 AM: error Package “” refers to a non-existing file ‘“/opt/build/repo/js/react/node_modules/@material-ui/core”’

Link to logs: Netlify App

Since I don’t encounter this issue locally, I am a bit lost on what is the cause and the solution.
My Netlify deploy settings are as follows:
image

Thanks for your help.

5

This appears to be due to the nested project structure.

If I clone your repo, switch to the react_lib branch, cd to js/react/demo and attempt an install I receive the same error that Netlify is reporting.

error Package "" refers to a non-existing file '"/neo-viewer/js/react/node_modules/@material-ui/core"'.

The js/react/demo/package.json file references several files from the ../node_modules folder.

"@material-ui/core": "file:../node_modules/@material-ui/core",
"@material-ui/icons": "file:../node_modules/@material-ui/icons",

The @material-ui package is listed as peerDependency and I’m not familiar enough with your project to know what should be installing that.

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.

I believe that by default Netlify only run an install in the Base directory so if you need to run multiple npm/yarn installs the rest would be the responsibility of your build command or scripts.

6

Thanks a lot @nathanmartin !
This was the best advice (on hindsight obvious, but it got me thinking along the right path):

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.

For the benefit of any future users, describing what I did here:

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

This worked for me locally.
FYI, my “scripts” 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

image
image872×337 25.5 KB

Note that I had previously set the base directory to point to the ‘demo’ directory, but this should instead have been the outer base directory.

And it works now :slight_smile:
Thanks for all the help!