20. How to make an awesome UI using React and a template

In some of the previous posts, we covered getting started with Material UI from scratch and also deploying those UI / Backend pieces.

In this post, we will cover creating a new UI using material ui and a template from creative tim.

This is because we may as well not re-invent the wheel and the designs they had available were high quality.

This react UI will then be uploaded to AWS S3 and linked to Cloudfront.

After configuring the UI we will configure the domain name such that we point the UI to designated domain, www.yazii.co.uk and we will modify our server to point to another domain for the UI to use (Rails app hosted on Heroku).

First of all, mini review of the Material Dashboard React from Creative Tim.

I purchased the premium version and I would give it a 4/5 rating. I think for most websites, the free template will be sufficient. In fact, I have not yet used any premium features, though I do plan to use the profile section in the future which will come in handy.

The look and feel of the template is great, that alone pushes the rating quite high for me. I am not a designer and I struggle to make a site look pretty, even though I may have the skills to implement it from scratch.

In terms of bugs, I found several throughout, not many and not major – you can fix them yourself so I wouldn’t worry about anything there.

The main problem is ‘complexity’ or the ‘heavyness’ of the code. The repository is quite large and there’s a lot of files and a lot of code in there which make the template just feel heavy. For instance the RTL support on there may come useful for some but it would’ve been great for that to be an optional file download or similar. I like having small and compact files so I found myself spending a bit of time removing and deleting a lot of content.

In terms of complexity, it’s more about the design of code. It’s following functional react design. This is good but I’d say you’d almost certainly need to incorporate Redux in this (not included part of template of-course). It’s following the traditional react functional principles so despite the complexity its for good reasons.

All in all, I managed to get a basic version of my site working with this template within 3 days, though I did cut a bit of functionality out. One of reasons for that is because I am not sure where to add the features rather than not being able to.

Once I had the site working, I prepared a new S3 bucket (check chapter 19 for how to do this if you’re unsure) and I synced the build folder with the bucket using:

aws s3 sync build/ s3://<bucket_name>

After syncing the S3 bucket, I configured the Cloudfront distribution, check chapter 19 for more info:

One additional thing I did here was setup the SSL certificate with AWS. This was a relatively straightforward process but I did verification with a CNAME record, one thing to note was that if you have more than 5 CNAME records on your config (like me), it will fail – so just care for that.

From the cloudfront settings, you can find the domain name. You can take it and use it for your DNS setup like so:

Before adding this, I removed my CNAME Heroku record – this was originally serving my front-end requests.

What I’ve now done instead is disable front-end with my rails app

# application.rb

module Yazii
  class Application < Rails::Application
    ....
    config.api_only = true
    ....
  end
end

I then set my default route options using:

# production.rb
  routes.default_url_options[:host] = 'api.yazii.co.uk

I also modified the Heroku domains, I deleted the previous www record and created new one such that it ends with:

 heroku domains
=== yazii Heroku Domain
yazii.herokuapp.com

=== yazii Custom Domains
Domain Name     DNS Record Type DNS Target                                             SNI Endpoint           
api.yazii.co.uk CNAME           shielded-jackal-4d8nbdgjyjwaedtg3o2vwj9p.herokudns.com procompsognathus-75440 

Once I got this information, I added the CNAME record to my GoDaddy configuration:

And this will finally route things correctly for you!

So what do we have here?

www.yazii.co.uk is configured to point to Cloudfront which loads the S3 web server (server-less). This is running the React app which has APIs configured to now call from api.yazii.co.uk. This is now configured through DNS to point to the Heroku app running our Rails server, which has the front end disabled (this is optional, but better).