Как настроить загрузку картинок Express middleware?

Question

[Ninja Mate]

Наткнулся вот на это Express и пытаюсь заставить свою сборку работать с картинками
Вот файл devServer.js

app.use(require('webpack-hot-middleware')(compiler));

app.use('/static', express.static('public'));

app.get('*', function(req, res) {
  res.sendFile(path.join(__dirname, 'index.html'));
});

Ссылка на картинку <Image src="static/public/thumb.jpg" rounded />
Где я не прав почему к jpg путь не совпадает?
Правильно ли я в src размещаю public, ведь статик добавляется автоматически?

Comments

[Андрей Антропов]

Для сборки приложения используется webpack?

[Ninja Mate]

Андрей Антропов: да

[pomeo]

devServer.js где лежит, в корне приложения или в подпапке какой-то?

[Ninja Mate]

Sergey Ovechkin: в корне

[pomeo]

Ninja Mate: картинка у вас уже лежит в папке или её webpack у себя держит?

[Ninja Mate]

Sergey Ovechkin: в папе. сейчас уже в src (нужно конечно переделать). если посмотрите ответ Андрей Антропова чуть ниже, то там в комментариях моя версия прямо сейчас. но это ни к чему не обязывает. задача сделать среду разработки которая работает еще и с картинками и при сборке выдает bundle.js и папку с картинками

[pomeo]

Ninja Mate: если у вас лежит картинка в папке /public/thumb.jpg, то строка app.use('/static', express.static('public')); делает её доступной по /static/public/thumb.jpg точно. Здесь webpack вообще не учавствует.

[pomeo]

Ninja Mate: или попробуйте так например app.use('/static', express.static(path.resolve(__dirname, 'public')));

[Ninja Mate]

Sergey Ovechkin: \src\thumb.jpg Line 1: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)

[pomeo]

Ninja Mate: ошибка от webpack, а не express

[Ninja Mate]

Sergey Ovechkin: а мне никакой loader не нужен случайно? как для css к примеру

[pomeo]

Ninja Mate: вы там случайно уже AssetsPlugin не вделали и "import thumb from './thumb.jpg';" используете? Сделайте сначала без лишних переменных и так не в работающей формуле. Ваша изначальная проблема, что не доступен лежащий файл в папке по какой-то причине при определении папки в экспрессе. Webpack в этой проблеме не участвует никак. А в данный момент вы ещё ошибок от webpack намешиваете.

[Ninja Mate]

Sergey Ovechkin: да вы правы намешал конечно. но все исправил. Проблема та же при dev сборке нет public папки вообще. А если все собрать на продакшен, то конечно работает тк ссылка правильно показывает на картинку

[pomeo]

Ninja Mate: package.json покажите

[Ninja Mate]

{
  "name": "react-effort-tracker-boilerplate",
  "version": "0.0.1",
  "description": "A new Webpack boilerplate with hot reloading React components, and error handling on module and component level.",
  "scripts": {
    "clean": "rimraf dist",
    "build:webpack": "cross-env NODE_ENV=production webpack --config webpack.config.prod.js",
    "build": "npm run clean && npm run build:webpack",
    "start": "node devServer.js",
    "lint": "eslint src"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/daviscom/efforttrackerv2.git"
  },
  "keywords": [
    "react",
    "reactjs",
    "boilerplate",
    "hot",
    "reload",
    "hmr",
    "live",
    "edit",
    "webpack",
    "babel",
    "react-transform"
  ],
  "author": "Ninja Mate <[e-mail]> ",
  "license": "CC0-1.0",
  "bugs": {
    "url": "https://github.com/daviscom/efforttrackerv2.git/issues"
  },
  "homepage": "http://davisdotcom.com.au/efforttracker_wp/",
  "devDependencies": {
    "assets-webpack-plugin": "^3.3.0",
    "babel-core": "^6.3.15",
    "babel-eslint": "^5.0.0-beta4",
    "babel-loader": "^6.2.0",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babel-preset-react-hmre": "^1.0.0",
    "cross-env": "^1.0.6",
    "eslint": "^1.10.3",
    "eslint-plugin-babel": "^3.0.0",
    "eslint-plugin-react": "^3.11.3",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.13.3",
    "rimraf": "^2.4.3",
    "webpack": "^1.12.9",
    "webpack-dev-middleware": "^1.4.0",
    "webpack-hot-middleware": "^2.6.0"
  },
  "dependencies": {
    "react": "^0.14.7",
    "react-bootstrap": "^0.28.3",
    "react-bootstrap-datetimepicker": "0.0.22",
    "react-dom": "^0.14.3",
    "react-router": "^2.0.0"
  }
}

