React-redux-starter-kit: Serve static assests

[javidhsueh]

I'd like to know how to serve static assets like png/jpg, and how to structure them in the right folder.

[johnjerrico]

Hi I'm having similar issues, any updates ?

[davezuko]

Hey, I'm currently traveling so I haven't had much of a chance to sit down and think of a thoughtful response. I'll try to get back to you early next week; sorry for the delay.

[johnjerrico]

hi dave, thanks for your reply.. really great starter pack; I'm just lost on how to put the images that my css needs.. been trying for days with no progress

[jurekbarth]

@johnjerrico it's not a perfect answer, but you can just put them in your src directory for development. For example put your image in src/assets/image.png and then it's available under http://localhost:3000/assets/image.png. Hope this helps for now :)

[johnjerrico]

hi thats the thing, it's not working .. I meant the browser complains that the css looking for an image that is not exist in the webpack-dev-server .. however I do find that when I don't use my mac (I use windows instead) the issue resolve itself .. I just put all the assets under the style folder and it work; I wonder why it can't find the image; i'm using url-loader btw ..

[johnjerrico]

update .. hmm it turns out that it's because I put
sassLoader : { includePaths :[paths.src('styles'),paths.project('node_modules') + '/compass-mixins/lib', paths.project('node_modules') + '/susy/sass'] }
sorry for the trouble

[davezuko]

Does includePaths default to the current file directory if no files are found in the paths from includePaths? I haven't used the starter kit yet to load any non-JS/Sass, so this is definitely something that I need to look into in a bit more detail.

[davezuko]

@johnjerrico so is it working for you now?

@javidhsueh If you're just wanting the assets to be served, I'd suggest something similar to what @jurekbarth mentioned (putting them all under /assets), and that way you could configure your server to treat those as static assets. As far as how to do that with webpack I'm not quite sure as I've never done it, but I will play around with it today now that I finally have some time. Maybe take a look at http://stackoverflow.com/questions/26203725/how-to-allow-for-webpack-dev-server-to-allow-entry-points-from-react-router where the example demonstrates using express as a proxy to serve the assets.

[patrickheeney]

I am still in the process of figuring out the best way to do this. I spent about a day yesterday trying to modify the starter-kit to use webpack middleware instead of webpack dev sever as you can then use express and easily mock apis, proxy, serve assets, etc without dealing with multiple ports. If this is something that could be introduced into starter-kit I would happily submit a PR?

[jurekbarth]

@patrickheeney would be really cool to move to webpack middleware as it is more flexible, than webpack dev server alone. Do you have a link to your codebase?

[JuoCode]

I do this when development:

// /bin/webpack-dev-server.js
require('babel/register');

var path = require('path');
var express = require('express');

const chalk     = require('chalk');
const devServer = require('../build/webpack-dev-server');
const config    = require('../config');

const host = config.get('webpack_host');
const port = config.get('webpack_port');

devServer.use(express.static(path.resolve(__dirname, '../public')));

devServer.listen(port, host, function () {
  console.log(chalk.green(
    `webpack-dev-server is now running at ${host}:${port}.`
  ));
});

In production environment, I think just move /public dir into /dist and place them into nginx's root

[patrickheeney]

@jurekbarth Its not open source yet unfortunately.

@JuoCode In my case I have a full express server running during dev and just wanted to add webpack too it. However it could probably work that way by having webpack setup the dev server and passing that into my server bootstrap instead of creating a new instance. Not sure if that would have any side affects yet.

[davezuko]

@patrickheeney that'd be awesome to move to the middleware since it's a lot more flexible for people wanting to extend the starter kit. I don't want to get too much more into it than just setting up the dev server, but if you'd like to submit a PR I think a lot of people would benefit from that setup.

[micky2be]

@patrickheeney I will also need to move to webpack-middleware as it will provide me a base to build prototypes.
Would be great if you could provide something asap.

[johnjerrico]

hi @davezuko it's due to my 'susy/sass' folder; thanks for your help. . looking forward for the middleware, sounds awesome;

[patrickheeney]

Just opened #202 with the middleware solution.

[jurekbarth]

@patrickheeney works like a charm! Already using and loving it.

