DEV Community: Alex Weininger

Setting up CI/CD with GitHub Actions and CapRover

Alex Weininger — Mon, 06 Dec 2021 21:08:23 +0000

My Workflow

https://github.com/streamlux/pulsebanner

I learned a lot about GitHub Actions creating this workflow, and specifically about how to use the matrix strategy. I've included the section of the workflow that uses the matrix strategy below. This job deploys all 3 apps to the staging environment on CapRover.

    deploy_staging:
        name: Deploy to Staging
        runs-on: ubuntu-latest
        needs: [build_next, build_nest, build_remotion]
        environment: Staging
        concurrency: Staging

        env:
            CAPROVER_URL: ${{ secrets.CAPROVER_URL }}
            NEST_CAPROVER_APP_TOKEN: ${{ secrets.NEST_CAPROVER_APP_TOKEN }}
            NEXT_CAPROVER_APP_TOKEN: ${{ secrets.NEXT_CAPROVER_APP_TOKEN }}
            REMOTION_CAPROVER_APP_TOKEN: ${{ secrets.REMOTION_CAPROVER_APP_TOKEN }}

        strategy:
            matrix:
                include:
                    - app: nest # name of the app in Caprover
                      token-key: NEST_CAPROVER_APP_TOKEN # key used to get CAPROVER_APP_TOKEN from env
                      image: ${{ needs.build_nest.outputs.image-tag }} # image to deploy
                    - app: next
                      token-key: NEXT_CAPROVER_APP_TOKEN
                      image: ${{ needs.build_next.outputs.image-tag }}
                    - app: remotion
                      token-key: REMOTION_CAPROVER_APP_TOKEN
                      image: ${{ needs.build_remotion.outputs.image-tag }}

        steps:
            # Install Caprover CLI, which we use to deploy images to Caprover
            - name: 'Install caprover-cli'
              run: npm install -g caprover

            # Deploy each app by iterating over matrix values
            - name: 'Deploy ${{ matrix.app }}'
              env:
                  APP_NAME: ${{ matrix.app }}
                  APP_URL: ${{ env.CAPROVER_URL }}
                  CAPROVER_APP_TOKEN: ${{ env[matrix.token-key] }}
                  IMAGE_NAME: ${{ matrix.image }}
              run: 'caprover deploy --caproverUrl=$APP_URL --imageName=$IMAGE_NAME --appName=$APP_NAME'

Submission Category:

DIY Deployments

Yaml File or Link to Code

hawkeyeventures / pulsebanner

PulseBanner

Getting started

Prerequisites

For Windows, install WSL and install these within WSL https://docs.microsoft.com/en-us/windows/wsl/install

git https://git-scm.com/downloads
Node.JS and npm https://nodejs.org/en/download/
- for WSL: https://docs.microsoft.com/en-us/windows/dev-environment/javascript/nodejs-on-wsl
Docker engine https://www.docker.com/get-started

Setup

Clone repo
Create .env file in project root and copy paste the contents of .env.template in and fill in the values.
Run docker-compose up -d to start the development PostgreSQL database + Adminer.
Open adminer to verify the database and adminer started properly. Enter password from .env file. Adminer link
Run npm install to install dependencies.
Run npx prisma db push to setup the database with our schema.
Verify by viewing the newly created database 'mydb'. Adminer link
Run npx prisma db seed to insert data into the database that is needed to run the application. (things from Stripe like products/prices)
If you have changes in your prisma design, be sure to run prisma migrate dev --name <short descriptive name> before merging *
…

View on GitHub

Additional Resources / Info

https://github.com/streamlux/pulsebanner

Debugging Azure Static Web Apps in VS Code

Alex Weininger — Tue, 16 Nov 2021 17:41:35 +0000

We've just released v0.9.0 of the Azure Static Web Apps extension for VS Code. This release includes features to help debug your static web app locally, including Azure Functions API routes, authentication, and routing.

