Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

FAS-UI - Upgrade to Vite #18487

Closed
Jxio opened this issue Nov 7, 2023 · 4 comments
Closed

FAS-UI - Upgrade to Vite #18487

Jxio opened this issue Nov 7, 2023 · 4 comments
Assignees
@Jxio
Labels
Pay Work for Pay Team

Comments

@Jxio
Copy link
Collaborator

Jxio commented Nov 7, 2023 •
edited by seeker25
Loading

https://github.com/bcgov/sbc-auth/pull/2442/files
@Jxio Jxio self-assigned this Nov 7, 2023
@seeker25
Copy link
Collaborator

seeker25 commented Nov 7, 2023

Hey team! Please add your planning poker estimate with Zenhub @ochiu @seeker25 @Jxio @rodrigo-barraza

@seeker25 seeker25 added the Pay Work for Pay Team label Nov 7, 2023
@Jxio Jxio mentioned this issue Nov 15, 2023
Merged
This was referenced Nov 17, 2023
Closed
Closed
Closed
@Jxio
Copy link
Collaborator Author

Jxio commented Nov 22, 2023 •
edited
Loading

Upgraded FAS-UI to vite and vitest
Main steps for upgrades:
npm uninstall:

@vue/cli-plugin-babel @vue/cli-plugin-eslint @vue/cli-plugin-pwa @vue/cli-plugin-router @vue/cli-plugin-typescript @vue/cli-plugin-unit-jest @vue/cli-plugin-vuex @vue/cli-service sass-loader vue-template-compiler

npm install:

vite vite-plugin-environment vite-plugin-vue2 vitest vite-plugin-pwa vite-plugin-rewrite-all postcss-nesting sbc-common-components@3.0.9

Remove vue.config.js, and add vite.config.ts
Move index.html from /public to the root of project
Delete:
babel.config.js, babel related dependecies: core-js
Package.json script:

  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview --port 8080",
    "lint": "eslint . --ext ts,vue",
    "lint:nofix": "eslint . --ext ts,vue --no-fix",
    "lint:fix": "eslint . --ext ts,vue --fix src",
    "test:unit": "vitest run",
    "test:coverage": "vitest run --coverage",
    "build:lib": "vite build --mode lib"
  }

The BaseAddress point to bcrs-shared-components instead of sbc-common-components mixin
Some syntax, variables changes:

process.env --> import.meta.env
jest. -> vi.

PWA removal:
(manually set up the equivalent features since Vite doesn't have a built-in PWA configuration like Vue CLI.)

1. (reference error: require is not defined):
update src/plugins/i18n.ts -> import initializeI18n from './plugins/i18n' 
2. create a web manifest file public directory.
3. link the manifest file in the <head> section of index.html
4. set the theme color and MS tile color in the <meta> tags of index.html:
<meta name="theme-color" content="#003366">
<meta name="msapplication-TileColor" content="#fcba19">
5. Apple Mobile Web App Capable:
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

Service Worker:

1. vite project, the service-worker.js file should typically be placed in the public folder. This is because files in the public directory are served as-is without going through Vite's bundling and module system, which is what we want for a service worker.
2. manually include Workbox in service worker:
npm install workbox-cli --save-dev
3. update service worker registration at main.ts

@Jxio Jxio mentioned this issue Nov 23, 2023
Merged
@seeker25
Copy link
Collaborator

seeker25 commented Nov 27, 2023 •
edited
Loading

@AshnaMehta this should be on DEV, need a full retest of FAS-UI, same thing with the next ticket 18486 - probably will need to do the same with the Vue3 upgrade as well..

Edit: hold off for a bit, CD failing

@seeker25
Copy link
Collaborator

Moving testing for this to 18486

This was referenced Nov 29, 2023
Closed
Closed
Closed
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@Jxio Jxio

Labels
Pay Work for Pay Team
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@seeker25 @Jxio