Serving a front end created with create-react-app with Flask

import os from flask import Flask, send_from_directory app = Flask(__name__, static_folder=”react_app/build”) # Serve React App @app.route(“https://stackoverflow.com/”, defaults={‘path’: ”}) @app.route(‘/<path:path>’) def serve(path): if path != “” and os.path.exists(app.static_folder + “https://stackoverflow.com/” + path): return send_from_directory(app.static_folder, path) else: return send_from_directory(app.static_folder, ‘index.html’) if __name__ == ‘__main__’: app.run(use_reloader=True, port=5000, threaded=True) Thats what I ended up with. So bascially catch all … Read more

‘command not found: jest’

Jest is installed, but is likely in your ./node_modules/.bin directory. You can append that to your command ./node_modules/.bin/jest –updateSnapshot. Since you already have jest as a scripts command in your package.json you can also run it with npm test — –updateSnapshot. npm automatically adds ./node_modules/.bin to your path. update: Newer versions of yarn will resolve … Read more

Best way to polyfill ES6 features in React app that uses create-react-app

Update: The create-react-app polyfill approach and docs have changed since this question/answer. You should now include react-app-polyfill (here) if you want to support older browsers like ie11. However, this only includes the “…minimum requirements and commonly used language features“, so you’ll still want to use one of the approaches below for less common ES6/7 features … Read more

How to avoid using relative path imports (/../../../redux/action/action1) in create-react-app

Create a file called .env in the project root and write there: NODE_PATH=src Then restart the development server. You should be able to import anything inside src without relative paths. Note I would not recommend calling your folder src/redux because now it is confusing whether redux import refers to your app or the library. Instead … Read more

What is the significance of browserslist in package.json created by create-react-app

What is Browserslist? Browserslist is a tool that allows specifying which browsers should be supported in your frontend app by specifying “queries” in a config file. It’s used by frameworks/libraries such as React, Angular and Vue, but it’s not limited to them. Why would we want it? During development we want to use the latest … Read more

Disable ESLint that create-react-app provides

As of react-scripts v4.0.2, you can now opt out of ESLint with an environment variable. You can do this by adding it to your .env file, or by prefixing your scripts in your package.json file. For example in .env: DISABLE_ESLINT_PLUGIN=true Or in your package.json: { “scripts”: { “start”: “DISABLE_ESLINT_PLUGIN=true react-scripts start”, “build”: “DISABLE_ESLINT_PLUGIN=true react-scripts build”, … Read more

npm start error with create-react-app

Author of Create React App checking in. You absolutely should not be installing react-scripts globally. You also don’t need ./node_modules/react-scripts/bin/ in package.json as this answer implies. If you see this: npm ERR! UpScore@0.6.0 start: `react-scripts start` npm ERR! spawn ENOENT It just means something went wrong when dependencies were installed the first time. I suggest … Read more