/pb

Primary LanguageJavaScript

React / Flask / Azure Functions Boilerplate

Set up azure function

https://github.com/Azure-Samples/flask-app-on-azure-functions/ https://docs.microsoft.com/en-us/samples/azure-samples/flask-app-on-azure-functions/azure-functions-python-create-flask-app/

Virtual Envirment

I have not figured out how to activate this from npm

. venv/Scripts/activate

Set up React for use with Flask

  1. npm install -g create-react-app react-scripts
  2. create-react-app
  • Delete src and public folder
  • Create client and public folder
  • Client
    • Components
      • App.jsx
      • Customers.jsx
      • Home.jsx
    • Styles
      • globals.css index.js
  1. npm run eject
  2. Inside frontend/config/paths.js change appBuild to "resolveApp('../backend/static/react')"
  3. Inside frontend/config/webpack.config.js find and remove all static/ references
  4. Inside frontend/config/webapck.config.js add filename: "../../templates/index.html" to HTMLWebpackPlugin options object
  5. Inside frontend/public/index.html add <script>window.token = "{{token}}"</script> to the head
  6. We can now use {window.token} in our react app
  7. Inside frontend/package.json add "homepage": "static/react" to the object
  8. npm run build

Staic?

https://stackoverflow.com/questions/44209978/serving-a-front-end-created-with-create-react-app-with-flask

Run Function App

  1. Open terminal as administrator
  2. pip install virtualenv
  3. virtualenv venv --python=python3.9.13
  4. . venv/Scripts/activate
  5. pip install -r requirements.txt
  6. func start

ENV

  • Set debug to true when in dev and false when in prod (this captures change in hot reload and also swaps the mail server)

Run

  1. cd frontend
  2. . ../backend/venv/bin/activate
  3. npm run dev
  4. http://localhost:3000/

Usefull links

(HMR with flask)[https://python-webpack-boilerplate.readthedocs.io/en/latest/live_reload/]