search

wufe / react-particles-js

Particles.js for React
https://rpj.bembi.dev/
MIT License
1.15k stars 106 forks source link

build not working as expected #106

Closed JigyasuPrakash closed 4 years ago

JigyasuPrakash commented 4 years ago

I used this as background animation for my website. It is working absolutly fine but the moment i build the react app makes things get worse.. only canvas is rendered on page and rest of the particle effect just disappear.. am I doing somthing wrong..

Development Mode: npm start

Output image

Deploy npm build firebase deploy image

wufe commented 4 years ago

I'm not sure what is going on.. Any further detail might help.

Are you sure the CSS is rendering correctly?

JigyasuPrakash commented 4 years ago

Yes I am pretty sure the CSS are working perfect in development mode but as soon as i build the react app.. and deploy the build over firebase something messes up.. and only canvas is rendered with no particle effect.

wufe commented 4 years ago

Unfortunately I don't know how to reproduce. Is this issue reproducible in a codesandbox environment? Can you provide a sample?

JigyasuPrakash commented 4 years ago

I am not much familier with codesandbox. But you can use my repository to find the bug. https://github.com/JigyasuPrakash/JigyasuPrakash.github.io

I have actually managed to use particles using CDN.

matteobruni commented 4 years ago

I imported your repository in codesandbox and fixed the issue:

https://codesandbox.io/s/inspiring-kowalevski-dj2p1

I don't know if this was the project version that was giving the issue, anyway I removed the CDN script and updated react-particles-js to 3.0.3 and added the Particle component to the App.js. Removed also the initialization of particles in the public js, it was useless at this point.

I fixed also the z-index in the App.css for the particles and imported the particles.json in the Particle component to update the settings.

Everything seems ok there

JigyasuPrakash commented 4 years ago

@matteobruni thanks for helping me out.. I have checked the sandbox and it working as expected.. but my problem is with the deployement.. I have copied the sandbox project and deployed on netlify and the problem is same as it was earlier.. You can check the deployment at here

matteobruni commented 4 years ago

@matteobruni thanks for helping me out.. I have checked the sandbox and it working as expected.. but my problem is with the deployement.. I have copied the sandbox project and deployed on netlify and the problem is same as it was earlier.. You can check the deployment at here

I've checked the deployment and the particles container has 1% opacity, Idk why but at least we found the issue.

The value should be 1 and not 1% obv. Probably the value in the App.css in % it's causing the issue, try using 1 instead of 100%.

I've updated the sandbox with 1 if you want to try.

JigyasuPrakash commented 4 years ago

Finally its working..!! Thank you so much @matteobruni you really made my day. So does this issue needs a fix in building script as it is not the expected behaviour?

matteobruni commented 4 years ago

You’re welcome. No it was just a CSS error like I thought.

JigyasuPrakash commented 4 years ago

Ok then.. thank u so much again man..