Is there a way to remove first "/" from resources url?

[thevishnupradeep]

I am trying to build an electron app. I am simply pointing electron api to the build folder. But the issue is I am getting the error failed to load file:///.... error. If I understand correctly, this is because of the extra slash at the beginning of the resource links.

I just want to change links in html and other files from "/static/js/main.2a85c832.js" to "static/js/main.2a85c832.js"?
Could anyone help? Thanks

[gaearon]

We don't currently support this, the main reason being it's a footgun for apps with client-side routing. For example, people visiting http://myapp.com/todos/42 still want to load http://myapp.com/static/js/main.123.js, not http://myapp.com/todos/42/static/js/main.123.js.

However there are valid use cases such as if you don't use client-side routing, or if you build an Electron or Cordova app. We’ll need to address this in a future release.

As a temporary hack I think you you should be able to set homepage: "" in your package.json and it will partially work. But I think something related to how Webpack handles files was broken. So we’ll need to fix this.

[thevishnupradeep]

well, my problem was fixed when I edited two lines of code in webpack.config.prod.js:
from: var homepagePathname = homepagePath ? url.parse(homepagePath).pathname : '/';
to: var homepagePathname = homepagePath ? url.parse(homepagePath).pathname : '';
&
from: var publicPath = ensureSlash(homepagePathname, true);
to: var publicPath = homepagePathname;

But I am sure this is not a solution. What if we look for an "environment" option in "package.json"? If required developers can specify whether it's for web or another framework like electron?

[gaearon]

@thevishnupradeep This works as a temporary fix but if I recall correctly it breaks other things. I’m not sure which approach exactly we will take, so I’m keeping it open.

[license2e]

@gaearon @thevishnupradeep I would love your thoughts on this as a possible solution:
Issue: #1095
PR: #1096

Here is what I have for my startupScript parameter inside package.json:

  "homepage": "./",
  "startScript": "./dev.js",

dev.js looks like this:

var electron = require('electron');
var proc = require('child_process');

process.env.LOAD_URL = process.env.DEV_URL;

var child = proc.spawn(electron, ['./public/main.js'], {stdio: 'inherit'});
child.on('close', function (code) {
  process.exit(code);
});

./public/main.js take directly from this example: https://github.com/electron/electron-quick-start/blob/master/main.js

With this change:

  // and load the index.html of the app.
  let loadUrl = url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  })
  if (process.env.LOAD_URL) {
    loadUrl = process.env.LOAD_URL;
  }
  mainWindow.loadURL(loadUrl);

[thevishnupradeep]

@license2e @gaearon That works! didn't add child_process part. Just "homepage": "./", was enough. There is only one issue remaining, fonts! Even in css, the url is prepended with "/". But I think it should be something like "../media/...". Is there a solution for this?

[mcmunder]

@thevishnupradeep I am having exactly the same issue with an electron app at the moment. Adding "homepage": "./" to package.json solves the path issue but breaks client site routing... I am going back to @chentsulin's electron-react-boilerplate for now. It works great and forces you to accept just as much magic as create-react-app does ;-)

[gaearon]

Adding "homepage": "./" to package.json solves the path issue but breaks client site routing

If you have a suggestion for how to avoid this problem but support client-side routing I’d love to know it. It’s not obvious to me.

[robcaldecott]

FWIW I use ./ as the homepage for Cordova apps and have my CSS resources (fonts, etc.) stored in /public and referenced in index.html using %PUBLIC_URL%. Works perfectly. I then create a symbolic link from build -> www and Cordova is happy. I'll do pretty much anything to avoid ejecting!

[gaearon]

Another possible workaround for now is to write a post-build step that replaces /static/ with ./static/ in all files in build folder.