Как подать миниатюрный React с Cherrypy? - PullRequest
Новая
       31

Как подать миниатюрный React с Cherrypy?

0 голосов
/ 18 мая 2019

Позвольте мне начать с того, что я новичок в обеих системах.Я начинаю класс машинного обучения, который интенсивно использует python - поэтому я подумал, что сервер Python с хорошим клиентом React будет фантастическим для документирования моего класса.

Первоначально:

  1. Установлено python и cherrypy
  2. Установлено create-react-app и создано образец приложения
  3. Попытка выполнитьcherrypy документация
  4. Построил react app и попытался встроить его в cherrypy index.html

Теперь в документах cherrypy не объясняется, как обслуживать минимизированныйreact приложение.Но я попытался использовать их пример и вставил react app в файл index.html.

Когда я запускаю приложение реакции-разработки - оно выглядит правильно - логотип вращается, и его стиль корректно

enter image description here

Когда язапустить его из cherrypy не так уж и много - приложение полностью статично - ничего не крутится или что-то еще

enter image description here

Вот мой server.py: 

import os
import os.path
import random
import string

import cherrypy

class Test:

    @cherrypy.expose
    def index(self):
        return """<!DOCTYPE html>
          <html>
            <head>
              <link href="/static/css/style.css" rel="stylesheet">
              <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
              <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
              <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
              <script> 
                $(function(){
                $("#root").load("static/js/index.html"); 
              });
              </script> 
            </head>
            <body>
              <div id="root"></div>
            </body>
          </html>"""

if __name__ == '__main__':
    conf = {
        '/': {
            'tools.sessions.on': True,
            'tools.staticdir.root': os.path.abspath(os.getcwd())
        },
        '/static': {
            'tools.staticdir.on': True,
            'tools.staticdir.dir': './public'
        }
    }
    cherrypy.quickstart(Test(), '/', conf)

Я считаю, что моя проблема в том, что я использую jQuery для загрузки index.html из минимизированного приложения реакции.Возможно, приложение работает, но не может найти пакет CSS.У меня нет ошибок в консоли.

Есть ли правильный способ сделать это?Большое спасибо

Edit

Я попытался использовать HtmlWebpackPlugin из здесь - и после долгих поисков я получил веб-пакет, чтобы связать один js файл.Тем не менее, я все еще получаю сообщение об ошибке в консоли.

webpack.config.js: 

const path = require('path');
const nodeExternals = require("webpack-node-externals");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const WebpackMd5Hash = require("webpack-md5-hash");
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  entry: { main: './src/index.js' },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[chunkhash].js'
  },
  target: "node",
  externals: [nodeExternals()],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: { loader: "babel-loader" }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.scss$/,
        use: ['style-loader',
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'sass-loader']
      },
      {
        test: /\.svg$/,
        loader: 'svg-inline-loader'
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({
      filename: 'style.[contenthash].css',
    }),
    new HtmlWebpackPlugin({
      inject: true,
      minify: {
        html5: true,
        collapseWhitespace: true,
        minifyCSS: true,
        minifyJS: true,
        removeScriptTypeAttributes: true,
        removeStyleLinkTypeAttributese: true,
        useShortDoctype: true
      }
    }),
    new WebpackMd5Hash()
  ]
};

package.json добавил эту строку: 

"build:bundle": "webpack --config webpack.config.js --mode production",

.babelrc: 

{
  "presets": [
    "@babel/preset-env",
    "@babel/react"
  ]
}

ошибка: 

main.f678c92d1daeff816ce7.js:1 Uncaught ReferenceError: require is not defined
    at Object.<anonymous> (main.f678c92d1daeff816ce7.js:1)
    at n (main.f678c92d1daeff816ce7.js:1)
    at Module.<anonymous> (main.f678c92d1daeff816ce7.js:1)
    at n (main.f678c92d1daeff816ce7.js:1)
    at main.f678c92d1daeff816ce7.js:1
    at main.f678c92d1daeff816ce7.js:1

Кроме того, я добавил require.js в качестве скрипта, но это тоже взрывается.

...