Azure / Azure/static-web-apps

Deploying micro frontend using webpack's module federation

Open
#1,307 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
No language data
Stars
346
Forks
67
PR merge metrics
No merged PRs in 30d

Description

We are attempting to deploy an individual web app that is exposing only a webpack module federation remote file without an index.html. The deployment is failing cause the Azure resource is looking for a default index.html file in the artifacts directory, which the micro frontend does not produce.

```bash
---End of Oryx build logs---
Try to validate location at: '/bin/staticsites/491071d9-a6bd-4308-ad0a-c3868e782251-swa-oryx/app/dist'.
Finished building app with Oryx
Failed to find a default file in the app artifacts folder (dist). Valid default files: index.html,Index.html.
If your application contains purely static content, please verify that the variable 'app_location' in your workflow file points to the root of your application.
If your application requires build steps, please validate that a default file exists in the build output directory.

For further information, please visit the Azure Static Web Apps documentation at https://docs.microsoft.com/en-us/azure/static-web-apps/
If you believe this behavior is unexpected, please raise a GitHub issue at https://github.com/azure/static-web-apps/issues/
Exiting
```

Steps to reproduce the behavior:
1. Create react app to host remote for webpack module federation
2. Use a similar webpack configuration
```js
plugins: [
new container.ModuleFederationPlugin({
name: 'profile',
filename: 'remoteEntry.js',
remotes: {
list_user: `list_user@https://{static_app}.azurestaticapps.net/remoteEntry.js`,
},
shared: {
react: {
singleton: true,
requiredVersion: deps.react,
},
'react-dom/client': {
singleton: true,
requiredVersion: deps['react-dom'],
},
},
}),
],
```
*The root file for this deployment will be `remoteEntry.js` and no index.html is produced.*

Actions yaml:
```yaml
name: Deploy React App

on:
push:
branches: [ "main" ]
paths:
- 'react-user-list/**'
pull_request:
types: [opened, synchronize, reopened, closed]
branches: [ "main" ]
workflow_dispatch:

# Environment variables available to all jobs and steps in this workflow
env:
APP_LOCATION: "/react-user-list" # location of your client code
API_LOCATION: "api" # location of your api source code - optional
APP_ARTIFACT_LOCATION: "dist" # location of client code build output
AZURE_STATIC_WEB_APPS_API_TOKEN: ${{ secrets.AZURE_STATIC_REACT_API_TOKEN }} # secret containing deployment token for your static web app

permissions:
contents: read

jobs:
build_and_deploy_job:
permissions:
contents: read # for actions/checkout to fetch code
pull-requests: write # for Azure/static-web-apps-deploy to comment on PRs
if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
runs-on: ubuntu-latest
name: Build and Deploy Job
defaults:
run:
working-directory: '/react-user-list'
steps:
- uses: actions/checkout@v3
with:
submodules: true
- name: Build And Deploy
id: builddeploy
uses: Azure/static-web-apps-deploy@v1
with:
# skip_app_build: true
azure_static_web_apps_api_token: ${{ env.AZURE_STATIC_WEB_APPS_API_TOKEN }} # secret containing api token for app
repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
action: "upload"
###### Repository/Build Configurations - These values can be configured to match you app requirements. ######
# For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
app_location: ${{ env.APP_LOCATION }}
api_location: ${{ env.API_LOCATION }}
app_artifact_location: ${{ env.APP_ARTIFACT_LOCATION }}
###### End of Repository/Build Configurations ######

```

**Expected behavior**
Azure Static Site that has a Javascript file as a default file.

**Screenshots**

Screen Shot 2023-10-24 at 2 37 02 PM

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.