deploying a React app that uses a Flask backend

See also questions close to this topic

• Unexpected end of JSON input while parsing near

  The command I'm running: npm install

  I removed the node_modules by rm -rf node_modules.

  now npm install

  Error:

  npm WARN deprecated circular-json@0.3.3: CircularJSON is in maintenance only, 
  flatted is its successor.
  npm WARN deprecated kleur@2.0.2: Please upgrade to kleur@3 or migrate to 'ansi- 
  colors'if you prefer the old syntax. Visit 
  <https://github.com/lukeed/kleur/releases/tag/v3.0.0\> for migration path(s).
  npm ERR! Unexpected end of JSON input while parsing near 
  '...ing":"0.3.6","@fireba'
  

  here is my package.json file:

  {
    "name": "wtf",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
      "@material-ui/core": "^3.4.0",
      "firebase": "^5.5.9",
      "react": "^16.6.1",
      "react-dom": "^16.6.1",
      "react-scripts": "2.1.1"
    },
    "scripts": {
      "start": "react-scripts start",
      "build": "react-scripts build",
      "test": "react-scripts test",
      "eject": "react-scripts eject"
    },
    "eslintConfig": {
      "extends": "react-app"
    },
    "browserslist": [
      ">0.2%",
      "not dead",
      "not ie <= 11",
      "not op_mini all"
    ]
  }
  

  What I've tried before is npm cache clean --force and then npm i npm@latest -g. previously, after everytime the app is ejected, npm start won't work and had to do npm install once again to get it working after removing the node modules.

  npm outdated
  
  Package            Current  Wanted  Latest  Location
  
  @material-ui/core  MISSING   3.6.2   3.6.2  wtf
  
  firebase           MISSING   5.7.0   5.7.0  wtf
  
  react              MISSING  16.6.3  16.6.3  wtf
  
  react-dom          MISSING  16.6.3  16.6.3  wtf
  
  react-scripts      MISSING   2.1.1   2.1.1  wtf
  
• Setting first char uppercase when setting state in react

  I'm making an axios get request, to the PokeApi, and I want to be able to set the first letter uppercase when I retrieve the name,

       axios.get('https://pokeapi.co/api/v2/pokemon/pikachu')
      .then(res =>{
          console.log(res.data)
          console.log(res.data.sprites.front_default)
          this.setState({
              image: res.data.sprites.front_default,
              name: res.data.name
          }, this.upperCaseNameHandler(this.state.name))
      })
  }
  

  I tried using a handler as such:

    upperCaseNameHandler = (pokeName) =>{
      this.setState({
          name: pokeName.charAt(0).toUpperCase() + pokeName.slice(1)
      })
  }
  

  I'm not a big fan of using a callback in setState, and I don't feel this is the best practice.

  Should I manipulate the data directly, or should I use some sort of handler to then change the state? Otherwise is it not a good practice to pass the state in as an argument? However, I'm a bit in doubt of what the alternative is? since there is no locale variable reference in scope when I call the handler.