If you're new to Azure Static Web Apps, I highly recommend checking out the What is Azure Static Web Apps? documentation page.

In this post, we'll learn how to get started debugging a static web app locally. Then we'll add an Azure Functions API route, and debug our backend + frontend together.

Prerequisites 🛠️

Google Chrome installed, (we make use of the debugger)
Azure Static Web Apps extension for VS Code - View on Marketplace
Azure Static Web Apps CLI 0.8.0 or greater - View on GitHub

npm install -g @azure/static-web-apps-cli@latest

Getting started 🟢

Clone one of these repositories, and open it up in VS Code.

Framework	Repository
Angular	https://github.com/staticwebdev/angular-basic
React	https://github.com/staticwebdev/react-basic
Svelte	https://github.com/staticwebdev/svelte-basic
Vue	https://github.com/staticwebdev/vue-basic

Run npm install

Theme: Cobalt2 Theme Official by Wes Bos

Run and debug 🐞

Go to the "Run and Debug" view.
Click "Show all automatic debug configurations."
In the dropdown, select "Azure Static Web Apps...".
Select the app you want to debug.

This will start the Azure Static Web Apps CLI in the VS Code terminal, and launch the Chrome debugger on http://localhost:4280.

Now you can set and hit breakpoints in your frontend code.

Add an API route ⚡️

Azure Static Web Apps has integrated API support provided by Azure Functions. In order to add and debug an API route, we must install some Azure Functions tools.

Azure Functions extension for VS Code - Install from Marketplace
Azure Functions Core Tools - View on GitHub

npm i -g azure-functions-core-tools@3 --unsafe-perm true

Now, you can add an API route to your app by clicking the "Add HTTP Function..." button in the Azure Static Web Apps view.

Select a language (I chose JavaScript), then name your Function (I put "hello"). And then an API route will be created for you that you can make requests to at /api/hello.

Debug app with Functions API ✨

We can debug our API routes and our frontend app simultaneously in VS Code.

Select the "SWA: Run ..." debug configuration and click the green "Run and debug" button.

VS Code will now run your Functions API routes and your frontend. When it's all started, a Chrome window will open at http://localhost:4280.

Set a breakpoint in your Function endpoint.

Go to http://localhost:4280/api/hello in the Chrome window to hit the breakpoint.

Next steps 🏃‍♀️

Now that you got your static web app running locally, you can deploy your static web app to Azure for free.

Troubleshooting 🔍

If you're having issues, please check out the troubleshooting section in our wiki.

Links + Resources 🔗

Azure Static Web Apps documentation
@AzureStaticWebApps on Twitter
Awesome Azure Static Web Apps
create-swa-app
Azure Static Web Apps CLI
Azure Static Web Apps extension for VS Code

Hello 👋 I'm Alex 🤠 and I'm a developer working on the Azure Static Web Apps extension for VS Code. I hope you enjoyed the post!

GitHub @alexweininger
Twitter @alexweininger

Adding custom Docker containers to Appwrite

Alex Weininger — Tue, 01 Jun 2021 01:24:40 +0000

In my second post to dev.to, I'll describe how you can add your very own Docker containers to Appwrite!

Intro

While exploring different backend infrastructure options at Streamlux, we decided it would be best to add our own containers to the Appwrite Traefik network. This way we could host completely custom web servers on the same machine as Appwrite. Allowing for extremely low latency between the server and Appwrite, and allowing us to have 100% flexibility in terms of API.

If you haven't heard of Appwrite, taken from Appwrite.io:

Appwrite is a self-hosted solution that provides developers with a set of easy-to-use and integrate REST APIs to manage their core backend needs.

From one developer to another, check it out, it's awesome!

Now let's get back to the task at hand. Adding custom Docker containers to Appwrite is relatively straight forward. However, if you're new to Docker or Traefik it can be a bit daunting.

The majority of the changes we have to make will be to the docker-compose.yml file located in the folder where Appwrite has been installed. For me it was in a folder named appwrite.

