Reactjs create-react-app my-app backend integration

Question

I have created a basic app using create-react-app. I when I run my backend server (in python with flask), I serve the default index.html file:

from flask import Flask, render_template
app = Flask(__name__, static_folder='../web/public')

@app.route("/")
def index():
    return render_template('../web/public', 'index.html')

if __name__ == '__main__':
    app.run()

This is the index.html generated by create-react-app:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root">
    </div>
  </body>
</html>

When serving this file to a browser, it renders nothing obviously, the React app is only rendered when running npm start from the folder generated by create-react-app. How do I serve the actual app using my Flask backend server only?

I tried linking the index.js script:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

But the browser outputed Uncaught SyntaxError: Unexpected identifier On the line import React from 'react';

Basically, my question is how do I serve the React app using the Flask server only?

Patrick Hund · Accepted Answer · 2018-02-26 17:03:00Z

1

To use an application created with create-react-app in production, you run this command:

npm run build

This creates a JavaScript bundle that you can deploy to your server.

See documentation

answered Feb 26, 2018 at 17:03

Patrick Hund

20.4k12 gold badges71 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Reactjs create-react-app my-app backend integration

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related