• Upload Excel File with Fetch() Convert To JSON in Memory

  Looking for best practices on handling Excel File Upload in React/Node and converting to JSON with additional form data.

  Requirements:

  • Post includes form data in addition to Excel File
  • Handle Excel File on server with Node.js and Multer in Memory ie., multer.memoryStorage() (Not Saving File To Server)

  • Convert Excel data to JSON, then append JSON data with additional form data before sending to MongoDB.

  • I will also need to process through NGINX on production, which may be an issue uploading the Excel file. Not an issue in Dev without NGINX.

  Current working solution on Dev with React/Redux and Node.js:

  1. Fetch() for post to server
  2. Multer for handling post

  3. xlsx_buffer_json https://www.npmjs.com/package/xlsx_buffer_json

     XLSX Buffer JSON Fix for missing cptable reference:

  Had to add Externals object to webpack.config:

         externals: [
           {
            './cptable': 'var cptable'
           },
         ]

  React Action Code

  export function importAssets(assetData, importFile) {
      let systemAssetData = new FormData();
      systemAssetData.append('systemId', assetData.systemid);
      systemAssetData.append('productId', assetData.productid);
      systemAssetData.append('fileData', importFile);
  
      const config = {
          method: 'POST',
          headers: {'Accept':'application/json'},
          body: systemAssetData,
      };
  
     return (dispatch) => {
          dispatch(requestImportAsset(assetData));
  
          return fetch('/asset/importAssets', config)
              .then(response =>
                  response.json().then(assets => ({assets, response})),
              ).then(({assets, response}) => {
                  if (!response.ok) {
                      dispatch(requestImportAssetError(assets.message));
                      return Promise.reject(assets.message);
                  }
                  dispatch(requestImportAssetSuccess(assets));
                  return 0;
              }).catch(err => console.log('Action Error: ', err)); 
      };
  }

  Node/Express Route Code

  var express = require('express');
  var router = express.Router();
  var requestpromise = require('request-promise');
  var multer  = require('multer');
  var xlsxtojson = require("xlsx_buffer_json")
  var path = require("path");
  var storage = multer.memoryStorage();
  var upload = multer({ storage: storage });
  
  router.post('/importAssets', upload.single('fileData'),  (req, res) => {
      let config = req.app.get('config');
          try {
              xlsxtojson({
                  input: req.file.buffer,
                  output: null, 
                  lowerCaseHeaders:true
              }, function(err,result){
                  if(err) {
                      console.log('xlsxtojson error:  ' + err);
                      return res.json({error_code:1,err_desc:err, data: null});
                  }
                  result.push({"productid":req.body.productId});
                  result.push({"systemid":req.body.systemId});
                  
                  //send result object JSON to API Server for insert into MongoDB
              });
          } catch (e){
              console.log('corrupt file error:  ' + e);
              res.json({error_code:1,err_desc:"Corupted excel file"});
          }
    res.status(200).send('Excel File Upload Succes')
  });

  While this works, it's not the cleanest solution in my mind. I haven't seen a better working solution to date.

  Any thoughts?
• select2, Ajax post with Flask - mouse wheel does not work in Chrome

  I reduced my code as much as possible. Its an Ajax post to a Flask backend, which renders a new page (render_template) with a select2 pillbox (https://select2.org/).

  With this combination scrolling via mouse wheel does not work in Chrome (just in Chrome). It works via page-up/down however.

  If you call the index.html directly it works perfectly. So I expect my Ajax post to be wrong. Any suggestions?

  app.py

  from flask import Flask, render_template
  
  app = Flask(__name__)
  
  @app.route("/", methods=['GET'])
  def main():
      return render_template('main.html')
  
  @app.route("/index", methods=['POST', 'GET'])
  def index():
      return render_template('index.html')
  
  if __name__ == "__main__":
      app.run('localhost', 8080, debug=True)
  

  main.html

  <!DOCTYPE html>
  <html>
      <body>
          <a href="{{ url_for('index') }}">direct get -> mouse wheel works</a>
          <br>
          <button onclick="myFunction()">Ajax post -> mouse wheel does not work</button>
      </body>
      <script>
          function myFunction() {
              var formData = new FormData();
              var xhr = new XMLHttpRequest();
              xhr.open('POST', "{{ url_for('index') }}", true);
              xhr.onreadystatechange = function() {
                  if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
                      document.write(xhr.responseText);
                      document.close();
                  }
              }
              xhr.send(formData);
          };
      </script>
  </html>
  

  index.html

  <html>
  <head>
      <!-- jquery -->
      <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
      <!-- pillbox -->
      <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
      <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>        
      <script>
              $(document).ready(function() { 
                      $("#attendees").select2();
              });
      </script>
  </head>
  <body>
      <select class="select-responsive" name="attendees" id="attendees" style="width: 100%" multiple="multiple" >
              <option value="test">test</option>
      </select>
  
      <h1>very long page</h1>
      <h1>very long page</h1>
      <h1>very long page</h1>
      <h1>very long page</h1>
      <h1>very long page</h1>
      <h1>very long page</h1>
      <h1>very long page</h1>
      <h1>very long page</h1>
      <h1>very long page</h1>
      <h1>very long page</h1>
      <h1>very long page</h1>
      <h1>very long page</h1>
      <h1>very long page</h1>
      <h1>very long page</h1>
      <h1>very long page</h1>
      <h1>very long page</h1>
      <h1>very long page</h1>
      <h1>very long page</h1>
      <h1>very long page</h1>
      <h1>very long page</h1>
      <h1>very long page</h1>
      <h1>very long page</h1>
      <h1>very long page</h1>
  </body>
  
