sprite.png 404 (Not Found)

[joshuadiezmo]

sprite load as text/html, not png. help.

[vvasilev-]

Hey @ReverseFlash28!

Could you post more information about your setup? 😄

[joshuadiezmo]

when I run "npm run dist" it cannot create sprite.png on assets folder

[vvasilev-]

@ReverseFlash28 I understand that you have a problem but I can't help you without more details about your setup. What kind of build process do you use? What is your folder structure?

[joshuadiezmo]

its working on dev, but i cannot use it on production.

this is my folder stucture

and this is my config

var postcss = require('postcss');
var postcssSprites = require('postcss-sprites');
let path = require('path');

module.exports = {
  plugins: [
    postcssSprites({
      spritePath: path.join(__dirname, '/src/images'),
      basePath: '',
      spritesmith: {
        padding: 3
      },
      verbose: true,
      hooks: {
        onUpdateRule: function(rule, token, image) {
          var backgroundSizeX = (image.spriteWidth / image.coords.width) * 100;
          var backgroundSizeY = (image.spriteHeight / image.coords.height) * 100;
          var backgroundPositionX = (image.coords.x / (image.spriteWidth - image.coords.width)) * 100;
          var backgroundPositionY = (image.coords.y / (image.spriteHeight - image.coords.height)) * 100;

          backgroundSizeX = isNaN(backgroundSizeX)
            ? 0
            : backgroundSizeX;
          backgroundSizeY = isNaN(backgroundSizeY)
            ? 0
            : backgroundSizeY;
          backgroundPositionX = isNaN(backgroundPositionX)
            ? 0
            : backgroundPositionX;
          backgroundPositionY = isNaN(backgroundPositionY)
            ? 0
            : backgroundPositionY;

          var backgroundImage = postcss.decl({
            prop: 'background-image',
            value: 'url(' + image.spriteUrl + ')'
          });

          var backgroundSize = postcss.decl({
            prop: 'background-size',
            value: backgroundSizeX + '% ' + backgroundSizeY + '%'
          });

          var backgroundPosition = postcss.decl({
            prop: 'background-position',
            value: backgroundPositionX + '% ' + backgroundPositionY + '%'
          });

          rule.insertAfter(token, backgroundImage);
          rule.insertAfter(backgroundImage, backgroundPosition);
          rule.insertAfter(backgroundPosition, backgroundSize);
        }
      }
    }),
    require('autoprefixer')
  ]
}

[vvasilev-]

I think the problem is in your config. You should have spritePath: path.join(__dirname, '/dist/whatever'), instead of spritePath: path.join(__dirname, '/src/images'),. 😄

[joshuadiezmo]

yes, i already do that, then the problem is the dev,

it cannot load the sprite

[vvasilev-]

There is an easy fix for this, just pass a different path that depends on some env variable. I don't think that the problem is in postcss-sprites at all. How do you serve your files in dev/production?

[joshuadiezmo]

now the problem is when i use it on prduction, the path is have and /dist.

i just need /assets

[vvasilev-]

Please, set your CSS output folder to the stylesheetPath option. This way the plugin will generate the correct path to your spritesheet.

[joshuadiezmo]

i set it now, but i still have an error, it perfectly set to an assets but its not working.

i have sprite.png on my assets but it still an 404 Not Found

[joshuadiezmo]

i fix my issue by using express as my server for prod and did not use webpack on my production server

[joshuadiezmo]

This is my express server, i create separate index file for my production.

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

const app = express();

// Serve static assets
app.use('/assets',express.static(path.resolve(__dirname, 'dist', 'assets')));

// Always return the main index.html, so react-router render the route in the client
app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, 'dist', 'index.html'));
});

app.listen('8000',()=>{
  console.log('yowyow');
})

[vvasilev-]

Can you prepare a demo repo where I can test this?

[joshuadiezmo]

Sorry, my test project was on my office work computer. I will send you my test project on monday.