GitHub Actions for MongoDB Atlas App Services

What I built

I created GitHub Actions for MongoDB Atlas App Services. There are two jobs:

1. build Astro to generate static files
2. copy static files and push them to MongoDB Atlas App Services.

Category Submission:

DIY Deployments

App Link:

Click

Screenshots

There are two parts: GitHub Codespaces and GitHub Actions.

GitHub Codespaces

1. Open GitHub Codespaces link to GitHub
   

2. Open the terminal inside GitHub Codespaces and run below command
   npm create astro@latest -- --template framework-svelte

3. Update svelte.config.js
   

4. Update package.json
   

5. Run npm run dev

6. you can open browser after run no 5.
   

7. create a GitHub Actions workflow.
   
   

name: deploy-mdb-atlas-app-service
run-name: ${{ github.actor }} deploys an app on the Atlas App Service
on: [workflow_dispatch]
jobs:
  build-astro-svelte:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '18'
      - run: npm i
        working-directory: ./fe 
      - run: npm run build
        working-directory: ./fe
      - run: mkdir -p ./data/files
      - run: cp -R ./fe/dist/* ./data/files
      - uses: actions/upload-artifact@v3
        with:
          name: build-artifact
          path: ./data
  deploy-to-aas:
    runs-on: ubuntu-latest
    needs: build-astro-svelte
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '18'
      - run: npm install -g mongodb-realm-cli
      - run: mkdir -p build-artifact
      - uses: actions/download-artifact@v3
        with:
          name: build-artifact
          path: build-artifact
      - run: realm-cli login --api-key ${{ secrets.API_KEY }} --private-api-key ${{ secrets.PRIVATE_API_KEY }} -y
      - run: realm-cli pull --remote ${{ vars.APP_ID }}
      - run: cp -R ./build-artifact/* ./${{ vars.APP_NAME }}/hosting
      - run: realm-cli push --remote ${{ vars.APP_ID }} -s -c -y
        working-directory: ./${{ vars.APP_NAME }}

After create dev and GitHub Actions on GitHub Codespaces, we will prepare MongoDB Atlas App Services.

1. Sign-in on https://cloud.mongodb.com/.

2. Go to Data services and "Create"
   

3. Create a paid MongoDB cluster.
   

4. Create an app services
   

5. Enter required information and "Create".
   

6. Enable hosting.
   

7. Copy APP ID.
   

8. Create API KEY for GitHub Actions.
   

9. Enter required information.
   

10. Copy and Save the "Public and Private API key"
    

After prepare MongoDB Atlas App Services, we will create secrets & variables on GitHub settings.

1. Go to "New repository variable"
   

2. Create APP_NAME variable.
   

3. Create APP_ID variable
   

4. Create APP
   

5. Go to "New repository secret"
   

6. Create API_KEY secret.
   

7. Create PRIVATE_API_KEY secret.
   

8. Run workflow manually for deployment.
   

9. If workflow runs passed, you can see files in hosting and can see the result on the website.

10.
Website

Description

This application runs on MongoDB Atlas App Services (Hosting). It is a service for static files. I will show how to use GitHub Actions to create CI/CD pipeline for Atlas App Service deployment. I also demonstrate how to use GitHub Codespaces for testing deployment to run Astro.

Link to Source Code

GitHub repo

Permissive License:

MIT

Background (What made you decide to build this particular app? What inspired you?)

My inspiration is the less content about MongoDB Atlas App Services and how to use GitHub Codespaces and GitHub Actions to create an automated deployment frontend to MongoDB Atlas App Services.

How I built it (How did you utilize GitHub Actions or GitHub Codespaces? Did you learn something new along the way? Pick up a new skill?)

I used GitHub Codespaces for development and GitHub Actions to deploy static files to MongoDB Atlas App Services. I learned how to test my front-end website using GitHub Codespaces. It is a free tier, and I do not need to install any software on my laptop. I learned how to use secrets and variables to hide my key from MongoDB Atlas for GitHub Actions. It looked seamless between GitHub Codespaces and GitHub Actions.

Additional Resources/Info

• Expose port 3000 for GitHub Codespaces
• Realm-Cli