DEV Community

Cover image for Contact Information in a post-Twitter World Using Azure Static Web Apps
Stacy Cashmore
Stacy Cashmore

Posted on

Contact Information in a post-Twitter World Using Azure Static Web Apps

I need a new contact slide for my presentations. This is because the demise of Twitter has hit me in multiple ways...

It was a place where I met a lot of my online friends, where I talked tech with people, and (because I did my very best not to get onto the wrong side of it) it was a nice place to spend time.

But it was also my primary contact point for the development community. I had open DMs (which was not always great), and had some great conversations there with people who I met at conferences or who saw my content.

These days, I no longer feel that (your mileage may vary, but I no longer like it) and so I spend way less time there.

In fact, the only time I spend there is checking messages. And even then not very often. I need to find new ways of being contacted.

Online I have 3 places where I am present. BlueSky, LinkedIn and Mastodon

The first 2 are the ones where I think that I am best contactable, so those are going to replace Twitter on my slides, along with a link to my personal site

BlueSky is easy as my handle is literally my domain, but LinkedIn is a pain. The URL is long and because of the way LinkedIn search (doesn't) work, you can't rely on the profile name to find it.

So I decided maybe a better way of getting there would be to redirect from my site, and because it's hosted on an Azure Static Web App it's also really easy to do!

Route Management

Azure Static Web Apps have a staticwebapp.config.json file that allows developers to control their app from code. This is used for, among other things:

  • Authentication/authorization
  • Navigation fallbacks
  • Setting the runtime for the Azure Function API
  • Routing/HTTP Response code overrides

It's this last one that we are going to use today!

By adding the section of code below into my staticwebapp.config.json file I could tell the static web app that when someone tries to load stacy-clouds.net/linkedin it should redirect to my LinkedIn profile

{
    ...
      "routes":[
    {
      "route": "/linkedin",
      "redirect": "https://www.linkedin.com/in/stacycash",
      "statusCode": 301
    }
  ],
  ...
}
Enter fullscreen mode Exit fullscreen mode

With the route property we tell the Static Web App what URL to overwrite, with redirect we say where it should go, and finally, with statusCode we tell the browser that is a permanent redirect.

There is also an option to redirect if you need to move resources within your own site. Don't mix them up or this won't work 😅

A quick redeploy and I have a very simple link that I can put on my slides and people will always get to my profile 😊

If you want to learn about the other options, check out the documentation here

Reinvent your career. Join DEV.

It takes one minute and is worth it for your career.

Get started

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

Augment Code in Action: Overview, Demo & Q&A

Imagine building software with an AI that deeply understands your codebase. Join a live demo of Augment Code to see how it helps with onboarding, testing, and refactoring that fit your stack

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️