How to manage multiple vitepress website with azure static web app using base url ?

[kai-you2]

Overview

We have multiple service we want to have documentation using vitepress, I know we can easily deploy the website using static web app, but it seems impossible to host those documentation site under one domain with base url ?

What I need is something like

• https://companydomain/web/projectA -> projectA's vitepress website
• https://compnaydomain/web/projectB -> projectB's vitepress website

Is that possible using azure static web app? If not, I am considering using azure app service, since it provide virtual application which may seems to fit in these kind of situation, but in this case, how do we host a website in azure web app with vitepress ? since it didn't have a nodjs server

[brc-dd]

but it seems impossible to host those documentation site under one domain with base url

What's the issue you're encountering? It should be straightforward to build those projects and deploy them 👀 (azure static web apps should work fine IMO)

PS: Ah, you might need to configure separate outDir in both of your projects.

[kai-you2]

Hi @brc-dd , thanks for taking interesting answering the problem, I posted a more detailed article at https://stackoverflow.com/questions/76050387/how-to-deploy-my-vitepress-to-azure-static-web-app-with-base-url

Majorly the problem would be how to configure base url to static web app, I tried to set the outDir for the projects to be /web/ui after posting the article, but in my github workflow, I still need to set the app_location to be .vitepress/dist/web/ui in order to find the index.html, which seems to be pointless since it's still treat / as it's root url, I want to be able to point one domain to multiple vitepress projects with different base url for my client

ex: http://companydomain/web/ui/ --> A project
http://companydomain/web/sdk/ --> B project
http://companydomain/web/doc/ --> C project

[brc-dd]

Ah, I'll try to share an example. It's might be hard to explain this way.

The basic approach is:

• project A has base /web/ui/ --> set its outDir to ../dist/web/ui
• project B has base /web/sdk/ --> set its outDir to ../dist/web/sdk
• same for project C

After you've build all three projects, you'll have a dist directory like this:

dist/web/
├─ ui/
├─ sdk/
├─ doc/

You then will need to upload dist to Azure. (For this to work, you need to have all three projects in the same repo. You can use submodules too if they are big, but they all need to be built in the same workflow for the dist to have all three of them.)

[kai-you2]

Hi, thanks for your answer. But if I upload the dist, the azure static web app will be looking for index.html in dist level, which will not exist, which cause the build pipeline to fail.

[brc-dd]

You can emit a blank html file to dist or have some project with base / too. Because anyway, those three projects won't be accessible from https://companydomain/ or https://companydomain/web/

[kai-you2]

I see, is there a way for all three projects to be configuring at three different static web app then using the same domain to point to those web apps ? Seems these three projects are located at three different repo, so it seems impossible to do it in your structures.

[brc-dd]

I don't think that will be easy. Route rewrites could've been useful, but IG Azure needs them relative to your app root, which will be different for all three projects. If you put something like Cloudflare in front of Azure, then it might be possible to configure rewrites there and then use. Things like Azure NGINXaaS or Front Door might also work, but I haven't used them.

I'd recommend asking a question on StackOverflow (Azure Collective) stating that you've three different apps, you want to serve them under the same domain but different sub directories.

[kai-you2]

Thanks for your answer, acutally I found a different approach using azure blob storage using static web app which you can just upload different dist to different sub folder, I am not sure if that's a great way for deploying vitepress , but for now it seems working, my best choice still would be azure static web app, since it comes with more advantage. but thanks again for helping!

[brc-dd]

Azure blob might have slightly degraded performance, because they are not exactly meant for serving sites. IIRC blob was more like s3 than cloudfront. Azure CDN endpoints might give significantly better performance here.

Anyway, there are a bunch of similar threads of StackOverflow, where people have recommended using Azure Application Gateway and Virtual Directories using which you can have multiple apps under the same domain.

Some threads for reference:

• https://stackoverflow.com/q/73127391
• https://stackoverflow.com/q/65200778
• https://stackoverflow.com/q/55624386
• https://stackoverflow.com/q/46033446
• https://stackoverflow.com/q/56452192

[fuhadkalathingal]

If you want to host multiple Vitepress websites under one domain with specific base URLs like https://companydomain/web/projectA and https://companydomain/web/projectB, Azure Static Web Apps alone may not provide the exact solution you're looking for. However, you can achieve this by using Azure App Service and Azure Functions to host your Vitepress websites.

Here's a general outline of the steps you can follow:

1. Create Azure App Service: Set up an Azure App Service instance for your domain (companydomain) using the Azure portal or Azure CLI.

2. Configure Virtual Applications: In the Azure App Service configuration, configure virtual applications for each of your Vitepress websites (projectA and projectB). This will allow you to host each website under a specific path, such as /web/projectA and /web/projectB.

3. Build and Deploy Vitepress Websites: Build each Vitepress website individually using the Vitepress build command (npm run build or yarn build). Ensure that the generated static files are output to the correct directory for each website.

4. Publish Vitepress Websites: Publish the static files of each Vitepress website to the appropriate virtual application path within the Azure App Service instance. You can do this by deploying the files directly or using a deployment mechanism like Azure DevOps or GitHub Actions.

5. Set up Azure Functions: If your Vitepress websites require server-side functionality, you can utilize Azure Functions. You can create Azure Functions to handle specific API calls or dynamic content generation for your Vitepress websites.

6. Configure DNS: Update your DNS configuration to point the desired subdomains or paths (companydomain/web/projectA, companydomain/web/projectB) to the Azure App Service instance.