[davezuko]

@patrickheeney thanks so much for the PR, it's been merged. I'll keep this ticket open for a little while longer in case it helps other users.

[davezuko]

I'll be pulling this into the general FAQ / Resources issue (here: https://github.com/davezuko/react-redux-starter-kit/issues/221) so that it can still remain helpful for people but not pollute the issue tracker. Thanks again.

[swissarmybox]

Whats the conclusion here on how to add static assets?

[sethreidnz]

Yes where would I put the my assets folder and is there any config for me to get it to work? I don't quite understand the solution here.

[patrickheeney]

Now that the starter-kit is running a standard express server, it follows the same conventions as they would be done natively with express. By default it looks to be serving the ~dist. You can also learn more here: http://expressjs.com/en/starter/static-files.html.

[sethreidnz]

I'm speaking in terms of doing it in development. I will be using a different server completely for production so that's not an issue. In the app.js file it looks as though it is using the config from _development.js ultimately becuase if you just run npm start your NODE_ENV will be development and you will hit this sction of code (not the dist folder part):

if (config.env === 'development') {
  const webpack       = require('webpack');
  const webpackConfig = require('../build/webpack/development_hot');
  const compiler      = webpack(webpackConfig);

  app.use(require('./middleware/webpack-dev')({
    compiler,
    publicPath : webpackConfig.output.publicPath
  }));
  app.use(require('./middleware/webpack-hmr')({ compiler }));
} 

So the path is what is set as the publicPath which is

compiler_public_path : `http://${config.server_host}:${config.server_port}`

I don't quiet understand where I put my image files to make it work for example if I simply want to have a tag like this in one of my templates:

<a href='/' className='header-brand'><img src='assets/logo.png'/></a>

Where do I put my assets folder?

[davezuko]

@justsayno this will be changing in the near future once I implement a --hot CLI flag, which will allow you to use the express server for static assets as normal in development mode. I'm off for the rest of the night, but I'll read through all these comments tomorrow and hopefully offer a better response.

[mtsr]

Personally I feel assets belong in the folder of the component using them. If you set up your web pack url-loader correctly, it will not duplicate the same file that occurs in multiple components, so caching isn’t broken.

On 11 Dec 2015, at 01:25, Seth Reid [email protected] wrote:

I'm speaking in terms of doing it in development. I will be using a different server completely for production so that's not an issue. In the app.js file it looks as though it is using the config from _development.js ultimately becuase if you just run npm start your NODE_ENV will be development and you will hit this sction of code (not the dist folder part):

if (config.env === 'development') {
const webpack = require('webpack');
const webpackConfig = require('../build/webpack/development_hot');
const compiler = webpack(webpackConfig);

app.use(require('./middleware/webpack-dev')({
compiler,
publicPath : webpackConfig.output.publicPath
}));
app.use(require('./middleware/webpack-hmr')({ compiler }));
}
So the path is what is set as the publicPath which is

compiler_public_path : http://${config.server_host}:${config.server_port}
I don't quiet understand where I put my image files to make it work for example if I simply want to have a tag like this in one of my templates:

Where do I put my assets folder?

—
Reply to this email directly or view it on GitHub.

[sethreidnz]

@mtsr I'm pretty new to webpack. Can you tell me if I need to do anything other than the standard setup in this starter? IE:

      { test: /\.woff(\?.*)?$/,  loader: "url-loader?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=application/font-woff" },
      { test: /\.woff2(\?.*)?$/, loader: "url-loader?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=application/font-woff2" },
      { test: /\.ttf(\?.*)?$/,   loader: "url-loader?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=application/octet-stream" },
      { test: /\.eot(\?.*)?$/,   loader: "file-loader?prefix=fonts/&name=[path][name].[ext]" },
      { test: /\.svg(\?.*)?$/,   loader: "url-loader?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=image/svg+xml" },
      { test: /\.(png|jpg)$/,    loader: 'url-loader?limit=8192' }

[mtsr]

@justsayno The final loader in that list will pretty much handle all your default image use cases. Any images you put in components and <img src={require('some image.png')} /> will be included as data-url if small enough, and repackaged and given a content-hash name and put into the dist folder, when building. Try a npm run compile to see the results.

