webpack-dev-server stops access to local files

[kylewetton]

Hey mate, thanks so much for the boilerplate, it's fantastic.

I had started a prototype of an Electron app before using your boilerplate, on the prototype I had a simple onDrop function that gave me a path in the event: e.dataTransfer.files

This has a paths like so:

/Users/kylewetton/Desktop/some_image.jpg

Works well!

However, in your boilerplate because of the web-server, my function results in a path like this

http://localhost:8080/Users/kylewetton/Desktop/some_image.jpg

Am i able to reference local files while the server is running? I'm definitely in my 'stumble around until I find a solution' stage of Electron and Node in general so hopefully this is something that is easy to circumvent.

[tukavic]

Hi Kyle,

I'm actually having the same issue trying to reference image references. Were you able to find a solution to the http://localhost:8080 issue?

[prashantviga]

I'm actually having the same issue trying to reference image references. Were you able to find a solution to the http://localhost:8080 issue?

Hi Kyle, I was able to work around this issue. Instead of referencing the image directly using it's local source ( <img src='../all_images/some_img.jpg'></img>). Do something like this to import images (assuming you are working with multiple images).

function importAll(r) {
  let images = {};
  r.keys().map((item, index) => { images[item.replace('./', '')] = r(item); });
  console.log('all images', images)
  return images;
}
let images = importAll(require.context('../all_images/', false, /\.(gif|jpe?g|svg)$/));
export default images

and import this component and use the individual image.

You can use something like - src={images['some_img.jpg'] == undefined ? null : images['some_img.jpg'].default}