Remix App

info

Make sure you have followed the installation guide before continuing.

Remix is a full stack web framework that lets you focus on the user interface and work back through web standards to deliver a fast, slick, and resilient user experience.

This stack is based on Remix Indie Stack and optimized by Heighliner core team. Currently the stack includes below core features:

• Integrated infrastructure level features:

  • GitHub Actions for deploy on merge to production and staging environments
  • Deploy to Kubernetes cluster with ArgoCD and scale up effort-less
  • Monitor your application with Prometheus
  • Visualize collected metrics and logs of your application with Grafana
  • Develop in cloud-native environment with Nocalhost

• Application level features:

  • Production-ready SQLite Database
  • Email/Password Authentication with cookie-based sessions
  • Database ORM with Prisma
  • Styling with Tailwind
  • End-to-end testing with Cypress
  • Local third party request mocking with MSW
  • Unit testing with Vitest and Testing Library
  • Code formatting with Prettier
  • Linting with ESLint
  • Static Types with TypeScript

Through this tutorial, you will experience all above exciting features in a Remix app with just one command.

What's more, the whole stack will be spinned up in just few minutes.

Let's begin traveling!

Create A New Remix Application

hln up remix-note-app -s remix -i

The command hln up is the only command that will be typed by you, which means the command will do all of the things.

Option -s specify the chosen stack, here it's remix, option -i will enter interactive mode, you need to input several required parameters step by step, for more details about parameters or error printed, you could view Installation Guide

When hln up command completed successfully, the output should be like this:

If you don't get output like this or some error printed on screen, feel free to give us a feed back at Heighliner Issue, thanks.

What Happend Just Now?

The hln up command will set up a several of components that preconfigured in remix stack. Range from infrastructure level to application level, below is a full list:

tip

To be able to access your applications created by Heighliner, make sure you have set your local hosts, or you could follow instructions from Setting Local Hosts

1. Two Git Repositories

Firstly, two Git repositories are created on your GitHub organization, one repository contains whole Remix Indie Stack source code and another repository contains Helm charts source code which will be pulled and deployed by ArgoCD. For more Helm details, you can view Helm docs.

You could view .github/workflows/docker-publish.yml file from your remix-note-app repository, which is added by Heighliner stacks engine to set up a CI pipeline.

2. A Online Running Remix Application

You could view your remix application site at remix-note-app.h8r.site like this:

3. A ArgoCD Application

ArgoCD is a declarative, GitOps continuous delivery tool for Kubernetes. The remix stack uses ArgoCD to deploy new releases of your remix application, Heighliner stacks engine connects them together automatically and handles all tough configuration tasks.

You could view your ArgoCD dashboard at argocd.h8r.site like this:

4. A Prometheus Application

Prometheus is an open-source monitoring framework, it provides out-of-the-box monitoring capabilities for the Kubernetes. The remix stack uses Prometheus to collect monitoring metrics.

You could view your Prometheus dashboard at prometheus.h8r.site like this:

5. A Grafana Application

Grafana is a multi-platform open source analytics and interactive visualization web application. The remix stack heavily uses Grafana to visualize all collected metrics and logs from infrastructure and your own applications.

You could view your Grafana dashboard at grafana.h8r.site like this:

6. A Nocalhost Application

Nocalhost is an open-source IDE plugin for cloud-native applications development. The remix stack uses Nocalhost to make Develop In Cloud come true. Underneath, Nocalhost will set up an isolated development space in Kubernetes for every developer.

Setting Local Hosts

info

Below is assuming you don't own a real domain name and use h8r.site as your domain name. In production, we recommend setting your DNS record to the public ingress IP.

tip

if you are using h8r.site as your host, you can skip this step. because it is dns resolvable to 127.0.0.1.

Get your ingress ip:

Kind/Minikube

127.0.0.1

Cloud

kubectl -n ingress-nginx get svc ingress-nginx-controller -o=jsonpath='{.status.loadBalancer.ingress[0].ip}'

Add hosts to your localhost(replace <ingress-ip> with above result):

<ingress-ip> argocd.h8r.site
<ingress-ip> grafana.h8r.site
<ingress-ip> alert.h8r.site
<ingress-ip> prometheus.h8r.site
<ingress-ip> nocalhost.h8r.site
<ingress-ip> remix-note-app.h8r.site

tip

if you are using vpn(eg: clashX\Shadowsocks), you need to close the vpn.

Cleanup

hln down remix-note-app

The hln down command will delete all resources created by hln up, such as Git repositories, Kubernetes deployments, databases.