• How to add forms to a dictionary upon submission

  I am creating a shopping cart as a part of the application I'm building. I am trying to figure out how to add a form submission to a dictionary (I think this is what I need to do). So for example this is what the page would look like(This is just test data).

  Upon Clicking the add button I want the item name and price to populate in the Orders table to the right of the Pricing table(To start off). Once all orders have been added I'd click the Order button and that will order the added items in some type of list to the database using sqlalchemy. Now I feel strongly and I may be wrong that upon submitting form using add button that the form needs to be added to a dictionary. I just don't know how to save that dictionary and where that dictionary should be stored? Here is my code as of now.

  routes.py I tried putting the dictionary with in the route function but a single instance is created on each submission. So nothing is really being saved to dictionary.

  @app.route('/equipment', methods=['POST', 'GET'])
  def equipment():
      form = OrderEquipmentForm()
      eq = equipment_prices
      # Tried to store forms in this dictionary but it look like a new instance
      # is created on every form submission
      ordersss = {}
  
      if form.validate_on_submit():
          ordersss[form.Type.data] = form.Price.data
          print(form.Type.data, form.Price.data)
          print(ordersss)
          return redirect(url_for('equipment'))
  
      return render_template('equipment.html', name='equipment', eq=eq, form=form)
  
  @app.route('/equipment/cart', methods=['GET, POST'])
  def cart():
      return render_template('cart.html', name='cart')
  

  Forms.py Not sure if there needs to be function with in the actual form that adds the values to a dictionary

  from flask_wtf import FlaskForm
  from wtforms import StringField, SubmitField
  from wtforms.validators import DataRequired
  
  class AddEquipmentForm(FlaskForm):
      Type = StringField('Type of Equipment',DataRequired())
      Price = StringField('Price',DataRequired())
      submit = SubmitField('Add equipment')
  
  class OrderEquipmentForm(FlaskForm):
  
      Type = StringField()
      Price = StringField()
      Order = SubmitField('Order')
  
      # Should Dictionary go here?
      # Not sure
      def dict():
          dict = {}
          dict[Type] = Price
  

  equipment.html I would like to loop the element of the dictionary with in the Orders Table, if a dictionary is needed.

  {% extends 'base.html' %}
  {% block content %}
      <div class="row">
        <div class="col-6-sm">
          <h1>Pricing</h1>
          <table class='border'>
            <thead class='border'>
              <th style="width:200px;">Equipment</th>
              <th style="width:200px; text-align:center;">Price</th>
              <th></th>
            </thead>
            {% for quip in eq %}
              <form method="post">
                {{ form.hidden_tag() }}
                <tr class ='border'>
                  <td>{{ quip }}</td>
                  <td style="text-align:center;"> <strong>${{ eq[quip] }}</strong></td>
                  <!-- Here I'm adding StringFields from the form but hiding them so they aren't displayed so I can submit the data somehow, hopefully to a dictionary. -->
                  <td style="display:none;">{{ form.Type(value=quip)}}</td>
                  <td style="display:none;">{{ form.Price(value=eq[quip]) }}</td>
                  <td><button class='btn btn-primary' type="submit">Add</button></td>
                </tr>
              </form>
            {% endfor %}
          </table>
        </div>
        <div class="col-6-sm">
          <h1>Orders</h1>
          <table>
            <!-- This is where a loop of the dictionary elements of the items added would go -->
            <tr>
              <td></td>
              <td></td>
            </tr>
            <button style='float:right' type="button" name="button" class='btn btn-info'>Order</button>
          </table>
        </div>
      </div>
  {% endblock %}
  
• How to find cause of "booting worker"

  I am running a gunicorn3 server with gunicorn3 --workers=3 wsgi:app --bind=127.0.0.1:6007 --log-level debug and I frequently have worker reboots that I don't know the cause of. The logging message, although the level is set to debug, only informs me that

  [2018-12-12 19:20:03 +0100] [29906] [INFO] Booting worker with pid: 29906

  Surely there is a way to find out what signal caused the worker reboot?