React-redux-starter-kit: I want to take the frontend part and serve it on a Python (tornado) server. Any idea how I'd start decoupling this from the nodejs server?

[vladiibine]

Hi,

First of all, thanks for the repo, it rox. I'm a backend guy, and wanted to try react for a long time, and these starter kits get me up to speed faster.

I'm basically a noob on frontend, so wanted to ask, how I could decouple the frontend part, from the backend one.

I tried to serve the index.html from a simple server, but that doesn't do the trick. I notived something adds extra links in index.html before serving. This is as far as I can tell related to these messages in the console:

webpack built 41107f65a2fa9e870671 in 4336ms
Hash: 41107f65a2fa9e870671
Version: webpack 1.14.0
Time: 4336ms
                                Asset       Size  Chunks             Chunk Names
          app.41107f65a2fa9e870671.js     809 kB       0  [emitted]  app
    1.counter.41107f65a2fa9e870671.js    24.9 kB       1  [emitted]  counter
       vendor.41107f65a2fa9e870671.js     390 kB       2  [emitted]  vendor
      app.41107f65a2fa9e870671.js.map     967 kB       0  [emitted]  app
1.counter.41107f65a2fa9e870671.js.map    30.4 kB       1  [emitted]  counter
   vendor.41107f65a2fa9e870671.js.map     461 kB       2  [emitted]  vendor
                          favicon.ico    24.8 kB          [emitted]  
                           index.html  607 bytes          [emitted]  
Child html-webpack-plugin for "index.html":
         Asset    Size  Chunks       Chunk Names
    index.html  578 kB       0       

My idea though is that I shouldn't need node.js for running the frontend, so if you have some suggestions of how I'd start to decouple this mess, it would help. Of course, probably I will figure it out on my own, but I thought you might have a kind heart and help a poor developer fellow :)

Thanks!

[vladiibine]

Oh, and of course, I don't need instructions regarding the Python/tornado stuff. I'm only new to frontend/ nodejs.

[jacobpenny]

npm run deploy:prod will compile the app such that it doesn't depend on the node server and will place the files in the dist/ directory.

So for example you could do:

npm run deploy:prod
cd dist/
python -m SimpleHTTPServer 8001

And the app will be available at localhost:8001.

[vladiibine]

Awesome. Thanks a lot! Ill close the isue tonight when ill test the flow

[robertzas]

Try deleting the node_modules folder in the root of your project and do npm cache clean (delete your ~/.npm folder). Then run npm install and npm run deploy:prod. This is the general purpose npm troubleshooting "power-cycle"

[vladiibine]

@robertzas I'd say your answer probably worked. I say probably, because while now all my problems are gone, I keep feeling like I get inconsistent behavior. For instance, previously I couldn't get the /counter page to work. The browser was doing some kind of request to the server, which didn't have the ./counter file. Then, after installing another static-file server, namely node's http-server, the project worked. But funny enough, it then worked even with the python server. Any idea what could be going on?

Would if have been possible that I had a very old ~/.npm folder? I kept deleting my node_modules, because i figured that's how node installs a project, but i never bumped into ~/.npm

Anyway, thanks a lot guys! You've made my first hardcore frontend experience much less painful :)

[robertzas]

@vladiibine What you're probably experiencing is a routing issue. I use this kit as the client with a dot net core kesteral server and have to create a default route that sends everything to the index view except api/, login/, etc routes on the actual server (and don't use them on the client). I'm guessing what's happening is you're going to /counter and the server tries to call your server's /counter route, and not the react-router /counter route.

I'm not sure what the problem was with your /.npm, that's where npm caches packages and I'm guessing it sometimes gets corrupt. Probably 75% of my npm issues are resolved this way.

[vladiibine]

@robertzas Spot on man! :D I was indeed having the issue that I could navigate to all my links, starting from the home page, but I could never just load the links directly.

Anyway what I did was follow the tutorial for the react-router, and when I got to this lesson (https://github.com/reactjs/react-router-tutorial/tree/master/lessons/11-productionish-server) I realized the exact thing that you're saying: I simply must redirect all the requests to a default route. Anyway, I don't yet exactly grok how this works, but It's part of the complete answer to my question.

Thanks a lot for the help!

[abzfarah]

@jacobpenny Any idea how I can use sourcemaps? The deploy scripts generates minified files. I would like to use this frontend on another server, while being able to debug files.