Deploying micro frontend using webpack's module federation
- 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**
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.