Join us Nov. 6 for our Fall Product Update
Contentstack
search
Changelog

Build a Starter Website using PHP, Laravel, and Contentstack GraphQL

The Laravel framework makes web development easier by adding tools and libraries to the PHP platform.

This guide will help you create a starter marketing website using PHP and Laravel with minimal steps. It uses Contentstack’s GraphQL to store and deliver the website content from Contentstack.

Let’s look at the steps to create this starter website using PHP, Laravel, and Contentstack.

View CodeView Demo

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 Laravel framework. If not, please refer to the Laravel documentation for more details.

Set up your App

Here is an overview of the steps involved in creating our Laravel 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

  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 of an environment.

    You can create a delivery token for the “development” environment for running 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 main folder, update the configuration file named .env (rename .env.example to .env), and provide your credentials:

    CONTENTSTACK_HOST_NAME= <<CONTENTSTACK_HOST_NAME>>

CONTENTSTACK_API_KEY= <<CONTENTSTACK_API_KEY>>

CONTENTSTACK_ACCESS_TOKEN= <<CONTENTSTACK_DELIVERY_TOKEN>>

CONTENTSTACK_ENVIRONMENT= <<CONTENTSTACK_ENVIRONMENT>>

CONTENTSTACK_REGION= <<CONTENTSTACK_REGION>>

    Import php graphQL library using the below command:

    composer require gmostafa/php-graphql-client

    Run the following commands to start your website:

    php artisan serve

    That’s it!

    You can now view the website at http://localhost:8000. 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

    You have two ways to deploy a Laravel starter website on production:

    1. AWS
    2. XAMPP (Local machine)

    Note: You need an AWS account before you start deploying.

    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 versions of Apache and PHP.
      5. $ sudo apt install apache2

$ sudo ufw app list

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

      Available applications:

  Apache

  Apache Full

  Apache Secure

  OpenSSH
    5. Use the following command to enable Apache anywhere:
      6. $ sudo ufw allow in "Apache"
    6. Use the following command to install PHP and connect it to Apache:
      7. $ sudo apt install php libapache2-mod-php
    7. Paste your source code into the /var/www/html folder.
    8. Import php graphQL library using the following command:
      9. composer require gmostafa/php-graphql-client
    9. Run the following commands to install and update the composer.
      1. Install composer packages
        2. $ composer install
      2. Upgrade the installed packages
        3. $ composer update
    10. Enter the following command to generate keys:
      11. $ php artisan key:generate
    11. Run the following command to start your website:
      12. $ php artisan serve
    12. Access your server's domain address or IP address from your browser:
      http://server_domain_or_IP

    XAMPP

    1. Install XAMPP and Composer on your local machine.
    2. Start the Apache server in XAMPP.
    3. Paste your source code in the xampp/htdocs/project_path folder.
    4. Import php graphQL library using the below command:
      5. composer require gmostafa/php-graphql-client
    5. Run the following commands to install and update the composer.
      1. Install composer packages
        2. $ composer install
      2. Upgrade the installed packages
        3. $ composer update
    6. Run the following command in the terminal after changing the directory to your project path:
      7. $ php artisan serve

    That’s it!

    You can now access your website using the http://localhost:8000 URL.