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

webapp(cli): migrate to vite #772

Merged
merged 4 commits into from
Aug 8, 2023
Merged

webapp(cli): migrate to vite #772

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
59e5d87
feat(webapp): migrate to `vite`
Rotzbua Aug 8, 2023
2e9589b
fix(webapp): remove outdated chunk hints for webpack
Rotzbua Aug 8, 2023
e626401
fix(webapp): add build paramter for [email protected]
Rotzbua Aug 8, 2023
3ced839
feat(webapp): add legacy build for older browser
Rotzbua Aug 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 6 additions & 8 deletions docker-compose.dev.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,15 +70,13 @@ services:
volumes:
- ./www/webapp/:/usr/src/app/
working_dir: /usr/src/app/
command: bash -c "npm install && npm run serve --fix"
command: bash -c "npm install && npm run dev -- --host"
environment:
- CODESANDBOX_SSE=1 # so that ws: protocol ends up as auto: in node_modules/@vue/cli-service/lib/commands/serve.js
- CYPRESS_CACHE_FOLDER=/tmp/.cache # https://github.com/cypress-io/cypress/issues/1281#issuecomment-404823001
Comment on lines -75 to -76
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch!

- VUE_APP_DESECSTACK_NS=${DESECSTACK_NS}
- VUE_APP_DESECSTACK_API_SEPA_CREDITOR_ID=${DESECSTACK_API_SEPA_CREDITOR_ID}
- VUE_APP_DESECSTACK_API_SEPA_CREDITOR_NAME=${DESECSTACK_API_SEPA_CREDITOR_NAME}
- VUE_APP_LOCAL_PUBLIC_SUFFIXES=dedyn.${DESECSTACK_DOMAIN}
- VUE_APP_EMAIL=support@desec.${DESECSTACK_DOMAIN}
- VITE_APP_DESECSTACK_NS=${DESECSTACK_NS}
- VITE_APP_DESECSTACK_API_SEPA_CREDITOR_ID=${DESECSTACK_API_SEPA_CREDITOR_ID}
- VITE_APP_DESECSTACK_API_SEPA_CREDITOR_NAME=${DESECSTACK_API_SEPA_CREDITOR_NAME}
- VITE_APP_LOCAL_PUBLIC_SUFFIXES=dedyn.${DESECSTACK_DOMAIN}
- VITE_APP_EMAIL=support@desec.${DESECSTACK_DOMAIN}
networks:
- rearwebapp
logging:
Expand Down
12 changes: 6 additions & 6 deletions www/Dockerfile
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,14 @@ ARG DESECSTACK_API_SEPA_CREDITOR_ID
ARG DESECSTACK_API_SEPA_CREDITOR_NAME
ARG DESECSTACK_DOMAIN
ARG DESECSTACK_NS
ENV VUE_APP_DESECSTACK_NS=${DESECSTACK_NS} \
VUE_APP_DESECSTACK_API_SEPA_CREDITOR_ID=${DESECSTACK_API_SEPA_CREDITOR_ID} \
VUE_APP_DESECSTACK_API_SEPA_CREDITOR_NAME=${DESECSTACK_API_SEPA_CREDITOR_NAME} \
VUE_APP_LOCAL_PUBLIC_SUFFIXES=dedyn.${DESECSTACK_DOMAIN} \
VUE_APP_EMAIL=support@desec.${DESECSTACK_DOMAIN}
ENV VITE_APP_DESECSTACK_NS=${DESECSTACK_NS} \
VITE_APP_DESECSTACK_API_SEPA_CREDITOR_ID=${DESECSTACK_API_SEPA_CREDITOR_ID} \
VITE_APP_DESECSTACK_API_SEPA_CREDITOR_NAME=${DESECSTACK_API_SEPA_CREDITOR_NAME} \
VITE_APP_LOCAL_PUBLIC_SUFFIXES=dedyn.${DESECSTACK_DOMAIN} \
VITE_APP_EMAIL=support@desec.${DESECSTACK_DOMAIN}

COPY webapp/ /usr/src/app/
RUN npm run build -- --no-clean
RUN npm run build -- --emptyOutDir false


