Как получить файл CSS в HTML в серверной части рендеринга ReactJs? - PullRequest
Новая
       2

Как получить файл CSS в HTML в серверной части рендеринга ReactJs?

0 голосов
/ 08 октября 2018

Я выполняю рендеринг на стороне сервера для своего React JS App. Но я не могу загрузить .css и изображения в html-файл.

Моя структура каталогов 

build
public
 index.html
 styles.css
 fav.png
src
 client
  client.js
 index.js
webpack.js

my index.htmlfile 

<html>
<head>
  <title></title>
  <link rel="shortcut icon" href="%PUBLIC_URL%/fav.png">
  <link rel="stylesheet" type="text/css" href="./styles.css" />
</head>
<body>
 <div id="root"></div>
</body>
</html>

мой файл index.js (файл сервера) 

import express from 'express';
import React from 'react';
import { renderToString } from 'react-dom/server';
import Home from './client/components/MyHome';
import path from 'path';
import fs from 'fs';
import Transmit from 'react-transmit';
import {createStore, applyMiddleware, compose} from 'redux';    
import reducers from './client/reducers';    
const store = createStore(reducers)

function handleRender(req, res) {
  Transmit.renderToString(Home).then(({reactString, reactData}) => {
    fs.readFile('./public/index.html', 'utf8', function (err, data) {

      const document = data.replace(/<div id="root"><\/div>/,
      `<div id="root">${reactString}</div>`);

      res.send(document);
    });
  });
}

const app = express();
app.use(express.static(path.join(__dirname, 'public')));
app.get('*', handleRender);
app.listen(3000, () => {
    console.log('Listening on port 3000');
});

загрузка css на webpack.js 

{
    test: /\.css$/,
    use: ExtractTextPlugin.extract(
     { fallback: 'style-loader', use: [ 'css-loader' ] }
   ) 
 }

Проблема в том, что я запускаю свое приложение, это не загруженные файлы CSS и PNG.

Ответы [ 2 ]

0 голосов
/ 08 октября 2018

То, как вы включили CSS, не будет работать.Предположим, вы поместили файл style.css в папку с именем Styles в корневой каталог и в корневой каталог у вас есть индекс точки входа сервера.js.

Вы должны сначала разместить этот каталог как статическую папку. Для этого добавьте следующую строку в ваш index.js 

app.use("/Styles", express.static(path.join(__dirname, './Styles')));

Это позволит вам получить доступ к файлам внутриэтот каталог после хостинга

вы можете получить доступ к файлу с помощью URL 

 http://localhost:3000/Styles/styles.css

Добавить этот URL к вашему html 

<link rel="stylesheet" type="text/css" href="http://localhost:3000/Styles/styles.css">
0 голосов
/ 08 октября 2018

внести это изменение в HTML-файл 

    <link rel="stylesheet" type="text/css" href="styles.css">
...