Built folder with files does not work

#1

Hello all,
I’m a React developer and I want to use mobiscroll. I tried with the start of projects and demo projects. When I use build server - all is ok. When I use developer mode - all is ok. When I use build and try to open index.html in chrome, firefox or in safari I always have white page.
Btw, when I use
"
$yarn build
yarn run v1.13.0
warning …/…/package.json: No license field
"

however when I use “npm run-script build” I not get an “warning …/…/package.json: No license field”
When I build for production I receive a folder Build and in theory is ready to be use straight away (for example in GitHub). This is correct? Yes! But when I upload that whole folder to GitHub I receive an blank page:

Live demo:

https://mariuszsygnowski.github.io/test/

Anyone can help me?

#2

If you open the dev console, you’ll probably see the errors that the css and js resources are not found. This is because it is served from a “subfolder” (/test), while the browser looks for the resources under the server root.
This could be probably solved by setting the base url in your index.html head section, something like:

<base href="/test/" />

However this is not related to mobiscroll being present in the project.

#3

Hi, no, it didi’t helped at all.
I helped a lot when I added /test on beginning of 6 links ie:

<link rel="shortcut icon" href="/test/favicon.ico" />
<link rel="manifest" href="/test/manifest.json" />

But now is missing 2 files:

icons_mobiscroll.965a7a1a.woff
icons_mobiscroll.c405c13e.ttf

here is an error:

mobiscroll.react.min.js:399 GET https://mariuszsygnowski.github.io/static/media/icons_mobiscroll.965a7a1a.woff net::ERR_ABORTED 404
show @ mobiscroll.react.min.js:399
Pt.s._init @ mobiscroll.react.min.js:2845
Z.p.init @ mobiscroll.react.min.js:948
Pt @ mobiscroll.react.min.js:2850
value @ mobiscroll.react.min.js:3055
Li @ react-dom.production.min.js:5351
Ai @ react-dom.production.min.js:5099
Di @ react-dom.production.min.js:5066
Ei @ react-dom.production.min.js:5001
ti @ react-dom.production.min.js:4927
Hi @ react-dom.production.min.js:5538
Ri @ react-dom.production.min.js:5546
Bi.render @ react-dom.production.min.js:5737
(anonymous) @ react-dom.production.min.js:5822
Ii @ react-dom.production.min.js:5468
Ki @ react-dom.production.min.js:5821
render @ react-dom.production.min.js:5850
22 @ index.js:7
f @ (index):50
9 @ serviceWorker.js:135
f @ (index):50
a @ (index):40
e @ (index):32
(anonymous) @ main.7e74e460.chunk.js:1
(index):1 GET https://mariuszsygnowski.github.io/static/media/icons_mobiscroll.c405c13e.ttf net::ERR_ABORTED 404

I can confirm is working fine when I upload to the server in rot directory:
https://marinelli19.000webhostapp.com/

#4

Ok, I checked this again.
Instead of adding <base href="/test/" />, you need to set the "homepage" property in your package.json file:

  ...
  "homepage": "https://mariuszsygnowski.github.io/test/"
  ...

Like said before, this is not something related to mobiscroll, this is the build process of the create-react-app scripts.

More info on this here;