This repository is a template for service desktop apps. When a new app needs to be added, use this template to generate the repository.
Currently, fe-customer-desktop
and fe-worker-desktop
has a script which will automatize the set-up of the new app.
You will just need to run:
npm run add-app
This will require some questions: the app name, port number (either autogenerated or manually entered), ticket number to set up and if you want to use the GitHub Cli to create the PRs at the end of the script.
Please see more on these links:
IMPORTANT: WHEN ADDING A NEW APP, PLEASE CREATE A DEVOPS TICKET FOR THE CREATION OF A NEW BUILD PIPELINE. FAILURE TO DO THIS WILL BREAK THE APPLICATION.
IMPORTANT: This template is for multiple desktops, to it should change the name of the app according to the desktop. Current desktops:
fe-service-desktop-[APPNAME]
Service Desktopfe-customer-desktop-[APPNAME]
Customer Desktopfe-worker-desktop-[APPNAME]
Worker Desktop
IMPORTANT: Please follow the instructions according to the desktop the app should be located.
-
Create a DevOps ticket to create a new repository based on this template. The repository name should follow the usual pattern:
fe-service-desktop-[APPNAME]
,fe-customer-desktop-[APPNAME]
orfe-worker-desktop-[APPNAME]
. DevOps should know to use the template for the repository, but it may be a good idea to mention it in the ticket just in case. -
Locate everywhere it says "sample" to your [APPNAME]. You will find all these locations here:
- ./package.json. Update name and description.
- ./webpack.common.js. Update
ModuleFederationPlugin
references andoutput
. - ./webpack.dev.js. Change the port to a unique port number. You can see what port isn't taken by looking at the Applications table below.
- ./webpack.prod.js. Update
appName
inS3BuildArtifactWebpackPlugin
plugin instances (both of them) to be the name of your app (withoutfe-service-desktop
,fe-customer-desktop
orfe-worker-desktop
) - ./webpack.hotfix.js. Update
appName
inS3BuildArtifactWebpackPlugin
plugin instances to be the name of your app (withoutfe-service-desktop
,fe-customer-desktop
orfe-worker-desktop
) - ./jest.config.js. Update
Sample
incoveragePathIgnorePatterns
. - ./src/XXXXX.tsx. Rename the main component that gets exported.
- Update
SampleApp
on the Material UI methodcreateGenerateClassName
. - Update
sample-app
on theErrorBoundary
(If you use it) - Update
sample-app
on theConfigProvider
(If you use it)
- Update
- ./src/bootstrap.tsx. Update the references to new component.
-
Update the following files in
core
with your application.- Add your app to the
ModuleFederationPlugin
>remotes
on the file./core/webpack.common.js
- Service Desktop ./core/webpack.common.js
- Customer Desktop ./core/webpack.common.js
- Worker Desktop ./core/webpack.common.js
- Import your file and register your application with
registerApplication()
in the file./core/src/index
(this is only if the app will be a page, not for small MF will be inside other MF). Also add your app toapplicationsEnum
. See 6.3 & 6.4 for setup of app flags.- Service Desktop ./core/src/index.js
- Customer Desktop ./core/src/index.js
- Worker Desktop ./core/src/index.js
- Add your app to
./app.json
orapps.json
copying the format from the other apps.- Service Desktop ./app.json
- Customer Desktop ./apps.json
- Worker Desktop ./apps.json
- Add your app to the
-
Adding a new port to host you app
- Check a unique port number to use in the core documentation to use in your app and add a new row in the documentation table with your app name, port number and repository url
- Add new port number in your app object on the core apps (step 3.iii) on the
local
key- Service Desktop ./app.json
- Customer Desktop ./app.json
- Worker Desktop ./app.json
- Add you port number on your projects ./webpack.dev.js
-
Add configs for git - We clone and ignore your module to allow for local building
-
Add your sub-project to the
.gitignore
file on coreService Desktop(NO NEEDED FOR SERVICE DESKTOP) .gitignoreCustomer Desktop(NO NEEDED FOR CUSTOMER DESKTOP) .gitignoreWorker Desktop(NO NEEDED FOR WORKER DESKTOP) .gitignore
-
Add your sub-project name and git clone command on the
Makefile
on core- Add your app to the following
./Makefile
script:make install
- Add your app to the following
./Makefile
script:make copy-core-defs
- (NO NEEDED FOR SERVICE DESKTOP)
- Add your app to the following
-
-
Languages, Constants and Feature flags. Run on configs project
npm run add-apps
and follow the questions. Otherwise, add it manually- Add your App configs
- Service Desktop Configs https://github.com/swipejobs/fe-service-desktop-configs
- Customer Desktop Configs https://github.com/swipejobs/fe-customer-desktop-configs
- Worker Desktop Configs https://github.com/swipejobs/fe-worker-desktop-configs
- Instructions will be in that repo.
- Add your app to the core config in all apps and partners. Set flag to false for all environments except dev while
developing app. This is still a manual process.
- Service Desktop https://github.com/swipejobs/fe-service-desktop-configs/blob/develop/configurations/sj/dev/core/config.json
- Customer Desktop https://github.com/swipejobs/fe-customer-desktop-configs/blob/develop.base/core/config.json
- Worker Desktop https://github.com/swipejobs/fe-worker-desktop-configs/blob/develop.base/core/config.json
- Add your app to the
Apps
interface.- Service Desktop https://github.com/swipejobs/fe-service-desktop-core/blob/develop/core/src/services/GetConfig.ts#L12
- Customer Desktop https://github.com/swipejobs/fe-customer-desktop-core/blob/develop/core/src/services/GetConfig.ts#L14
- Worker Desktop https://github.com/swipejobs/fe-worker-desktop-core/blob/develop/core/src/services/GetConfig.ts#L14
- Add your App configs
-
run
npm run start
from the project root:- Host the entire app by browsing to your path to verify your app is being imported correctly in the following
hosts.
- Service Desktop
https://localhost:8080/
- Customer Desktop
https://localhost:9000/
- Worker Desktop
https://localhost:7000/
- Service Desktop
- You can also open your new app with the port defined for the app (your unique port)
- Service Desktop Ex.
http://localhost:8084/
- Customer Desktop Ex.
http://localhost:9002/
- Worker Desktop Ex.
http://localhost:7002/
- Service Desktop Ex.
- Host the entire app by browsing to your path to verify your app is being imported correctly in the following
hosts.
-
Add your app details into this README.md for other developers 🙂
- Add new app details to the Service Desktop App models
in token-interceptor project
- Service Desktop app on
./src/modules/serviceDesktop.ts
. - Customer Desktop app on
./src/modules/customerDesktop.ts
. - Worker Desktop app on
./src/modules/workerDesktop.ts
.
- Service Desktop app on
- Add new app details to the Service Desktop App models
in token-interceptor project
-
Update
./src/core/defs.d.ts
file on your apps from the latest on core- Service Desktop ./src/core/defs.d.ts
- Customer Desktop ./src/core/defs.d.ts
- Worker Desktop ./src/core/defs.d.ts
-
ONLY CUSTOMER DESKTOP - Pass
i18next
instance from core to the props of theConfigProvider
of@swipejobs/react-hook
on you file./src/XXXXX.tsx
.<ConfigProvider app="sample-app" i18next={i18next}> {...} </ConfigProvider>
-
ONLY
CUSTOMER DESKTOP
ANDWORKER DESKTOP
- Use the main share components on the library@swipejobs/fe-core-elements
(You will need to donpm i @swipejobs/fe-core-elements
)- Use the
ErrorBoundary
on@swipejobs/fe-core-elements
. Then remove the local './src/components/ErrorBoundary' and test on './src/components/** tests**'. - Use the share wrapper on the view
PageViewContainer
on@swipejobs/fe-core-elements
. This should be used as the first wrapper './src/components/SampleComponent.tsx.
- Use the
-
ONLY
CUSTOMER DESKTOP
ANDWORKER DESKTOP
- Use the local create theme method from@swipejobs/react-hook
to handle different languages. Import on the file./src/XXXXX.tsx
the methoduseLocaleTheme
and use the methodcreateLocaleTheme
inside to create the theme.import { ConfigProvider, useLocaleTheme } from '@swipejobs/react-hooks'; const Sample: React.FC<CoreProps<ConfigData, FlagsData, LangData>> = (props) => { const { singleSpa, muiTheme, i18next } = props; const { createLocaleTheme } = useLocaleTheme({ i18next }); const theme = createLocaleTheme(muiTheme); return ( <ThemeProvider theme={theme}> {...} </ThemeProvider> ); }
-
ONLY
CUSTOMER DESKTOP
ANDWORKER DESKTOP
- If you want to use the module@swipejobs/permissions-conditional
to check the permissions. You will need to use the version 2.- Add the PermissionsProvider on
./src/XXXXX.tsx
. doc
import React from 'react'; const Sample: React.FC<CoreProps<ConfigData, FlagsData, LangData>> = (props) => { const { singleSpa, muiTheme, i18next } = props; return ( <PermissionsProvider desktopType={"customer"}> {...} </PermissionsProvider> ); }
- Add the PermissionsProvider on
-
ONLY
CUSTOMER DESKTOP
ANDWORKER DESKTOP
- If you are using a date library asluxon
please add it on ./webpack.common.jsshared
libraries of theModuleFederationPlugin
. This will handle the language changes on the library.module.exports = { plugins: [ new ModuleFederationPlugin({ shared: { ..., 'react-i18next': { singleton: true, }, luxon: { singleton: true, requiredVersion: dependencies.luxon, }, 'single-spa': { singleton: true, }, ... } }), ... ] }
This template uses strict Type Checking. It also uses a webpack plugin that will break the build if TS errors are not resolved. Please fix any TS errors before pushing, or the pipeline will fail.