[sethreidnz]

@mtsr Thanks for that. Will this also work in development mode as well? EG if I add an image like you mention there it will show up when using npm start

[sethreidnz]

@mtsr thanks. I understand now. As you may have guessed I am new to the Webpack stuff and this workflow is a bit different to say a gulp/grunt type one. I like it a lot but just getting my head around it.

[davidsteinberger]

I'm not able to get the starter kit to serve misc. static assets. Has anyone a working example that I could look at?

[davezuko]

@mtsr I was talking to @justingreenberg about static assets such as robots.txt and favicon and what-have-you. He mentioned putting these in something like ~/src/assets and then using the file-loader so webpack pulls them over...

My only final question with this, and maybe you've incorporated this into your workflow: where are those imported? Are those imported in CoreLayout or app.js or somewhere else? Since at some point you do have to tell webpack about them.

[davidsteinberger]

AFAIK, placing them in the src-folder will only make webpack serve them if you require those in some component: src/assets/image.jpg -> <img src={require ('assets/image.jpg')} />.

But how can I make the starterkit serve assets referenced in *.css files?

[mtsr]

Nope, sorry, haven’t tried that yet.

My issue with a static assets folder, though, is that people could end up putting other files in there, that really should be require()d where they are used, instead.

On 14 Dec 2015, at 16:51, David Zukowski [email protected] wrote:

@mtsr I was talking to @justingreenberg about static assets such as robots.txt and favicon and what-have-you. He mentioned putting these in something like ~/src/assets and then using the file-loader so webpack pulls them over...

My only final question with this, and maybe you've incorporated this into your workflow: where are those imported? Are those imported in CoreLayout or app.js or somewhere else? Since at some point you do have to tell webpack about them.

—
Reply to this email directly or view it on GitHub.

[davezuko]

@mtsr how do you deal with the aforementioned assets then? Take robots.txt for example.

[mtsr]

@davidsteinberger url()s in css are handled by the url-loader.

@davezuko I don't, yet...

[justingreenberg]

@davezuko since robots.txt is not bundled it could just be copied to build target in production

file-loader can be used to import or require and bundle, but can also just copy files as well using a query ie file?name=[path][name].[ext]?[hash]&context=/src/static, i am running out for a couple of hours but i can provide a more detailed explanation when i get back to my desk

[patrickheeney]

Other starter-kits typically copy the assets from /src/static to dist/assets on sever start. Express then runs the serve static on the dist/assets. You generally don't use webpack, hot-reloading, etc as you are dealing with favicons, robots.txt, etc. I assume you link to them in your app like any other file asset, but point to the local path: assets/robots.txt (however these are likely just links in your index.html as they are static).

[patrickheeney]

I opened #305 to demonstrate this. To test hit http://localhost:3000/robots.txt. If you want to add an icon for example, add it to static/icon.png then add this to index.html: <link rel="apple-touch-icon" href="icon.png">. They are served at root level so if you add a folder like static/assets/file.txt then the relative path should be /assets/file.txt. All assets that should be served by your web server should go there. All app related assets should be handled by webpack and the various loaders.

[davidsteinberger]

Thanks @patrickheeney!

[davezuko]

@justingreenberg as far as:

file-loader can be used to import or require and bundle, but can also just copy files as well using a query ie file?name=[path][name].[ext]?[hash]&context=/src/static

Totally makes sense, 100% on board. My problem is: _where_ is that require statement that defines the query? If it's inside of app.js or something similar then that seems slightly odd.

[patrickheeney]

You would likely need https://github.com/ampedandwired/html-webpack-plugin or something similar. Basically your index.html would be a template that you could require your icons, etc. (Not sure about robots.txt? as that would need to just be copied). So in theory you build the index.html, it requires the assets, you also have a secondary process to copy over any extra static assets. Then finally it gets served.

One thing to note I am using this starter kit as a client and a server, so I would want to make sure the final package and all assets can be served by express.

[patrickheeney]

Looks like this is already in the project, so maybe a helper function to read from a dir and run this https://github.com/ampedandwired/html-webpack-plugin/blob/master/index.js#L152.

