Building a fully automatic https developer profile generator with Nuxt.js, Caddy, Typescript, Sequelize and more.

Overview of My Submission

Persona

One public profile to rule them all. By developers for developers.

Description

Persona was developed for the dev.to Microsoft Azure hackathon. It's a mono-repo TypeScript project featuring many things like GitHub OAuth, Mono Repo architecture, Database Management, API servers, Full-Stack Modern JS framework apps, complicated networking concepts through allowing users to point their own domains to a DNS and view their public profile on it.

Features

• Microsoft Azure VM
• Caddy auto HTTPS and reverse proxying
• Nuxt.js and TypeScript
• SQlite Database with Sequelize Migrations
• Github Oauth
• Fastify REST API
• Express static site server

How the app works

You access the app at https://azure.kaizen.com.na. Here you can authorize the application with GitHub to create a base profile.

Add a custom domain

The input to add a custom domain e.g. profile.example.com will allow you to save a custom domain to your profile, once you CNAME this domain to dns-azure.kaizen.com.na, your public profile will be accessible there. (by default it's accessible by https://static-azure.kaizen.com.na/<your-user-id>, which is accessible on your dashboard).

Try my custom domain 😀

https://profile.kaizen.com.na

Update your profile

Currently you can update your:

• Name, that will be displayed on your public page
• Bio (Markdown enabled), which can be previewed by click the 'toggle preview' button when in 'edit mode'
• Website (not currently used in public)
• Profile Image, You can upload a new profile image in edit mode (defaults to your github image). This is shown on your public page.

Note: The markdown editor doesn't support full markdown features. For security reasons and not having the time to do proper sanitisations I've disabled html.

Developer Notes

The code is pretty much reusable outside of some things:

• Hard coded url values e.g. https://azure.kaizen.com.na: you'll have to update these to yours.
• ENV variables: I have left some .env.dist files where necessary so you know what is required to run the app.

git clone https://github.com/Eckhardt-D/persona.git

yarn install

yarn dev

Note: The VM runs a Caddy server. This allows for easy config on auto-https and reverse proxying, install Caddy on your VM and edit your Caddyfile to this (just update the hard coded domains to your own and make sure they point to your instance IP):

{
    on_demand_tls {
        ask      http://localhost:3002/domain/verify
        interval 2m
        burst    5
    }
}

https:// {
  tls {
    on_demand
  }

  reverse_proxy {
    to http://localhost:3001
    header_up Host {upstream_hostport}
    header_up X-Forwarded-For {host}
  }
}

azure.kaizen.com.na {
  tls internal
  reverse_proxy http://localhost:3000
}

api-azure.kaizen.com.na {
  tls internal
  reverse_proxy http://localhost:3002
}

static-azure.kaizen.com.na {
  tls internal
  reverse_proxy {
    to http://localhost:3001
    header_up Host {upstream_hostport}
    header_up X-Forwarded-For static-azure
  }
}

As simple as that, the monorepo was setup with DX in mind. Although there could be some nuances that'll have to be referred to by opening an issue to this. Hope you enjoy it and feel free to contribute.

Submission Category:

Computing Captains

Link to Code on GitHub

Eckhardt-D / persona

Source code for the Microsoft Azure dev.to competition

Persona

One public profile to rule them all. By developers for developers.

Description

Persona was developed for the dev.to Microsoft Azure hackathon. It's a mono-repo TypeScript project featuring many things like GitHub OAuth, Mono Repo architecture, Database Management, API servers, Full-Stack Modern JS framework apps, complicated networking concepts through allowing users to point their own domains to a DNS and view their public profile on it.

Features

• Microsoft Azure VM
• Caddy auto HTTPS and reverse proxying
• Nuxt.js and TypeScript
• SQlite Database with Sequelize Migrations
• Github Oauth
• Fastify REST API
• Express static site server

How the app works

You access the app at https://azure.kaizen.com.na [Instance Has Been Shutdown]. Here you can authorize the application with GitHub to create a base profile.

Add a custom domain

The input to add a custom domain e.g. profile.example.com will allow you to save a custom domain to your profile, once you CNAME this domain to…

View on GitHub

Additional Resources / Info