Back to integrations

Integrate GitHub with Strapi

Integrate GitHub with Strapi

tweet selection
GitHub and Strapi Installation.png

    These integration guides are not official documentation and the Strapi Support Team will not provide assistance with them.

    Why Use GitHub?

    GitHub is the industry-standard platform where developers track, manage, and collaborate on code changes. By integrating GitHub with your projects built on Strapi, an open-source headless CMS, you unlock several key advantages. You get a complete history of your codebase, making it easy to track changes, roll back when needed, and maintain project integrity. Teams can work in parallel on different features without interference through branching, review code via pull requests, and safely merge changes.

    With GitHub Actions, you can automate testing and deployment workflows, ensuring your Strapi applications maintain quality across environments. The built-in issue tracking system centralizes bugs, feature requests, and tasks in one place.

    Whether you're a solo developer or part of a team, GitHub supports development workflows that keep Strapi projects organized and deployments efficient.

    Visit the GitHub docs for more.

    Why Use Strapi?

    Strapi is the leading open-source headless CMS offering features, like customizable APIs, role-based permissions, multilingual support, etc. It simplifies content management and integrates effortlessly with modern frontend frameworks.

    Explore the Strapi documentation for more details.

    Strapi 5 Highlights

    The out-of-the-box Strapi features allow you to get up and running in no time: 1. Single types: Create one-off pages that have a unique content structure. 2. Draft and Publish: Reduce the risk of publishing errors and streamline collaboration. 3. 100% TypeScript Support: Enjoy type safety & easy maintainability 4. Customizable API: With Strapi, you can just hop in your code editor and edit the code to fit your API to your needs. 5. Integrations: Strapi supports integrations with Cloudinary, SendGrid, Algolia, and others. 6. Editor interface: The editor allows you to pull in dynamic blocks of content. 7. Authentication: Secure and authorize access to your API with JWT or providers. 8. RBAC: Help maximize operational efficiency, reduce dev team support work, and safeguard against unauthorized access or configuration modifications. 9. i18n: Manage content in multiple languages. Easily query the different locales through the API. 10. Plugins: Customize and extend Strapi using plugins.

    Learn more about Strapi 5 feature.

    See Strapi in action with an interactive demo

    Explore Strapi in an instant, hands-on demo set up just for you.

    Setup Strapi 5 Headless CMS

    We are going to start by setting up our Strapi 5 project with the following command:

    🖐️ Note: make sure that you have created a new directory for your project.

    You can find the full documentation for Strapi 5 here.

    Install Strapi

    npx create-strapi-app@latest server

    You will be asked to choose if you would like to use Strapi Cloud we will choose to skip for now.

     Strapi   v5.6.0 🚀 Let's create your new project

 
We can't find any auth credentials in your Strapi config.

Create a free account on Strapi Cloud and benefit from:

- ✦ Blazing-fast ✦ deployment for your projects
- ✦ Exclusive ✦ access to resources to make your project successful
- An ✦ Awesome ✦ community and full enjoyment of Strapi's ecosystem

Start your 14-day free trial now!


? Please log in or sign up. 
  Login/Sign up 
❯ Skip

    After that, you will be asked how you would like to set up your project. We will choose the following options:

    ? Do you want to use the default database (sqlite) ? Yes
? Start with an example structure & data? Yes <-- make sure you say yes 
? Start with Typescript? Yes
? Install dependencies with npm? Yes
? Initialize a git repository? Yes

    Once everything is set up and all the dependencies are installed, you can start your Strapi server with the following command:

    cd server