[Ninja Mate]

Sergey Ovechkin: вот он

Answer 1

[Vitaly Sivkov]

В ссылке на картинку public не нужно:
<Image src="static/thumb.jpg" rounded />

Ну и пути к папкам/файлам желательно прописывать через path:

var path = require('path');
app.use('/static', express.static(path.resolve(__dirname, 'public')));

Comments

[Ninja Mate]

такой вариан уже пробовал (еще раз попробовал снова). может дело в вебпеке?

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

module.exports = {
  devtool: 'cheap-module-eval-source-map',
  entry: [
    'eventsource-polyfill', // necessary for hot reloading with IE
    'webpack-hot-middleware/client',
    './src/index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  module: {
    loaders: [{
      test: /\.jsx?/,
      loaders: ['babel'],
      include: path.join(__dirname, 'src')
    }]
  }
};

В output: ничего про jpg не нужно прописать?

[Vitaly Sivkov]

Вполне вероятно, сложно сказать, не зная всей картины. Вы делаете сборку по какому-то туториалу? Пробовали без webpack запускать?

[Ninja Mate]

Vitaly Sivkov: нет не пробовал, задача через webpack. собирали сами и по туториалами и по русско-англ мату)))

[Vitaly Sivkov]

Посмотрите вот эту конфигурацию, возможно поможет.

Answer 2

[Андрей Антропов]

Так как для сборки используется webpack, то можно использовать AssetsPlugin

import thumb from './thumb.jpg';

<Image src={thumb} rounded />

Пак сам сконфигурироует путь и имя фаила, и из этого есть еще одно следствие класть ремурсы рядом с компонентами где они используются

Comments

[Ninja Mate]

Что то я делаю не так...

var AssetsPlugin = require('assets-webpack-plugin');
var assetsPluginInstance = new AssetsPlugin();

module.exports = {
  devtool: 'cheap-module-eval-source-map',
  entry: [
    'eventsource-polyfill', // necessary for hot reloading with IE
    'webpack-hot-middleware/client',
    './src/index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
      assetsPluginInstance
  ],
  module: {
    loaders: [{
      test: /\.jsx?/,
      loaders: ['babel'],
      include: path.join(__dirname, 'src')
    }]
  }
};

Файл в той же папке

import thumb from 'thumb.jpg';  <Image src={thumb} rounded />

А вот devServer. Только я понимаю что он уже не причем если использовать этот плагин?

var path = require('path');
var express = require('express');
var webpack = require('webpack');
var config = require('./webpack.config.dev');

var app = express();
var compiler = webpack(config);

app.use(require('webpack-dev-middleware')(compiler, {
  noInfo: true,
  publicPath: config.output.publicPath
}));

app.use(require('webpack-hot-middleware')(compiler));

app.get('*', function(req, res) {
  res.sendFile(path.join(__dirname, 'index.html'));
});

app.listen(3000, 'localhost', function(err) {
  if (err) {
    console.log(err);
    return;
  }

  console.log('Listening at http://localhost:3000');
});

[Ninja Mate]

ругается при старте на Uncaught SyntaxError: Unexpected token < на строчку <html lang="en">

[Андрей Антропов]

Мне кажется у вас не хватает описанеи babel лоадера для jsx фаилов

[Ninja Mate]

Андрей Антропов: Там оно) мне для картинок лоадер не нужен ?