CSS, LESS and media files location

octaviodegodoy commented 6 years ago

Hi, deployed your code, but I cant see where do I put the media files, css, less files styling.

Babazon commented 6 years ago

Hello This boilerplate (webpack config) has not been set up for style and media files yet (loaders, and html style tag injection). I will take a look at it when I have some spare time.

aimarjs commented 6 years ago

would be awesome to see some this :)

Babazon commented 6 years ago

Added the ability to have a styles.css for now. Static; no cache-busting for it yet.
Will add SCSS, Less, Postcss loaders, AND media (images) later.

Just put your styles in styles.css for now. If you want more css files, don't forget to import them in app.js.

aimarjs commented 6 years ago

Awesome! Thanks!

aimarjs commented 6 years ago

I managed to add cache-busting for css but i'm not sure if its best possible way, but it works. Added also CSS modules with autoprefixing support, works also :)

webpack.base.js

const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    module: {
        rules: [
            {
                test: /\.js?$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                exclude: /node_modules/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                        'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
                        {
                            loader: 'postcss-loader',
                            options: {
                                config: {
                                    path: './postcss.config.js'
                                }
                            }
                        }
                    ]
                })
            }
        ]
    },
    plugins: [new ExtractTextPlugin('css/[name].[chunkhash].css')]
};

postcss.config.js

module.exports = {
    plugins: {
        autoprefixer: {
            browsers: ['last 2 versions']
        }
    }
};

renderer.js

export default (req, store, clientScriptNames) => {

    const cssOutput = clientScriptNames => {
        const bundles = clientScriptNames.bundle.css;
        return `<link rel="css/stylesheet" href="${bundles}">`;
    };

// rest of the script

renderer.js added ${cssOutput(clientScriptNames)} to head section

const html = `
    <html>
      <head>
    <title>Domeca</title>
    ${cssOutput(clientScriptNames)}
     </head>
      <body>
        <div id="root">${content}</div>
     <script>
        window.INITIAL_STATE = ${serialize(store.getState())}
     </script>
        ${scriptOutput(clientScriptNames)}
      </body>
    </html>
  `;

After this css modules and working like supposed to but still i have one issue i cant figure it out. For some reason css file is not being pushed down to network.

Any ideas?

Cheers!

aimarjs commented 6 years ago

Oh.. i think i know why. I have my css bundle under the same object in webpack-assets.json file

{
  "bundle": {
    "js": "js/bundle.a6d76a620cd6e8a1b2df.js",
    "css": "css/bundle.a6d76a620cd6e8a1b2df.css"
  },
  "vendor": {
    "js": "js/vendor.80e5dbca7b92eb903b51.js"
  },

if i update my css, js and manifest bundle will be deleted but its not the issue as this should be build for production package not running dev environment anyway. Dev should run on memory over webpack-dev-server.

aimarjs commented 6 years ago

Nevermind, my silly mistake. My stylesheet head link was wrong :).

should be return <link rel="stylesheet" type="text/css" href="${bundles}">;

not return <link rel="css/stylesheet" href="${bundles}">;

Now css bundle is sent nicely to browser from server side.

Babazon commented 6 years ago

Sounds great! I wasn't able to achieve that in the two hours I spared for the task :)

You are free to submit a PR!

Babazon / ServerSideRenderingBoilerplate

CSS, LESS and media files location #1