Re: How to serve minified React with Cherrypy?

On 17May2019 17:48, Edvin Beqari <[email protected]> wrote:
>I posted this question on Stack Overflow but then I found this group.
>Here is a link to my question with all the details:
>https://stackoverflow.com/questions/56195059/how-to-serve-minified-react-with-cherrypy

It is generally polite to post the whole question here. So that people 
don't need to go elsewhere and also so that the list archives have 
plenty of context when people do searches.

>As I explain in my question, I tried to embed the* index.html* fromt he
>react-app in the server *index.html* as explained in the docs.

What you're doing seems a little complex (as does _every_  bloody web 
tutorial I've seen about this stuff). Let me describe what I'm doing, 
since I'm making a ReactJS web app with a Python backend. My backend is 
Flask instead of CherryPy, but the approach should map across very 
directly.

I've got a Flask app with the "/" endpoint returning an index.html 
template which looks like this:

  Web Application Title
  <hr>
  <link href="{{ url_for('static', filename='app.css') }}" rel="stylesheet" type="text/css" />
  <div id="app-top-div"/>
  <script src="{{ url_for('static', filename='app.js') }}"></script>

After you expand the template that just links in an app.css for style 
and an app.js for the JavaScript application. You could as easily use a 
static bit of HTML without the template.

We'll ignore the app.css, it is just static CSS content.

Like app.css, app.js is physically stored in static/app.js in the Python 
app - put it wherever static files go in your CherryPy app. It is 
compiled from the source app.js and the node_modules using browserify.

The source app.js just starts like this:

  var React = require("react");
  var X = console.log;
  var J = JSON.stringify;
  var ReactDOM = require("react-dom");
  var Form = require("react-jsonschema-form").default;
  var rp = require("request-promise");

and underneath that the application javascript. X() and J() are just 
shorthands to aid debugging.

So, to the static/app.js file. I build it like this:

  browserify -t [ babelify --presets [ react ] ] app.js >path/to/static/app.js

So (a) I'm using browserify instead of webpack and (b) it isn't minified 
(this aids debugging when I'm lucky).

Browserify is just a symlink to node_modules/browserify/bin/cmd.js, and 
my local node_modules is maintained with yarn.

This might let you simplify your setup and help figure out what webpack 
is unhappy about. Or browserify might have a minify mode - I haven't yet 
checked.

Cheers,
Cameron Simpson <[email protected]>

-- 
You received this message because you are subscribed to the Google Groups "cherrypy-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to cherrypy-users+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/[email protected]
To post to this group, send email to cherrypy-users-/JYPxA39Uh5TLH3MbocFF+G/[email protected]
Visit this group at https://groups.google.com/group/cherrypy-users.
To view this discussion on the web visit https://groups.google.com/d/msgid/cherrypy-users/20190519030226.GA7674%40cskk.homeip.net.
For more options, visit https://groups.google.com/d/optout.