Next, I'll go into a little more detail on the changes we will be making to the docker-compose.yml file, but feel free to skip the background section and get right into the changes.

Background

The docker-compose.yml file handles the startup of all the Docker containers Appwrite consists of. Appwrite uses Traefik as a reverse proxy to route incoming network requests to the correct containers.

When adding our own container, we usually want to be able to handle incoming network requests. To tell Traefik we want requests that are pointed to a specific endpoint like www.mydomain.com/customApi to be routed to our container.

Changes

The first change will be at the very top of your docker-compose.yml file.

Change providers.docker.exposedByDefault from false to true as shown below.

version: '3'

services:
  traefik:
    image: traefik:2.3
    container_name: appwrite-traefik
    command:
      - --providers.file.directory=/storage/config
      - --providers.file.watch=true
      - --providers.docker=true
      - --providers.docker.exposedByDefault=true # default is false, change it to true

Next, your appwrite service labels section needs to be updated to include:

- "traefik.enable=true"
- "traefik.constraint-label-stack=appwrite"
- "traefik.docker.network=appwrite"
- "traefik.http.services.appwrite-service.loadbalancer.server.port=80"
# http
- traefik.http.routers.appwrite-http.entrypoints=web
- traefik.http.routers.appwrite-http.rule=PathPrefix(`/`)
- traefik.http.routers.appwrite-http.service=appwrite-service
# https
- traefik.http.routers.appwrite-https.entrypoints=websecure
- traefik.http.routers.appwrite-https.rule=PathPrefix(`/`)
- traefik.http.routers.appwrite-https.service=appwrite-service
- traefik.http.routers.appwrite-https.tls=true

So the appwrite service will now look like this (leave everything after the labels section as it is).

  appwrite:
    image: appwrite/appwrite:0.8.0
    container_name: appwrite
    restart: unless-stopped
    networks:
      - appwrite
    labels:
        - "traefik.enable=true"
        - "traefik.constraint-label-stack=appwrite"
        - "traefik.docker.network=appwrite"
        - "traefik.http.services.appwrite-service.loadbalancer.server.port=80"
        #http
        - traefik.http.routers.appwrite-http.entrypoints=web
        - traefik.http.routers.appwrite-http.rule=PathPrefix(`/`)
        - traefik.http.routers.appwrite-http.service=appwrite-service
        # https
        - traefik.http.routers.appwrite-https.entrypoints=websecure
        - traefik.http.routers.appwrite-https.rule=PathPrefix(`/`)
        - traefik.http.routers.appwrite-https.service=appwrite-service
        - traefik.http.routers.appwrite-https.tls=true

That's all the changes we have to make to the appwrite configuration. Now we can add our own service.

Here is an example Node.js service definition:

  appwrite-customApi:
    image: "node:12-alpine"
    restart: unless-stopped
    labels:
        - "traefik.http.middlewares.portainerpathstrip.stripprefix.prefixes=/customApi/" # requests to this endpoint will be routed to our container 
        - "traefik.http.middlewares.portainerpathstrip.stripprefix.forceSlash=false"

        - "traefik.enable=true"
        - "traefik.constraint-label-stack=appwrite"
        - "traefik.docker.network=appwrite"
        - "traefik.http.services.appwrite-customApi.loadbalancer.server.port=8081"
        - "traefik.http.routers.appwrite-customApi-http.middlewares=portainerpathstrip"
        - traefik.http.middlewares.sslheader.headers.customrequestheaders.X-Forwarded-Proto = https
        - traefik.http.routers.appwrite-customApi-http.entrypoints=web
        - traefik.http.routers.appwrite-customApi-http.rule=PathPrefix(`/customApi`)
        - traefik.http.routers.appwrite-customApi-http.service=appwrite-customApi
        - "traefik.http.routers.appwrite-customApi-https.middlewares=portainerpathstrip"
        - traefik.http.routers.appwrite-customApi-https.entrypoints=websecure
        - traefik.http.routers.appwrite-customApi-https.rule=PathPrefix(`/customApi`)
        - traefik.http.routers.appwrite-customApi-https.service=appwrite-customApi
        - traefik.http.routers.appwrite-customApi-https.tls=true

    # customize the following properties based on your docker container

    user: "node"
    working_dir: /home/node/app
    environment:
        - NODE_ENV=production
        - PORT=8081
    volumes:
        - ../customApi/:/home/node/app
    command: "npm run prod"
    networks:
        - appwrite

