Personalization Rehab: From cringe to conversion | Save your spot!
Contentstack
Changelog

Build a Starter Website using Ruby On Rails and Contentstack GraphQL

The Ruby On Rails framework extends the ROR developer platform with tools and libraries for building web applications.

This guide will help you create a starter marketing website using Ruby On Rails with minimal steps. It uses Contentstack GraphQL queries to store and deliver the website content from Contentstack.

Let’s look at the steps to create this starter website using Ruby On Rails and Contentstack GraphQL.

View Code

Screenshots

screenshot
screenshot
screenshot
screenshot
screenshot

Warning: This sample app is no longer maintained. It remains available for reference. If you have questions regarding this, please reach out to our support team and we will do our best to help!

Prerequisites

Note: For this tutorial, we have assumed that you are familiar with the Contentstack app and Ruby on Rails framework. If not, please refer to the Ruby On Rails documentation for more details.

Set up your App

Here is an overview of the steps involved in creating our Rails app:

  1. Set the Region
  2. Log in to your Account
  3. Import Content
  4. Create Delivery Token
  5. Build and Configure the Website
  6. Deploy the Website in AWS

  1. Set the Region

    To use the North American, European, Azure North American, Azure Europe, or Google North America endpoint, run the following command in your terminal (command prompt):

    csdx config:set:region <<region>>
    Note:
    • For North American users, set the region as NA.
    • For European users, set the region as EU.
    • For Azure North American users, set the region as AZURE-NA.
    • For Azure European users, set the region as AZURE-EU.
    • For Google North America users, set the region as GCP-NA.

  2. Log in to your Account

    To import content to your stack, first, you’ll need to log in to your Contentstack account via CLI by running the following command in your terminal:

    csdx auth:login

    This command will ask you to provide your Contentstack account credentials (email and password).

  3. Import Content

    The seed command lets you import content to your stack in a few steps. To do so, run the following command in your terminal:

    csdx cm:stacks:seed --repo "contentstack/stack-starter-app"

    This command will prompt the following options as follows:

    • Organization name: You’ll get a list of organizations to which you have access. Select the one from the list where your source stack is located or where you want to create a new stack.

      • Note: For creating new stacks, choose an organization where you are either an owner or admin. 

    • Stack preference: Select your choice to create a stack:
      • Select New, and then enter a name for your stack.
      • If you select Existing, select the particular stack where you have the specific permissions for importing content.

        Additional Resource: Refer to the Stack Roles documentation to learn more about permissions.

    Tip: To avoid the chances of any error, we recommend that you select the option of creating a new destination stack. If you choose to import content to an existing stack, ensure that the stack is empty.

    Finally, you’ll get the content imported to your stack.

  4. Create Delivery Token

    A delivery token lets you fetch published content from an environment.

    You can create a delivery token for the “development” environment to run the website on localhost. Later, while deploying your site, you can create tokens for other environments.

  5. Build and Configure the Website

    Download the website code.

    Navigate to the config folder, rename the configuration file named contentstack.yml.enc to contentstack.yml, and provide your credentials:

    CONTENTSTACK_HOST_NAME=<<CONTENTSTACK_HOST_NAME>>

CONTENTSTACK_API_KEY=<<CONTENTSTACK_API_KEY>>

CONTENTSTACK_DELIVERY_TOKEN=<<CONTENTSTACK_DELIVERY_TOKEN>>

CONTENTSTACK_ENVIRONMENT=<<CONTENTSTACK_ENVIRONMENT>>

CONTENTSTACK_REGION=<<CONTENTSTACK_REGION>>

    Run the following command to install the required packages:

    bundle install

    Run the following command to upgrade the installed packages:

    bundle update

    Run the following commands to start your website:

    rails s

    That’s it!

    You can now view the website at http://localhost:3000. And you also have the stack that has all the content and resources for the website. Try experimenting by creating new entries and publishing them in the “development” environment. You should be able to see the changes on the website at the localhost.

  6. Deploy the Website in AWS

    1. Log in to your AWS Account.
    2. Create an EC2 instance (prefer Ubuntu version 18 or above). 
    3. Log in to AWS Server and use the following command:
      4. $ ssh username@ip-address
    4. Install the latest version of Ruby and check the version.
      5. $ sudo apt install ruby-full

$ ruby --version

      You should receive the following message after running the above command:

      ruby 2.7.8p225 (2023-03-30 revision 1f4d455848) [x86_64-linux]

      Note: The output depends on the version installed at the user's end.

    5. Use the following command to install Rails:
      6. $ gem install rails
    6. Use the following command to check the Rails version:
      7. $ rails --version
    7. Paste your source code into the home(or any public folder) folder.
    8. Install the Ruby GraphQL library using the following command: 
      9. $ gem install graphlient
    9. Run the following command to Install gems specified in Gemfile:
      10. $ bundle install
    10. Run the following command to upgrade the installed packages:
      11. $ bundle update
    11. Run the following command to run the server:
      12. $ rails s
    12. Access your server's domain address or IP address from your browser:
      http://server_domain_or_IP