Flask React Front-end

Requirements

• npm
• node.js
• ruby
• sass

Installation

1. Make sure npm and node.js are installed:

$ npm -v

$ node -v

If not, Homebrew makes it easy:

$ brew install node 

2. Install sass:

$ gem install sass

3. Clone this repo:

$ git clone https://github.com/whittlbc/flask-react-fe && cd flask-react-fe

4. Install node modules

$ npm install

Note: If this fails, try deleting package-json.lock and retrying.

Usage

To run the app, have 2 terminal tabs open:

Tab 1

• Job: Allow live reloading of CSS files
  
• Execute: $ npm run sass
  
• Note: Don't modify any .css files directly, as these are auto-generated by sass. Only style the .scss files.
  

Tab 2

• Job: Host the app
  
• Execute: $ npm start
  

Adding a new stylesheet

To add a new stylesheet and make it available to sass:

1. Create a new .scss file inside src/styles/scss.
2. Import your new .scss file inside src/styles/scss/index.scss.

Making Ajax Requests

There's a singleton helper class, located at src/utils/Ajax.js that can be used for this. There's an example GET request shown using this class at the top of that file.

Proxy

At the bottom of package.json, the "proxy" key lets you set a proxy url for any API requests made. Currently it's set to http://localhost:5000, as this app runs on port 3000.

Heroku

This app can be run on Heroku using this buildpack.

Before pushing to Heroku, make sure to change the <HEROKU_APP_NAME> inside static.hjson to be the Heroku app name of your Heroku-hosted server-side app.

Setting up SSL support

Once you have a domain name secured for your site, you can set up SSL support with LetsEncrypt and certbot.

Install certbot and start the certificate creation process

$ brew install certbot

$ sudo certbot certonly --manual

Follow the instructions and enter the name of the domain you want to secure (e.g. www.mydomain.com).

It should then ask you to make sure your web server displays a certain text value at a specified url on your site:

Make sure your web server displays the following content at
http://www.sonders.co/.well-known/acme-challenge/xxxxxxxxxxxx-yyyy.zzzzzzzzzzzzzzzzzzz before continuing:

aaaaaaaaaaaa-bbbb.cccccccccccccccccccc

If you're using flask-react-be for your server, there's already a route set up to handle this certificate verification. The only thing that needs to be done is to set the following environment variables on your Heroku-hosted server-side app:

LETSENCRYPT_ROUTE_KEY: value shown as xxxxxxxxxxxx-yyyy.zzzzzzzzzzzzzzzzzzz above
LETSENCRYPT_RESPONSE_KEY: value shown as aaaaaaaaaaaa-bbbb.cccccccccccccccccccc above

Wait a minute for those environment variables to take effect, and then press ENTER to have certbot verify that API endpoint.

If all goes well, it should tell you congratulations and give you the location of the created certificate.

Add the SSL Endpoint add-on to our Heroku-hosted React app:

$ heroku addons:create ssl:endpoint -a this-heroku-app-name

Upload your certificate to Heroku

$ heroku certs:add /etc/letsencrypt/live/www.mydomain.com/fullchain.pem /etc/letsencrypt/live/www.mydomain.com/privkey.pem -a this-heroku-app-name

To verify this worked, you can run the following and see the details of your uploaded certificate:

$ heroku certs:info -a this-heroku-app-name

Make the following modifications to your static.hjson file:

• Change each of your "origin" proxy keys to have an https scheme.
• Add the following key-val pair: "https_only": true

If using flask-react-be for your server-side app, give its Heroku app the following environment variable:

REQUIRE_SSL: true

Add your custom domain to your Heroku app:

$ heroku domains:add www.mydomain.com -a this-heroku-app-name
$ heroku domains:add mydomain.com -a this-heroku-app-name

You should then have 2 DNS targets provided to you by Heroku that look something www.mydomain.com.herokudns.com and mydomain.com.herokudns.com, respectively.

Then add a CNAME record to your domain with a Host of * that points to mydomain.com.herokudns.com. Optionally, you can then add domain forwarding to https://www.mydomain.com.

License

MIT