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

Prerequisites

• Contentstack account
• PHP version 8.1 or later
• Laravel version 9.0 or later
• PHP GraphQL Client

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:
   $ ssh username@ip-address
   

   4. Install the latest versions of Apache and PHP.
   $ 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:
   $ sudo ufw allow in "Apache"
   

   6. Use the following command to install PHP and connect it to Apache:
   $ 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:
   composer require gmostafa/php-graphql-client
   

   9. Run the following commands to install and update the composer.
      1. Install composer packages
      $ composer install
      

      2. Upgrade the installed packages
      $ composer update
      

   10. Enter the following command to generate keys:
   $ php artisan key:generate
   

   11. Run the following command to start your website:
   $ 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:
   composer require gmostafa/php-graphql-client
   

   5. Run the following commands to install and update the composer.
      1. Install composer packages
      $ composer install
      

      2. Upgrade the installed packages
      $ composer update
      

   6. Run the following command in the terminal after changing the directory to your project path:
   $ php artisan serve
   

   That’s it!

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