image folder not moved when running "npm run dist"

[codeofsumit]

Somehow after I run npm run dist, the src/images folder isn't moved to dist. Any idea how I could make this happen?

[sthzg]

@codeofsumit by default, the generator will not copy those files. When images from the src/images directory are required inside of a component, they are configured to be piped through the url-loader. This will create a data-url of the asset as long as it is smaller in size than 8192kb. If they are larger, they will be handled by the file-loader instead. When for example building the dist version of a vanilla setup, the Yeoman logo will be built into the dist/assets/ directory with a filename of its MD5 hash.

If you wish to add more file system based copy operations on npm run dist you could modify the copy run script in package.json.

Please let me know if this addresses your question appropriately or if you see different problems/bugs when running npm run dist.

[wayearn]

@codeofsumit You can modify your package.json add this:

"copy": "copyfiles -f ./src/*.html ./dist && copyfiles -f ./src/image/* ./dist/img && echo 'all dist copied.'",
"build": "npm run clean && npm run dist"

use build command to clean your dist and copy /src/image to /dist/img

[codeofsumit]

thanks @kanlidy that worked although I don't do the clean because it deletes the built JS files before copying over the files. Also I had to do ./src/images/* ./dist/images because if the folders don't match, the paths I specified inside my app aren't correct anymore.

Why are simple images in this build script such a hassle or am I missing something critical?

[sthzg]

@codeofsumit IMO that depends on how you use the images. If you require/import, then the build-step will inline or copy them over to dist/assets/<md5-hash>.<ext> (or however the webpack config may be modified by the developer) automatically.

import React from 'react';

let yeomanImage = require('../images/yeoman.png'); // will be built in `dist/assets/<md5hash>.png`

class AppComponent extends React.Component {
  render() {
    return (
      <div className="index">
        <img src={yeomanImage} alt="Yeoman Generator" />
      </div>
    );
  }
}

If I understand your use case, you are referencing an image by some path name and would have assumed that src/images gets copied over to somewhere inside the dist directory (e.g. dist/images) automatically?

<img src="/images/foobar.jpg" />

I would argue that extending the copy run script in package.json is quite an easy and direct way to modify which assets are copied over (and where to), plus the developer stays in full control and may likely do further customizations anyways.

In your use case, is there a particular reason why copying the complete directory is preferred over requiring/importing them inside the component?

[sthzg]

@codeofsumit I got your reply via e-mail and I think you absolutely make a good point there.

@weblogixx what is your opinion on adding a new directory src/static to the template and simply copyfile that over to the dist build (I would propose dist/static for its destination). It can house everything from favicons to fonts to, as @codeofsumit mentioned in the reply, static assets that are used in (external) css files as well as vendor libraries that are used out-of-band.

Of course developers are free to use it or not, as there are webpack loaders for any of them, but especially when coding in a hybrid environment that makes lot a of sense in my opinion.

If you are positive on it I would create one ticket on the template and a new ticket here on the generator so that we could push it in one after the other.

[codeofsumit]

@sthzg sorry I removed my comment as I had the problem with another generator not yours. It's a general webpack issue so I removed the comment from here again as you can't really change it I guess. I'm still wrapping my head around webpack and it's concepts and configs so I'll figure something out ;)

[weblogixx]

Hi @sthzg,

I see the usecase for hybrid environments, too. Should be ported to v2 only I think (at least if you are not willing to update the docs for v1 ;)). Another thing to think about is the usage of url- vs file-loader in the template. We are currently inlining most stuff (there is a big file limit set for the file-loader). I do not know if this is a stable default, because it also adds to the final builds size without changing anything in images and there like. Will think about it and report back.

[sthzg]

@codeofsumit we've updated the template behind this generator, so that the next major version provides a new directory src/static, which will be recursively copied over to the dist build as is. Until its release (which depends on a stable Webpack 2, which is out of our influence), modifying the copy run script yourself will be the valid workaround.

I am closing this issue for now, if you have further questions feel free to re-open and comment it anytime.