I recently have completed a full-stack (backend and frontend) application, hike-it-up, and wanted to share how I went about creating this application and hosting it for completely free.
I am finishing my time at The Flatiron School and wanted to showcase my new learnings by re-creating a very simple Sinatra application that I made earlier this year. Now that I had all this great knowledge of React I could combine it with my knowledge of Ruby on Rails to create a full-stack application.
Right off the bat, with experience from previous projects, I wanted my backend and frontend within the same GitHub repository. Both for ease of local deployment and because at the end we want to have 3 branches. One for our backend, one for our frontend, and one to house everything.
I initially started and used the
create-react-app toolchain to generate my GitHub repository and frontend services.
After moving into the newly generated folder, I created a new rails API application named
Now I had a folder for my backend, a
public folder for my entry point, and a
src folder for React related files.
I went with Pico.CSS for the framework, as it is a very lightweight CSS pack and has useful 'classless' styling properties.
For client side routing, I decided to go with react-router. This allowed me to mimick route browsing of the backend on the frontend. For example, going to
/trails/1, should bring up the first trail. React Router passes the declarative id of the route, in this case
/trails/:id, to the props of the route.
This allows us to make backend server calls ONLY when necessary, and doesn't break if someone were to link to it like this.
I created resources for
users, and a model for
addresses. Full CRUD operations should be able to be performed on trails, but only limited functionality should be able to be used for users.
To ensure malformed or malicious attempts would not be able to work, I built out a simple token authentication system that would verify the user for ever session. If they have the incorrect token, requests to the backend server will not be implemented.
Also, because I was separating where the frontend and backend servers are hosted, I needed to configure CORS. This would ensure requests where only valid if they came from my frontend's location.
After creating all pertinent relations and migrations I had my backend system up and running.
When I was building out the frontend there were a couple of issues that I ran into, mostly because I was hosting this on gh-pages.
React Router has a nifty component called , which allows our UI to rely on the hash portion of the URL (www.example.com/#/I/Am/The-Hash-Portion).
This was necessary because I was hosting this application on a subdirectory of my GitHub domain. For example this application is hosted at
https://aj-rom.github.io/. As normal routing would break this.
I had everything working as I wanted it except one thing, my state wouldn't persist on refresh. This made sense as there was nothing keeping application state stored in the users browser.
There were a couple of ways to implement this:
After doing some research I learned that implementing this really wouldn't be difficult at all and this will save me two packages and maybe even more.
window.localStorage, that allows us to store data within the users page. This even persists when the page session ends, perfect for handling refreshes.
I went ahead and modified my application store, to continuously save to storage when it updated and then clear when the user logs out, clears their history, or deletes their account.
Hosting the application is a whole different process, but luckily I have had some experience doing this in the past and have got a decent understanding on how to do this.
For my backend I wanted to host it on Heroku which allows for simple deployment from GitHub repositories and is completely free.
Their deployment process is quite simple, all you have to do is link to a GitHub repository and choose a branch, then deploy the application.
To make my Heroku server as least crowded as possible, I created a new branch named heroku that would only contain the contents from the
Now that I had this branch only containing Rails related files, I headed over to Heroku and deployed the application.
This is probably the easiest way to host a react application for completely free, especially if it lives in a GitHub repository.
The gh-pages npm package, makes for quick and easy deployment of fully compiled react applications.
After running two simple commands
npm run predeploy && npm run deploy, the frontend was up and running!
All in all there are really only slight optimizations to be made using code splitting, and maybe implementing search functionality (which is pretty much done).
I hope this can be a resource for others to learn from or get inspiration for their next project!