ers_flowtagwebfrontend v0.5.0

Digital Flowtags Frontend

The Digital Flowtags Web Frontend is responsible for the web interface at http://flowtags.techsource.com.

Stack

The frontend uses React, Typescript, and Webpack. Additionally, there are some tools provided to make development easy, such as Prettier and ESLint. The Typescript code is converted to a format that React can use, and in turn, these are bundled into the package.

Setup

You'll need node and npm in order to run the frontend (and the backend, for that matter). You can find the latest versions on nodejs.org. Do not use the versions that are available through yum, as they are out of date and do not support the latest features that are required by React. There are no other requirements for running the application; they are all handled through npm.

This repository is best handled through Visual Studio Code. Open it using the Open Folder option. There, you will have debug, code completion and syntax checking which makes it easy to develop the frontend. I recommend the following extensions for Visual Studio Code:

• Debugger for Chrome (required for using the Chrome debugging options)
• Debugger for Firefox (required for using the Firefox debugging options)
• Debugger for Microsoft Edge (required for using the Microsoft Edge debugging options)
• Remote - SSH (useful for doing remote editing)

Additionally, it might be helpful to install a React browser plugin for Chrome or Firefox to debug the components as they appear in the browser.

Configurations

There are three npm scripts available:

• production - The production script that is run directly on http://flowtags.techsource.com. The contents are minified and source trees are disabled, so stack traces won't be as useful.
• development - Development target for debugging. The contents of the package aren't minified, so you can get accurate stack traces and can set breakpoints on code without issues. Additionally, a Webpack inspector is available on port 8888, allowing you to visualize the contents of what Webpack produces.

• lint - Checks the syntax of the Typescript code to ensure there aren't any styling, formatting, or runtime error-producing code. This is actually run prior to the production and development scripts before compiling, but this script can be run quickly to make sure there aren't any errors throughout the codebase.

  Any of these scripts can be run by doing npm run <script name>, for example, npm run development

Known issues

If you are getting an issue about file monitoring, delete the node_modules folder and then run the setup.sh file in the terminal. This only appears to happen under Linux.