The Unholy Union of Alan Chen's Government Publications Sumissions Portal WIP and the Government Publications Portal developed in the Summer of 2014.
Flask + React & Redux, using the JSend specification and the Semantic-UI framework
-
The following directories and files in
app/
should not be altered manually:templates/
static/
asset-manifest.json
favicon.ico
package.json
-
Changes made during frontend development should only affect the
gpp/
directory. -
In order to run the Government Publications Portal without having to launch the React app (i.e. Flask only), run
./build.sh
.- This script will produce a build of the React app optimized for production--using
npm run build
--and will transfer it toapp/
. - Since
master
should always be in a production-ready state,build.sh
should be executed before pushing to the branch whenever any frontend changes are made.
- This script will produce a build of the React app optimized for production--using
-
SQLAlchemy query code should be restricted to the
app/database/
directory.- Rather than retrieving a user record directly via User.query.filter_by, for instance,
a new method should be added to the
app.database.user.User
class and that method will be called to perform the retrieval.
- Rather than retrieving a user record directly via User.query.filter_by, for instance,
a new method should be added to the
-
Expected console warnings (as of 4/10/17):
Accessing PropTypes via the main React package is deprecated...
- The current version of react-router is still using
React.PropTypes
- The current version of react-router is still using
MaskedInput: React.createClass is deprecated...
- The current version of react-text-mask is still using
React.createClass
- The current version of react-text-mask is still using
Should Semantic-UI vanilla styles become too bland, check this out.
- Currently, Redux is only being used to manage pseudo-user authentication. Since
Flask-Login is handling user state on the server, the Redux store simply consists
of a toggleable boolean:
authenticated
. - Redux Persist is used to maintain application state across a browser refresh.
- To quickly generate a jsonschema for a specific form, go here.
- Please refer to
app/schemas
for examples.
- Please refer to
- We stray from the spec when providing custom error messages.
- These error messages should be parsed by a validation utility. See
validate_json
inapp/resources/lib.py
.
- These error messages should be parsed by a validation utility. See
"date": {
"pattern": "\\d{2}/\\d{2}/\\d{4}",
"type": "string",
"error": { // not spec-compliant
"pattern": "This is not a valid date value."
}
}
- Please refer to http://react.semantic-ui.com/collections/form
- A higher-order component,
withValidation
, is provided ingpp/src/custom.js
to aid the form creation process. It handles the collection, updating, and submission of form data and will populate its state'serror
property if there are issues during submission or if the server responds with any errors.
-
Make sure you have VirtualBox version 5.1.18.
- If you have a later version and initial setup fails, please install 5.1.18 and retry.
- You can upgrade to the latest version and
vagrant reload
after your setup is complete.
-
Copy
/ Development Tools / Vagrant Boxes /
rhel-6.8.virtualbox.box
fromsmb://csc.nycnet/doris/doris_share/development
into your project root or any desired directory.- You may need to supply your CSC credentials.
-
Run
./setup.sh
from within your project root directory.-
This script will attempt to:
- Add the rhel-6.8-5.1.18 vagrant box
- Install the vagrant plugins vagrant-reload, vagrant-vbguest, and vagrant-triggers
- Copy
Vagrantfile.example
intoVagrantfile
- Prompt you for your RedHat Developer Account credentials
- If you do not have a developer account, create one.
- Build your development VM
-
If you experience build errors, try re-provisioning (at most once):
RH_USER=<Your RedHat Username> RH_PASS=<Your Redhat Password> vagrant provision
-
If you do not want to set the
RH_
environment variables and you don't mind having your RedHat credentials stored in yourVagrantfile
, you can add them on lines 4 and 5.
-
-
Run
vagrant ssh
to connect to your development environment. -
Run
python manage.py runserver
to start the app. You can access it on your browser athttps://10.0.0.2
- You can also run
python manage.py runserver -host 0.0.0.0
to access the app atlocalhost:8000
- You can also run
You can stop here if you're only doing backend development. Otherwise, you will need to do the following:
-
In the settings of your preferred project editor, set the Tab Size and Indent to 2. If you are using PyCharm (2016.3), these settings can be found in
Preferences > Editor > Code Styles
. -
Install npm (or yarn)
OS X:
brew install npm
RedHat:
sudo yum -y install rh-nodejs4; scl enable rh-nodejs4 bash
- It might be a good idea to make an alias for that second command as
you will need to execute it before running any npm command:
alias enable_node="scl enable rh-nodejs4 bash"
- It might be a good idea to make an alias for that second command as
you will need to execute it before running any npm command:
-
Navigate to
gpp/
and runnpm install
-
Run
npm start
- The application that has been started is the only one you need to access via browser (see table below) in order to test any changes. The Flask app will serve as your backend so make sure that is running as well!
Environment | Browser Address | package.json proxy |
hot reload? |
---|---|---|---|
Local | http://localhost:4000 | http://localhost:8000 | Yes |
Vagrant | http://localhost:5000 | http://localhost:5000 | No :( |