FROM nginx:mainline-alpine
Expand Down
1 change: 0 additions & 1 deletion www/webapp/.eslintrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ module.exports = {
root: true,
env: {
browser: true,
node: true, // Can be removed after migration to vite.
es2024: true,
},
parserOptions: {
Expand Down
4 changes: 2 additions & 2 deletions www/webapp/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ npm install

### Compiles and hot-reloads for development
```
npm run serve
npm run dev
```

### Compiles and minifies for production
Expand All @@ -21,4 +21,4 @@ npm run lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
See [Configuration Reference](https://vitejs.dev/config/).
5 changes: 0 additions & 5 deletions www/webapp/babel.config.js
View file
Open in desktop

This file was deleted.

5 changes: 3 additions & 2 deletions www/webapp/public/index.html → www/webapp/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.svg" sizes="any">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="icon" href="/favicon.svg" sizes="any">
<link rel="icon" href="/favicon.ico">
<title>deSEC – Free Secure DNS</title>
</head>
<body>
Expand All @@ -26,6 +26,7 @@ <h2>🛑 Warning</h2>
</p>
</noscript>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
<!-- built files will be auto injected -->
</body>
</html>
22 changes: 10 additions & 12 deletions www/webapp/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,9 @@
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"dev": "vite",
"serve": "vite preview",
"build": "vite build",
"lint": "eslint --ignore-path .gitignore --no-fix src/**/*.{vue,js,json}",
"lint:fix": "eslint --ignore-path .gitignore --fix src/**/*.{vue,js,json}"
},
Expand All @@ -13,27 +14,24 @@
"@mdi/font": "^7.2.96",
"@mdi/js": "~7.2.96",
"axios": "^1.4.0",
"core-js": "^3.27.1",
"date-fns": "^2.30.0",
"pinia": "^2.0.30",
"vue": "~2.7.14",
"vue-router": "~3.6.5",
"vuelidate": "^0.7.7",
"vuetify": "^2.6.13"
"vuetify": "^2.7.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^5.0.8",
"@vue/cli-plugin-router": "^5.0.8",
"@vue/cli-service": "^5.0.8",
"eslint": "^8.31.0",
"@vitejs/plugin-legacy": "^4.1.1",
"@vitejs/plugin-vue2": "^2.2.0",
"eslint": "^8.45.0",
"eslint-import-resolver-alias": "^1.1.2",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-vue": "^9.8.0",
"eslint-plugin-vue": "^9.15.1",
"eslint-plugin-vuetify": "^1.1.0",
"sass": "~1.64.2",
"sass-loader": "^13.2.0",
"vue-cli-plugin-vuetify": "^2.5.8",
"vue-template-compiler": "^2.7.14",
"unplugin-vue-components": "^0.25.1",
"vite": "^4.4.5",
"vuetify-loader": "~1.9.1"
}
}
5 changes: 0 additions & 5 deletions www/webapp/postcss.config.js
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion www/webapp/src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -199,7 +199,7 @@ export default {
data: () => ({
user: useUserStore(),
drawer: false,
email: process.env.VUE_APP_EMAIL,
email: import.meta.env.VITE_APP_EMAIL,
Rotzbua marked this conversation as resolved.
Show resolved Hide resolved
mdiHeart,
mdiMenuDown,
tabmenu: {
Expand Down
2 changes: 1 addition & 1 deletion www/webapp/src/components/ActivateAccountActionHandler.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@
data: () => ({
auto_submit: true,
captchaWorking: false,
LOCAL_PUBLIC_SUFFIXES: process.env.VUE_APP_LOCAL_PUBLIC_SUFFIXES.split(' '),
LOCAL_PUBLIC_SUFFIXES: import.meta.env.VITE_APP_LOCAL_PUBLIC_SUFFIXES.split(' '),
captcha: null,
captcha_required: false,

Expand Down
4 changes: 2 additions & 2 deletions www/webapp/src/components/DonateDirectDebitForm.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,8 +128,8 @@
mdiEmail,

/* from env */
creditorid: process.env.VUE_APP_DESECSTACK_API_SEPA_CREDITOR_ID,
creditorname: process.env.VUE_APP_DESECSTACK_API_SEPA_CREDITOR_NAME,
creditorid: import.meta.env.VITE_APP_DESECSTACK_API_SEPA_CREDITOR_ID,
creditorname: import.meta.env.VITE_APP_DESECSTACK_API_SEPA_CREDITOR_NAME,

/* account holder name field */
name: '',
Expand Down
42 changes: 21 additions & 21 deletions www/webapp/src/router/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,24 +15,24 @@ const routes = [
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "signup" */ '@/views/SignUp.vue')
peterthomassen marked this conversation as resolved.
Show resolved Hide resolved
component: () => import('@/views/SignUp.vue'),
},
{
path: '/custom-setup/:domain',
name: 'customSetup',
component: () => import(/* webpackChunkName: "signup" */ '@/views/DomainSetupPage.vue'),
component: () => import('@/views/DomainSetupPage.vue'),
props: true,
},
{
path: '/dyn-setup/:domain',
alias: '/dynsetup/:domain',
name: 'dynSetup',
component: () => import(/* webpackChunkName: "signup" */ '@/views/DynSetup.vue')
component: () => import('@/views/DynSetup.vue'),
},
{
path: '/welcome/:domain?',
name: 'welcome',
component: () => import(/* webpackChunkName: "signup" */ '@/views/WelcomePage.vue'),
component: () => import('@/views/WelcomePage.vue'),
},
{
path: 'https://desec.readthedocs.io/',
Expand All @@ -47,47 +47,47 @@ const routes = [
{
path: '/confirm/:action/:code',
name: 'confirmation',
component: () => import(/* webpackChunkName: "account" */ '@/views/ConfirmationPage.vue'),
component: () => import('@/views/ConfirmationPage.vue')
},
{
path: '/reset-password/:email?',
name: 'reset-password',
component: () => import(/* webpackChunkName: "account" */ '@/views/ResetPassword.vue')
component: () => import('@/views/ResetPassword.vue'),
},
{
path: '/totp/',
name: 'totp',
component: () => import(/* webpackChunkName: "account" */ '@/views/CrudListTOTP.vue'),
component: () => import('@/views/CrudListTOTP.vue'),
meta: {guest: false},
},
{
path: '/totp-verify/',
name: 'TOTPVerify',
component: () => import(/* webpackChunkName: "login" */ '@/views/Console/TOTPVerifyDialog.vue'),
component: () => import('@/views/Console/TOTPVerifyDialog.vue'),
props: (route) => ({...route.params}),
},
{
path: '/mfa/',
name: 'mfa',
component: () => import(/* webpackChunkName: "account" */ '@/views/MFA.vue'),
component: () => import('@/views/MFA.vue'),
meta: {guest: false},
},
{
path: '/change-email/:email?',
name: 'change-email',
component: () => import(/* webpackChunkName: "account" */ '@/views/ChangeEmail.vue'),
component: () => import('@/views/ChangeEmail.vue'),
meta: {guest: false},
},
{
path: '/delete-account/',
name: 'delete-account',
component: () => import(/* webpackChunkName: "account" */ '@/views/DeleteAccount.vue'),
component: () => import('@/views/DeleteAccount.vue'),
meta: {guest: false},
},
{
path: '/donate/',
name: 'donate',
component: () => import(/* webpackChunkName: "extra" */ '@/views/DonatePage.vue'),
component: () => import('@/views/DonatePage.vue'),
},
{
path: 'https://github.com/desec-io/desec-stack/projects?query=is%3Aopen+sort%3Aname-asc&type=classic',
Expand All @@ -97,51 +97,51 @@ const routes = [
{
path: '/impressum/',
name: 'impressum',
component: () => import(/* webpackChunkName: "extra" */ '@/views/ImpressumPage.vue'),
component: () => import('@/views/ImpressumPage.vue'),
},
{
path: '/privacy-policy/',
name: 'privacy-policy',
component: () => import(/* webpackChunkName: "extra" */ '@/views/PrivacyPolicy.vue')
component: () => import('@/views/PrivacyPolicy.vue'),
},
{
path: '/terms/',
name: 'terms',
component: () => import(/* webpackChunkName: "extra" */ '@/views/TermsPage.vue'),
component: () => import('@/views/TermsPage.vue'),
},
{
path: '/about/',
name: 'about',
component: () => import(/* webpackChunkName: "extra" */ '@/views/AboutPage.vue'),
component: () => import('@/views/AboutPage.vue'),
},
{
path: '/login',
name: 'login',
component: () => import(/* webpackChunkName: "login" */ '@/views/LoginPage.vue'),
component: () => import('@/views/LoginPage.vue'),
},
{
path: '/tokens',
name: 'tokens',
component: () => import(/* webpackChunkName: "gui" */ '@/views/CrudListToken.vue'),
component: () => import('@/views/CrudListToken.vue'),
meta: {guest: false},
},
{
path: '/domains',
name: 'domains',
component: () => import(/* webpackChunkName: "gui" */ '@/views/CrudListDomain.vue'),
component: () => import('@/views/CrudListDomain.vue'),
meta: {guest: false},
},
{
path: '/domains/:domain',
name: 'domain',
component: () => import(/* webpackChunkName: "gui" */ '@/views/CrudListRecord.vue'),
component: () => import('@/views/CrudListRecord.vue'),
meta: {guest: false},
},
]

const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
base: import.meta.env.BASE_URL,
scrollBehavior (to, from) {
// Skip if destination full path has query parameters and differs in no other way from previous
if (from && Object.keys(to.query).length) {
Expand Down
4 changes: 2 additions & 2 deletions www/webapp/src/views/DomainSetup.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,7 +154,7 @@ export default {
},
ns: {
type: Array,
default: () => process.env.VUE_APP_DESECSTACK_NS.split(' '),
default: () => import.meta.env.VITE_APP_DESECSTACK_NS.split(' '),
},
},
data: () => ({
Expand All @@ -171,7 +171,7 @@ export default {
snackbar_text: '',
tab1: 'ns',
tab2: 'ds',
LOCAL_PUBLIC_SUFFIXES: process.env.VUE_APP_LOCAL_PUBLIC_SUFFIXES.split(' '),
LOCAL_PUBLIC_SUFFIXES: import.meta.env.VITE_APP_LOCAL_PUBLIC_SUFFIXES.split(' '),
}),
computed: {
tabs: function () {
Expand Down
2 changes: 1 addition & 1 deletion www/webapp/src/views/DynSetup.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -191,7 +191,7 @@
errors: [],
ips: undefined,
token: undefined,
LOCAL_PUBLIC_SUFFIXES: process.env.VUE_APP_LOCAL_PUBLIC_SUFFIXES.split(' '),
LOCAL_PUBLIC_SUFFIXES: import.meta.env.VITE_APP_LOCAL_PUBLIC_SUFFIXES.split(' '),
lastChanged: undefined,
}),
async mounted() {
Expand Down
2 changes: 1 addition & 1 deletion www/webapp/src/views/HomePage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -246,7 +246,7 @@ export default {
},
data: () => ({
mdiEmail,
contact_email: process.env.VUE_APP_EMAIL,
contact_email: import.meta.env.VITE_APP_EMAIL,
contact_subject: 'Adopting of a Frontend Server',
contact_body: 'Dear deSEC,\n\nI would like to adopt a frontend server in your networks!',
domainType: null,
Expand Down
2 changes: 1 addition & 1 deletion www/webapp/src/views/ImpressumPage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
export default {
name: 'ImpressumPage',
data: () => ({
email: process.env.VUE_APP_EMAIL,
email: import.meta.env.VITE_APP_EMAIL,
}),
}
</script>
2 changes: 1 addition & 1 deletion www/webapp/src/views/PrivacyPolicy.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@
export default {
name: 'PrivacyPolicy',
data: () => ({
email: process.env.VUE_APP_EMAIL,
email: import.meta.env.VITE_APP_EMAIL,
privacy_policy: [
{
title: 'Visiting this Website',
Expand Down
2 changes: 1 addition & 1 deletion www/webapp/src/views/SignUp.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -178,7 +178,7 @@
import {digestError} from '@/utils';
import ErrorAlert from "@/components/ErrorAlert.vue";

const LOCAL_PUBLIC_SUFFIXES = process.env.VUE_APP_LOCAL_PUBLIC_SUFFIXES.split(' ');
const LOCAL_PUBLIC_SUFFIXES = import.meta.env.VITE_APP_LOCAL_PUBLIC_SUFFIXES.split(' ');

const HTTP = axios.create({
baseURL: '/api/v1/',
Expand Down
Loading
Loading