Web design, development and business.
It's time to get started with the Rails API and React front end. In Part 0, I gave some background about the project, what technologies would be used and why. Feel free to check it out if you haven't already.
To get started with this project, you will need the following installed on your system. Let's get downloading!
For this project, I'll be using Rails 5.1 (currently the latest is 5.1.4), so if you don't have it, be sure to install the correct version:
gem install rails -v '~> 5.1'
Let's go ahead and generate our new API app:
rails new freelance-api --database=postgresql --api
Not too many changes here, just setting the database to Postgres and using API mode. For testing, this project will stick to the default MiniTest.
Go ahead and look at the directory structure in your text editor or in your terminal with
tree. If you've worked with Rails for regular web applications, you'll notice this app is a lot slimmer.
The first changes to make are with the Gemfile and the CORS initializer:
gem rack-cors line in the Gemfile and run
bundle install in your terminal.
And in the API directory, open
config > initializers > cors.rb, uncomment and modify it to read:
Rails.application.config.middleware.insert_before 0, Rack::Cors do allow do origins '*' resource '*', headers: :any, methods: [:get, :post, :put, :patch, :delete, :options, :head] end end
This will allow the API to play nicely with the front end app. The origins can be adjusted once you know what domain you'll use for the front end app and are ready to deploy.
While this API needs a lot of work before it's done, it's a good idea to get in the habit of updating the documentation and keeping track of changes as we go.
You can start by creating a repository in GitHub or another repository hosting service that uses git. It should be fairly straightforward:
Before adding the files to the repo, it's a good idea to start on some of the basic files you may not feel like working on as the project wraps up: the README, LICENSE, and CONTRIBUTING files.
Your README should already exist, but go ahead and modify it to make sense with what you have so far. For example, right now mine looks like:
# Freelance API Make your freelancing more efficient by managing leads, proposals, project documents, clients and more. *This is a work in progress.* ## Getting Started ### Prerequisites #### Ruby ~> 2.4 Download and manage via [rbenv](https://github.com/rbenv/rbenv) or [RVM](https://rvm.io/) #### Rails ~> 5.1 gem install rails -v '~> 5.1' #### PostgreSQL ~> 9.6 Follow the [instructions for downloading PostgreSQL](https://www.postgresql.org/download/) based on your operating system, and be sure to [create a database user with privileges](https://wiki.postgresql.org/wiki/First_steps). ### Installing Clone the repository: git clone https://github.com/chznbaum/freelance-api.git cd ./freelance-api Install the gems: bundle install And set up the database: rails db:create rails db:migrate Start the development server: rails s You can test this by making a GET request to `localhost:3000` using Postman or an alternative. ## Tests ### End to End Tests TBA ### Coding Style Tests TBA ## Deployment TBA ## Built With * [Rails](http://rubyonrails.org/) - Web Framework * [rbenv](https://github.com/rbenv/rbenv) - Environment Managemet * [Bundler](http://bundler.io/) - Dependency Management * [Heroku](https://www.heroku.com/) - Deployment Platform * [Travis CI](https://travis-ci.org/) - Continuous Integration ## Contributing Please read [CONTRIBUTING.md](CONTRIBUTING.md) for details on the code of conduct, and the process for submitting pull requests. ## Versioning TBA ## Authors * **Chazona Baum** - Initial work ## License This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for more details. ## Acknowledgements
There's still a long way to go, but already a surprising amount can be included!
Go ahead and create a
CONTRIBUTING.md file and a
LICENSE.md file in your project root. My CONTRIBUTING file just lists TBA, and I am using the MIT license for my project.
Now that these documents are set up, the files can all be added to the repository you created.
git add . git commit -m "initial commit" git remote add origin https://github.com/<YOUR GITHUB USERNAME>/freelance-api.git git push -u origin master
You're almost done with the basic setup! To create and update the database, go ahead and run:
rails db:create rails db:migrate
It seems like we've done a lot without much to show for it, but we've set up the environment we'll need to start giving the API functionality.
At this point, you can test the API out by opening Postman and starting your Rails server in the terminal:
Once the terminal indicates the server is running, in the Postman request bar, send a GET request to
localhost:3000. You should see the following:
Look deeper into the HTML you received, and you'll see it's Rails'
Yay, you're on Rails! success page.
With that accomplished, the next step is to actually plan out what the API should do in a little more detail and actually start creating the data models.
In my rush to try to earn something from my code learning so far, I've had to shelve some of my plans to dive deeper into Ruby on Rails and to learn front end frameworks like Angular and React. When marketing freelance work to non-coders, the most common request seems to be to make something fast, pretty and cheap, which means focusing on static or WordPress sites.
But I'm finding that trying to reach out to potential clients the traditional way is extremely inefficient, especially when conversion rates as a newbie freelancer are basically nonexistant. And solutions for non-technical folks to manage their clients and improve their sales are expensive when it might take several months to actually earn anything.
So it seems to make sense to go ahead and put together an app that will allow me to keep track of and reach out to leads, as well as managing proposals and project documents, and provide clients with access to materials relevant to them. Once the basics are there, I'll look at integrating an invoicing API like FreshBooks to get more out of the app.
And since it's been a while since I've blogged about what I'm learning, this seemed like a great opportunity.
Over the next few weeks I'll be building a freelance dashboard app, using Rails 5.1 for the API backend, and React.js on the front end.
You can either wait for the next post to start building, or feel free to dig a bit deeper into why I went with this stack below:
I'm setting aside for a moment the fact that I love working with Ruby, since it's not always going to be the best tool for the job.
For one, Rails is pretty fast and easy to set up compared to other options. Given that I intend to use this toward trying to make some income soon, being able to get something up quickly and iterate improvements is a huge advantage.
If I wanted to build the back end and front end in the same application, Rails makes that easy, too. Starting with 5.1, Rails includes Webpack and makes it easy to create apps that use front end frameworks and libraries like Angular, React, Vue, or Ember rather than jQuery. I've played around with that a bit, but I think I'd still rather separate out these two key parts into an API and a front end app.
Rails is also well-known for being a great framework for building RESTful APIs. Rails 5 even provides an API mode that makes getting a JSON API up and running even smoother.
And I have some basic experience building applications with Rails. While I want to learn new things, having some familiarity with the back end will help get this built quicker, especially since I'm picking a front end framework I have no experience with.
If I didn't go with Rails, I would have considered:
React has gotten a lot of attention lately between concerns about licensing issues (which it seems were ultimately much ado about nothing) and its parent company Facebook constantly ending up in the headlines.
React is also a more mature framework than Vue, while having fewer breaking changes than Angular.
And React also has the benefit of React Native. If I wanted to implement a native mobile app for this web application, which I eventually do, React Native makes it much easier.
If I didn't go with React, I would have considered:
I considered breaking this project up into microservices to make individual features easier to develop and maintain, and initially started it that way. However, it's been brought to my attention that microservices should be left to situations where teams of people will be working on different services, so this project will take a monolithic approach.
And since I'll be attending RubyConf this week, posts about this project may be interrupted by posts about the conference.
This should be a fun project to work on, and I look forward to showing you along!
For example, while it has three versions to choose from, the default is built with Node.js, MongoDB, and Express. There are no preferred front-end frameworks to commit to, and no extraneous technologies to bulk up the project and get in your way, although you can select an Angular version if you favor the MEAN stack.
Each version lays out clear installation instructions and strong documentaion. There are tutorials for incorporating Angular, authentication, deploying successfully to Heroku, and for the absolute beginner to walk themselves through putting together what Clementine.js installs for them. Watch that space in the future, as tutorials on testing in Mocha and incorporating React.js for MERN stack projects are soon to come.
Will this be the framework you use for every project you ever make? Absolutely not; there are good reasons why many of these other boilerplates and projects become so bloated, and not every tool works well for every project. But if you’re a beginner and you’re not utilizing Clementine.js, you are making more work for yourself.
Like what Blake has done with Clementine.js? Consider contributing to the project. As with other open-source projects, it can only survive with the help of meaningful contributions.
What are you building today? Continue the conversation in the comments!