This guide is for creating a web application that uses React as a front-end, Ruby on Rails as an API, as a pass-thru and communicates with Klaviyo API.
Installing the required software
Note that the following software is required for the React web application and Ruby on Rails API. If you are interested in only the React part, then the Ruby and Rails steps do not need to be executed.
Ubuntu
Execute the following steps and commands to install the required software.
System update and required system libraries
sudo apt update
sudo apt upgrade -y
sudo apt-get install git-core zlib1g-dev build-essential libssl-dev libreadline-dev libyaml-dev libsqlite3-dev sqlite3 libxml2-dev libxslt1-dev libcurl4-openssl-dev software-properties-common libffi-dev
ASDF
Is a version management tool. Which can be used to manage softwares like Ruby and Node.
cd
git clone https://github.com/excid3/asdf.git ~/.asdf
echo '. "$HOME/.asdf/asdf.sh"' >> ~/.bashrc
echo '. "$HOME/.asdf/completions/asdf.bash"' >> ~/.bashrc
echo 'legacy_version_file = yes' >> ~/.asdfrc
echo 'export EDITOR="code --wait"' >> ~/.bashrc
exec $SHELL
Ruby
asdf plugin add ruby
asdf install ruby 3.3.0
asdf global ruby 3.3.0
# Update to the latest Rubygems version
gem update --system
Verify that ruby is installed by checking where it is located and the version installed.
which ruby
#=> /home/username/.asdf/shims/ruby
ruby -v
#=> 3.3.0
NodeJS
asdf plugin add nodejs
asdf install nodejs 20.10.0
asdf global nodejs 20.10.0
# Install yarn for Rails jsbundling/cssbundling or webpacker
npm install -g yarn
Verify that Node has been installed by checking where it is located and the installed version.
which node
node -v
Rails
gem install rails -v 7.1.2
Check the version installed
rails -v
Mac
Open a terminal and run the following steps.
Homebrew
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
ASDF
Is a version management tool. Which can be used to manage softwares like Ruby and Node.
cd
git clone https://github.com/excid3/asdf.git ~/.asdf
echo '. "$HOME/.asdf/asdf.sh"' >> ~/.zshrc
echo '. "$HOME/.asdf/completions/asdf.bash"' >> ~/.zshrc
echo 'legacy_version_file = yes' >> ~/.asdfrc
exec $SHELL
Ruby
asdf plugin add ruby
asdf install ruby 3.3.0
asdf global ruby 3.3.0
# Update to the latest Rubygems version
gem update --system
NodeJS
asdf plugin add nodejs
asdf install nodejs 20.10.0
asdf global nodejs 20.10.0
# Install yarn for Rails jsbundling/cssbundling or webpacker
npm install -g yarn
Verify that Node has been installed by checking where it is located and the installed version.
which node
node -v
Rails
gem install rails -v 7.1.2
Check the version installed
rails -v
Windows
To run the necessary software, they can be run by installing a Linux subsystem in the Windows environment.
On a power shell run the following commands.
01: Create a new project using the rails command
wsl --install -d Ubuntu
02: Reboot the computer after the installation.
03: Follow the instructions from the Ubuntu steps.
System update and required system libraries
sudo apt update
sudo apt upgrade -y
sudo apt-get install git-core zlib1g-dev build-essential libssl-dev libreadline-dev libyaml-dev libsqlite3-dev sqlite3 libxml2-dev libxslt1-dev libcurl4-openssl-dev software-properties-common libffi-dev
ASDF
Is a version management tool. Which can be used to manage software like Ruby and Node.
cd
git clone https://github.com/excid3/asdf.git ~/.asdf
echo '. "$HOME/.asdf/asdf.sh"' >> ~/.bashrc
echo '. "$HOME/.asdf/completions/asdf.bash"' >> ~/.bashrc
echo 'legacy_version_file = yes' >> ~/.asdfrc
echo 'export EDITOR="code --wait"' >> ~/.bashrc
exec $SHELL
Ruby
asdf plugin add ruby
asdf install ruby 3.3.0
asdf global ruby 3.3.0
# Update to the latest Rubygems version
gem update --system
Verify that ruby is installed by checking where it is located and the version installed.
which ruby
#=> /home/username/.asdf/shims/ruby
ruby -v
#=> 3.3.0
NodeJS
asdf plugin add nodejs
asdf install nodejs 20.10.0
asdf global nodejs 20.10.0
# Install yarn for Rails jsbundling/cssbundling or webpacker
npm install -g yarn
Verify that Node has been installed by checking where it is located and the installed version.
which node
node -v
Rails
gem install rails -v 7.1.2
Check the version installed
rails -v
React Web Application
01: Clone the CRM Web repositoryÂ
git clone https://github.com/smithsvanguard/sv-2024-01-web
02: Navigate to the web directory
cd sv-2024-01-web
03: Install the required libraries and wait until it finishes
npm install
04: Run the application by executing the npm start command again.
npm start
05: Visit the web application in a browser.
06: We are basically done for the React Web application. While this guide does not delve too deeply in the code, we suggest you to learn the basics of React or just tinker around the code.
Ruby on Rails API
01: Clone the CRM API repositoryÂ
git clone https://github.com/smithsvanguard/sv-2024-01-api
02: Navigate into the directoryÂ
cd sv-2024-01-api
03: Update Klaviyo API key
nano app/controllers/klaviyo_controller.rb
And change the following line with the private API key you created.
04: Next is to install the required libraries or Gems
bundle install --gemfile Gemfile
05: Now it is time to run the rails server.
rails server -p 3001
06: Open the application in a browser to test it. http://127.0.0.1:3001
07: Test the application by performing a cURL or you could your preferred tool like Postman.
curl -X POST -H "Content-Type: application/json" -d '{"email":"[email protected]", "first_name":"John", "last_name":"Reese", "date_of_birth":"January 1, 1998", "phone_number":"12345678901"}' http://127.0.0.1:3001/klaviyo
It will return a similar output, as it communicates with the Klaviyo AP.
Testing the application
01: With both the Web application and API running. It can now be tested by visiting the React app.
Congratulations for integrating a React web application with a Ruby on Rails API (as pass-thru) and Klaviyo.