[justingreenberg]

@patrickheeney :+1: script paths could also be added to index.html as part of build using inject: true

@davezuko i would just point out that you don't need a declarative require, for example you could bind the file-loader directly to the static directory, ie using regex or the main config file

i've been swamped since sunday, hopefully i can carve out a few mins tonight to dig into this sorry guys

[davezuko]

@justingreenberg I've been trying to get that to work w/o any success, so if you have a chance to submit a PR I'd really appreciate it.

Also, since those files would only be copied over upon compile, I'd imagine those assets wouldn't be available during live development.

[justingreenberg]

@davezuko webpack-dev-middleware _should_ handle those files... anyway, the file loader would really just be used for assets outside the dev lifecycle, like robots.txt, sitemap.xml, etc. other statics like images would be handled by url-loader... this is on my todos i'm just trying to find the time!

[Mas-Tool]

I also had a problem serving static files while running in live development.
I ended up editing the server/app.js and removing the "if (config.compiler_enable_hmr)"
so the line below will be execute even on hmr mode.
app.use(express.static(paths.base(config.dir_dist)))

[jessep]

@Mas-Tool Thanks, that worked for me.

[davezuko]

You can now just use ~/src/static for these files without the need for an extra folder in the project root. These files will be copied over to the root of ~/dist upon compilation, and I added a temporary workaround in the express server so that they are also served during live development. https://github.com/davezuko/react-redux-starter-kit/pull/338 for relevant commits.

[netpoetica]

If I run compile and then serve that dist directory, the static assets are properly served without any issue. However, the webpack dev server fails to display images in src/static. If I write a .scss file with a rule

a {
  background: url(/img/myimg.png);
}

There will be no error, like 404 for example, but there will be no image. I imagine this is because the request of coming from this blob%3html:// protocol that the CSS is being served on, and probably that protocol isn't producing any errors.

Anyone ever come to figure out how you're supposed to use images with this boilerplate, have a recommendation, or ideally, a quick guide on adding images? Someone should really put an img in HomeView.scss so there is an example of how this is done right off the bat.

[davezuko]

@netpoetica I will try to get an example in and tweak any existing issues. I admit this isn't something I haven't put as much time into as I'd like for the starter kit, so apologies for the trouble.

[netpoetica]

@davezuko No need to apologize amigo, this is a very useful and thoughtful project. I have to confess though that working with this starter kit I have spent equally as much time thinking about quitting development to become a farmer as I have thinking about how awesome some of the features are :-)

Between this thread and this other one, I was able to sort out that I can have two directories - one static/img and one assets/img. In my HTML, I use /img/my-img.png in src tags for example, but in my .scss file, the url() value sort of acts like "require" so that the blob protocol properly handles this in the dev server. I think this still leads to an issue where static assets served from dist/ would not be properly located though, but it is workable until I come up with something better.

[justingreenberg]

Someone should really put an img in HomeView.scss so there is an example of how this is done right off the bat.

@davezuko this is an excellent idea... maybe one below the url-loader limit (resolve to base64 inline) and one above (resolve url)? when i get a chance to review recent commits i will keep this in mind

[CreativeManix]

I am confused, not sure Where to put a static assets. I just want to load 'http://localhost:3000/xxx/image1.jpg' or via any URL.

Where to keep image1.jpg now?

Please help

[netpoetica]

@CreativeManix - I have a directory under src/ called "static"

src/
- static/
-- img/
---- Duck.jpg
- actions/
- components
.....etc

And then I have made some changes like so:

./src/styles/font-awesome/scss/_variables.scss:$fa-font-path:        "static/fonts" !default;
./src/views/HomeView.js:import DuckImage from 'static/img/Duck.jpg';

And I tell webpack to serve the static dir:

./server/main.js:  // Serve static assets from ~/src/static since Webpack is unaware of
./server/main.js:  app.use(convert(serve(paths.client('static'))));

and you can access the duck as

/img/Duck.jpg

Hope that helps!

Side note: in that import statement where I am importing Duck.jpg, clearly it is being loaded at build time and not actually served. However, with the changes to main.js, you will be able to access it via webserver.