npm run develop

    You will be greeted with the Admin Create Account screen.

    003-strapi-5.png

    Go ahead and create your first Strapi user. All of this is local so you can use whatever you want.

    Once you have created your user, you will be redirected to the Strapi Dashboard screen.

    004-strapi-5.png

    Publish Article Entries

    Since we created our app with the example data, you should be able to navigate to your Article collection and see the data that was created for us.

    005-strapi-5.png

    Now, let's make sure that all of the data is published. If not, you can select all items via the checkbox and then click the Publish button.

    Strapi Articles Published

    Enable API Access

    Once all your articles are published, we will expose our Strapi API for the Articles Collection. This can be done in Settings -> Users & Permissions plugin -> Roles -> Public -> Article.

    You should have find and findOne selected. If not, go ahead and select them.

    007-strapi-5.png

    Test API

    Now, if we make a GET request to http://localhost:1337/api/articles, we should see the following data for our articles.

    008-strapi-5.png

    🖐️ Note: The article covers (images) are not returned. This is because the REST API by default does not populate any relations, media fields, components, or dynamic zones.. Learn more about REST API: Population & Field Selection.

    So, let's get the article covers by using the populate=* parameter: http://localhost:1337/api/articles?populate=*

    vuejs strapi integration - api request.png

    Getting Started with GitHub

    Integrating your Strapi project with GitHub requires proper setup of both your Git repository and Strapi environment. Understanding Strapi Git workflows can ensure smooth version control and team collaboration.

    Installing and Adjusting Settings

    With your environment ready, initialize Git and configure your repository:

    1. Navigate to your project folder:
    1cd my-project
    1. Initialize Git in your project:
    1git init

    To maintain a clean and efficient Git repository, adopt practices such as using structured branching strategies like Gitflow, Trunk-Based Development, or GitHub Flow. Implement commit conventions with clear, atomic commits using formats like Conventional Commits. Follow merge protocols with a standard pull request process and appropriate merge strategies. Regularly clean up stale branches, keep dependencies up-to-date, and use continuous integration. Prevent and resolve conflicts by using feature branching and clear collaboration guidelines. 3. To create a .gitignore file for a Strapi project, consider excluding files such as .cache, build, .strapi-updater.json, environment variables like .env and .env.*, dependency directories like node_modules/, logs such as logs, *.log, npm-debug.log*, and database files like *.sqlite and *.sqlite3.

    For projects that need an external database connection, setting up your environment variables correctly involves consulting the external database configuration. 4. Stage your files for the initial commit:

    1git add .
    1. Create your first commit:
    1git commit -m "Initial commit"

    Code Implementation

    Connect your local repository to GitHub and set up continuous integration:

    1. Create a new repository on GitHub.
    2. Link your local repository to GitHub:
    1git remote add origin <your-repository-url>
2git push -u origin main
    1. Create a GitHub Actions configuration for automated workflows at .github/workflows/strapi-deploy.yml to build and test Strapi with Node.js version 16.x. Here's an example setup:
    1name: Strapi CI/CD
2on:
3 push:
4   branches:
5     - main
6jobs:
7 build-and-test:
8   runs-on: ubuntu-latest
9   steps:
10     - uses: actions/checkout@v2
11     - name: Setup Node.js
12       uses: actions/setup-node@v3
13       with:
14         node-version: 16.x
15     - name: Install Dependencies
16       run: npm install
17     - name: Build Strapi
18       run: npm run build
    1. Handle sensitive data securely using GitHub Secrets for environment variables:
    1env:
2 DB_HOST: ${{ secrets.DB_HOST }}
3 DB_PWD: ${{ secrets.DB_PWD }}

    To optimize your continuous integration setup with Strapi and manage environment variables securely, follow these practices: 1. Use environment variables to store sensitive data like API keys and database credentials, and exclude environment files from version control. 2. Automate deployment processes by integrating Git with CI/CD pipelines, using YAML files for pipeline configurations. 3. Ensure security by implementing access management best practices and securely handling personal access tokens and SSH keys.

    This setup provides a solid foundation to integrate GitHub with Strapi effectively, ensuring proper version control and continuous integration. The workflow helps maintain code quality while keeping your environment variables secure throughout development.

    Strapi Open Office Hours

    If you have any questions about Strapi 5 or just would like to stop by and say hi, you can join us at Strapi's Discord Open Office Hours Monday through Friday at 12:30 pm - 1:30 pm CST: Strapi Discord Open Office Hours

    For more details, visit the Strapi documentation and GitHub documentation.

    tweet selection