Guide on how to deploy as Azure static website or app service

[AsuraKev]

Hi there,

are there or will there be a in-depth deployment guide to some cloud infrastructure such as Azure? Also is it not possible to directly run the index.html on the browser after the build?

thanks

[chenjiahan]

Also is it not possible to directly run the index.html on the browser after the build?

You can run the modern serve command to run production app: https://modernjs.dev/en/apis/app/commands.html#modern-serve

[AllenAttuned]

Thanks for linking the docs. So you can you just dump those static files somewhere and then serve them? Usually, what I do to test a build is use npx serve on the build directory. I missed it yesterday, but the build output names the "main" HTML file main.html. Renaming this to index.html seemed to solve the issue, and I can serve the static files using something like npx serve.

.
|____main.f6349dbe.js
|____lib-router.a2113bfd.js
|____476.dfb6852e.js.LICENSE.txt
|____async
| |____products
| | |____(id)
| | | |____page.79a8ae59.js
| | |____page.35c17bfa.js
| |____page.a619a68a.js
| |____101.a5464db7.js
| |____101.a5464db7.js.LICENSE.txt
| |____page.d7915515.css
|____lib-react.eb4f86f6.js
|____lib-react.eb4f86f6.js.LICENSE.txt
|____nestedRoutes.json
|____modern.config.json
|____route.json
|____main.html # <---- This seemed to be the issue
|____routes-manifest.json
|____lib-router.a2113bfd.js.LICENSE.txt
|____lib-polyfill.1a011935.js
|____476.dfb6852e.js

Is it possible to configure Modern.js to name the main point of entry index.html rather than main.html?

This is my modern.config.js

import { appTools, defineConfig } from '@modern-js/app-tools';

// https://modernjs.dev/en/configure/app/usage
export default defineConfig({
  output: {
    distPath: {
      js: '',
      css: '',
      html: '',
    },
    cleanDistPath: true,
    disableSourceMap: true,
  },
  html: {
    disableHtmlFolder: true,
  },
  runtime: {
    router: true,
  },
  plugins: [
    appTools({
      bundler: 'webpack', // Set to 'experimental-rspack' to enable rspack ⚡️🦀
    }),
  ],
});

[xc2]

source.mainEntryName will help

[AllenAttuned]

Amazing, thank you so much!

[AllenAttuned]

Apologies, another question.

If you're deploying in this manner, not using modern serve, do you lose out on the routing features and have to use Self-controlled routing?

When I'm serving using npx serve, I can load the web app and routing works as expected if navigating using the <Link> elements in the UI. However, if I try and go to the route directly, or refresh the page while on a route, I'll get a 404.

This is my route structure:

.
|____modern-app-env.d.ts
|____.eslintrc.js
|____routes
| |____products
| | |____page.data.ts
| | |____[id]
| | | |____page.data.ts
| | | |____page.tsx
| | |____page.tsx
| |____index.css
| |____layout.tsx
| |____page.tsx

Here's my config

export default defineConfig({
  output: {
    distPath: {
      html: '',
    },
    cleanDistPath: true,
  },
  html: {
    disableHtmlFolder: true,
  },
  source: {
    mainEntryName: 'index'
  },
  runtime: {
    router: {
      supportHtml5History: true,
    }
  },
  plugins: [
    appTools({
      bundler: 'webpack',
    }),
  ],
});

[xc2]

further discussion moved to #5501

[chenjiahan]

are there or will there be a in-depth deployment guide to some cloud infrastructure such as Azure?

I think we will work on it, related issue: #3624

If you are interested in contributing relevant documentation, feel free to send a pull request 😄