You should be able to copy and paste this, and then change the properties to be able to start your container properly. One thing to note is the port. I have it running on port 8081, so when starting your web server in your container you should start it on port 8081. If you change the port, make sure you change it in all the places it's references in the docker-compose.yml file.

After you're done, you can run docker-compose up -d to restart the docker containers that have had configuration changes.

You can run docker ps to view the containers and make sure your new container has started.

Run docker logs [CONTAINER NAME] to view the logs from your container.

Finishing notes

I would love to know if you have success adding your own container to the Appwrite Traefik proxy. It would be awesome to compile some example docker-compose.yml files to make it easier for other users.

Please reach out to me with any questions you have or things I missed!

Credits

First and foremost I have to give credit to Appwrite. And specifically the absolutely amazing Appwrite team. Go check them out and show your support for their awesome work.

Appwrite on Dev
Appwrite.io
Join the Appwrite discord
Appwrite on GitHub
VS Code extension - maintained with ❤️ by the Streamlux team!

Streamlux

And finally, if you found this post helpful, I am posting today on behalf of my company Streamlux. After months of hard work we've recently released a public beta of our desktop app. If you are a Twitch streamer or viewer come check out what we have in store.

Appwrite VS Code extension

Alex Weininger — Sat, 22 May 2021 06:28:08 +0000

In my very first post to dev.to I'll be talking about the Appwrite for VS Code extension, what you can use it for, and some features I hope to include in the future.

Intro

The team at Streamlux chose to utilize Appwrite for many good reasons. One of my favorite reasons was that with Appwrite being relatively new, we'd have a great opportunity to contribute to the open source Appwrite community.

To quickly summarize what Appwrite is, from their website:

Appwrite is an open-source, self-hosted Backend-as-a-Service that aims to make app development easier with SDKs available in a variety of programming languages.

Now, after a few weeks after using Appwrite, our first contribution to the Appwrite community is the Appwrite extension for Visual Studio Code.

View Appwrite for VS Code on GitHub
View on the Visual Studio Marketplace

Current features

Here are the features we've built so far!

Multi-project support

If you happen to be working with more than one Appwrite project, then the extension has you covered! Easily switch between as many projects as you'd like.

VS Code theme: Cobalt2

Database

The comprehensive and robust database features that Appwrite
provides were one of the things that ultimately led to the team and I choosing it to power Streamlux.

With the extension, you can manage databases, collections, and documents.

You can also add, edit, and remove rules and permissions right from VS Code.

Users

Another feature that makes using Appwrite so simple are the features surrounding users. From authentication, to managing user sessions and preferences, Appwrite makes it a breeze.

And we strive to match this experience in the extension. Easily view project users, as well as create new ones.

Health

And last but not least, you can monitor the health and status of all the services that make up your Appwrite project to make sure everything is running properly.

Future features

One of the recently added features to Appwrite that also might be the best feature is Appwrite Functions.

We think we can provide a great experience for creating and debugging Appwrite Functions in VS Code. And so the next large feature we want to add is functions support.

If you've made it this far through my first dev.to post, thank you for reading!

View Appwrite for VS Code on GitHub
View on the Visual Studio Marketplace

Also, I must mention it because the Appwrite team members provide absolute top tier support in their amazing Discord. If you're interested in Appwrite or already use Appwrite I highly recommend joining :)