[universal-redux] public folder not public in dev mode

[0xsven]

Hi diego.

I am back on my side project and stoked to try the generator and storybook. The first thing to do is to clone the latest version of the universal-redux branch and manually copy my code over.

Unfortunately I can't get my fonts working (deja vu!). The public folder seems not to be public when running in dev mode.

Steps to reproduce:

1. Clone ARc and checkout branch 'universal-redux'
2. npm i && npm run dev
3. Open http://localhost:3000/icon.png in browser
   Result: 404 page

It works fine with production build (npm run build && npm run start)

[diegohaz]

Hey, @0xsven. The development assets on the universal-redux branch are only accessible through port 3001 (http://localhost:3001/icon.png).

You can create an assetsUrl property on config.js that points to localhost:3001 on development and to baseUrl on production;

That's not the better solution though.

As you can see on the express service line 29:

app.use(express.static(path.join(root, 'dist')))

Server uses the dist folder for public assets. That's why it only works after npm run build (even npm run dev works after that).

I think the best solution is to use dist/public based on the environment mode. Something like:

app.use(express.static(path.join(root, env === 'development' ? 'public' : 'dist')))

Please, tell me if it works for you. If yes, I would be glad to accept a PR.

[0xsven]

That solves it! Thank you.

#110

[diegohaz]

Fixed in #110 . Thank you, @0xsven

[retrospct]

I came across this while searching for more information on how to import and usage image assets on the universal-redux branch.

@diegohaz's line of code above worked for me as well.

Just to add if you would like to serve the same public folder while using Storybook in dev you can add ./public to your package.json "storybook" script.

{
     "scripts": {
        "storybook": "start-storybook -s ./public -p 9001 -c .storybook",
     }
}

Be aware, this means your components will no longer be completely isolated when it comes to the assets but not necessarily a bad thing if you have a reason for doing so.

[diegohaz]

@retrospct If this doesn't change the behavior of the current stories, I think it's ok and would accept a PR on master. 👍

[0xsven]

While @retrospct 's change solves it for images that are used in the actual component. It doesn't include global style injects like fonts. So all my components use the fallback font on my system.

I guess the easiest way would be to include the global styles in the component.stories.js file as well.

[diegohaz]

@0xsven I would just import the file that injects global styles on .storybook/config.js. Does this work?

[0xsven]

@diegohaz This helped. Thank you.

import App from '../src/components/App'

[retrospct]

@diegohaz I feel like some documentation on how asset imports work inside components and another for setting up storybook + SSR + client side to access the public folders and relative paths. I'd be up for working on a PR on detailing that out in the README.md I'll open one up when I get a chance this week.

I'm not quite sure what the "default" should be though, may be a discussion to decide on what that would be. Obvious candidate would be the default now.

[diegohaz]

@retrospct It would be very helpful. Writing documentation is what takes me the longest.