react-flask | Starter repo | Frontend Framework library

Just for learning purpose, I am trying to establish a connection between react and flask with SOCKET.io to get real time updates.

But, sadly I am not able to establish a connection between client socket.io to sever socket.io till now.

I followed several blogs and explored GitHub issues, but none of them had helped me.

Codes

1. React codes

I've seen that there are already posts on this subject but despite the attempts I still can't do it.

I want to launch nginx via an AWS ec2. When downloading nginx I didn't have the sites-enabled and sites-workable folders, so I followed the instructions here (nginx missing sites-available directory) by creating the files and adding the include line in the http of nginx.config. I also created the symbolique link.

But without success... I have the following error when i restart the server with sudo /etc/init.d/nginx restart

"Starting nginx: nginx: [emerg] unknown directive "listen:" in /etc/nginx/sites-enabled/react-flask-app.conf:2"

This is my /etc/nginx/sites-enabled/react-flask-app.con file:

This might sound simple, but I have this problem.

I have two docker containers running. One is for my front-end and other is for my backend services.

these are the Dockerfiles for both services.

front-end Dockerfile :

I am having troubles to identify why I can't import CSS-in-JS easily in a simple React-Flask project. For sake of simplicity, I am not using either Webpack, Babel or NPM (I want to understand React in a simple way first). The structure of the files is the following:

I'm a React newbie attempting to learn how to integrate a Flask app with React. I'm finding that whenever I make changes to my React .js files, the changes are being recompiled in my bundle.js but not appear in my browser.

To replicate, clone the source code from this Github repo. Follow the instructions to set up, and make sure to run webpack --watch and python app.py from a virtual environment. It should start up a simple web server accessible at localhost:5000.

You should get this screen when visiting on Chrome:

Next, go into your Hello.js file and make some random edits- for example, change Hello World! to Hello everyone!. From what I've learned, webpack --watch should take care of listening to changes and recompiling, which it does: if you go into bundle.js you'll see that the changes have been recompiled: