chore: 開発モードでフロントエンドとバックエンドを独立して起動するようにする（再） (#12593)
* [wip]run standalone vite * [wip]run standalone vite * some fix (tabler icons, sw, streaming) * fix theme * fix run scripts * favicon * client-assets * cssの読み込み順序とCSP設定の変更 * fix lang change * fix clientManifest * baseを相対パスにしてドメイン直下とサブディレクトリ配下両方に対応 * 色々修正 * 色々修正 * 色々修正 * fix * Revert "client-assets" This reverts commit 582601e90eb771875bdf8aba263da2316a59d01b. # Conflicts: # packages/frontend/vite.config.ts * 色々修正 * fix * fix * add url and proxy to server proxy * Update packages/frontend/src/index.html * wip * Merge remote-tracking branch 'origin/develop' into feat/launch-standalone-frontend # Conflicts: # packages/frontend/src/pages/welcome.entrance.a.vue * Merge remote-tracking branch 'origin/develop' into feat/launch-standalone-frontend # Conflicts: # packages/frontend/src/pages/welcome.entrance.a.vue * fix tabler load * Apply suggestions from code review * Update packages/frontend/src/index.html * fix * fix vite.config.local-dev.ts * fix CONTRIBUTING.md --------- Co-authored-by: FruitRiin <nassii74@gmail.com> Co-authored-by: osamu <46447427+sam-osamu@users.noreply.github.com> Co-authored-by: 果物リン <fruitriin@riinswork.space> Co-authored-by: syuilo <Syuilotan@yahoo.co.jp> Co-authored-by: ozelot <contact@ozelot.dev>
This commit is contained in:
おさむのひと
GitHub
parent
e6d01e33e6
commit
b0039f0946
11 changed files with 153 additions and 3 deletions
|
|
@ -4,6 +4,7 @@
|
|||
"type": "module",
|
||||
"scripts": {
|
||||
"watch": "vite",
|
||||
"dev": "vite --config vite.config.local-dev.ts",
|
||||
"build": "vite build",
|
||||
"storybook-dev": "nodemon --verbose --watch src --ext \"mdx,ts,vue\" --ignore \"*.stories.ts\" --exec \"pnpm build-storybook-pre && pnpm exec storybook dev -p 6006 --ci\"",
|
||||
"build-storybook-pre": "(tsc -p .storybook || echo done.) && node .storybook/generate.js && node .storybook/preload-locale.js && node .storybook/preload-theme.js",
|
||||
|
|
|
|||
11
packages/frontend/src/_dev_boot_.ts
Normal file
11
packages/frontend/src/_dev_boot_.ts
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
/*
|
||||
* SPDX-FileCopyrightText: syuilo and other misskey contributors
|
||||
* SPDX-License-Identifier: AGPL-3.0-only
|
||||
*/
|
||||
|
||||
// devモードで起動される際（index.htmlを使うとき）はrouterが暴発してしまってうまく読み込めない。
|
||||
// よって、devモードとして起動されるときはビルド時に組み込む形としておく。
|
||||
// (pnpm start時はpugファイルの中で静的リソースとして読み込むようになっており、この問題は起こっていない)
|
||||
import '@tabler/icons-webfont/tabler-icons.scss';
|
||||
|
||||
import('@/_boot_.js');
|
||||
|
|
@ -187,6 +187,12 @@ export async function common(createVue: () => App<Element>) {
|
|||
if (instance.defaultLightTheme != null) ColdDeviceStorage.set('lightTheme', JSON.parse(instance.defaultLightTheme));
|
||||
if (instance.defaultDarkTheme != null) ColdDeviceStorage.set('darkTheme', JSON.parse(instance.defaultDarkTheme));
|
||||
defaultStore.set('themeInitial', false);
|
||||
} else {
|
||||
if (defaultStore.state.darkMode) {
|
||||
applyTheme(darkTheme.value);
|
||||
} else {
|
||||
applyTheme(lightTheme.value);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
30
packages/frontend/src/index.html
Normal file
30
packages/frontend/src/index.html
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
<!--
|
||||
SPDX-FileCopyrightText: syuilo and other misskey contributors
|
||||
SPDX-License-Identifier: AGPL-3.0-only
|
||||
-->
|
||||
|
||||
<!--
|
||||
開発モードのviteはこのファイルを起点にサーバーを起動します。
|
||||
このファイルに書かれた [t]js のリンクと (s)cssのリンクと、その依存関係にあるファイルはビルドされます
|
||||
-->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>misskey</title>
|
||||
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
|
||||
<meta
|
||||
http-equiv="Content-Security-Policy"
|
||||
content="default-src 'self';
|
||||
script-src 'self';
|
||||
style-src 'self' 'unsafe-inline';
|
||||
img-src 'self' data: www.google.com xn--931a.moe localhost:3000 localhost:5137 127.0.0.1:5173 127.0.0.1:3000"
|
||||
/>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="./_dev_boot_.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -293,6 +293,7 @@ const useGroupedNotifications = computed(defaultStore.makeGetterSetter('useGroup
|
|||
watch(lang, () => {
|
||||
miLocalStorage.setItem('lang', lang.value as string);
|
||||
miLocalStorage.removeItem('locale');
|
||||
miLocalStorage.removeItem('localeVersion');
|
||||
});
|
||||
|
||||
watch(fontSize, () => {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<XTimeline class="tl"/>
|
||||
<div class="shape1"></div>
|
||||
<div class="shape2"></div>
|
||||
<img src="/client-assets/misskey.svg" class="misskey"/>
|
||||
<img :src="misskeysvg" class="misskey"/>
|
||||
<div class="emojis">
|
||||
<MkEmoji :normal="true" :noStyle="true" emoji="👍"/>
|
||||
<MkEmoji :normal="true" :noStyle="true" emoji="❤"/>
|
||||
|
|
@ -38,6 +38,7 @@ import * as Misskey from 'misskey-js';
|
|||
import XTimeline from './welcome.timeline.vue';
|
||||
import MarqueeText from '@/components/MkMarquee.vue';
|
||||
import MkFeaturedPhotos from '@/components/MkFeaturedPhotos.vue';
|
||||
import misskeysvg from '/client-assets/misskey.svg';
|
||||
import MkInfo from '@/components/MkInfo.vue';
|
||||
import { instanceName } from '@/config.js';
|
||||
import * as os from '@/os.js';
|
||||
|
|
@ -55,7 +56,6 @@ function getInstanceIcon(instance: Misskey.entities.FederationInstance): string
|
|||
if (!instance.iconUrl) {
|
||||
return '';
|
||||
}
|
||||
|
||||
return getProxiedImageUrl(instance.iconUrl, 'preview');
|
||||
}
|
||||
|
||||
|
|
|
|||
53
packages/frontend/vite.config.local-dev.ts
Normal file
53
packages/frontend/vite.config.local-dev.ts
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
import dns from 'dns';
|
||||
import { defineConfig } from 'vite';
|
||||
import { getConfig } from './vite.config.js';
|
||||
|
||||
dns.setDefaultResultOrder('ipv4first');
|
||||
|
||||
const defaultConfig = getConfig();
|
||||
|
||||
const devConfig = {
|
||||
// 基本の設定は vite.config.js から引き継ぐ
|
||||
...defaultConfig,
|
||||
root: 'src',
|
||||
publicDir: '../assets',
|
||||
base: './',
|
||||
server: {
|
||||
host: 'localhost',
|
||||
port: 5173,
|
||||
proxy: {
|
||||
'/api': {
|
||||
changeOrigin: true,
|
||||
target: 'http://localhost:3000/',
|
||||
},
|
||||
'/assets': 'http://localhost:3000/',
|
||||
'/files': 'http://localhost:3000/',
|
||||
'/twemoji': 'http://localhost:3000/',
|
||||
'/fluent-emoji': 'http://localhost:3000/',
|
||||
'/sw.js': 'http://localhost:3000/',
|
||||
'/streaming': {
|
||||
target: 'ws://localhost:3000/',
|
||||
ws: true,
|
||||
},
|
||||
'/favicon.ico': 'http://localhost:3000/',
|
||||
'/identicon': {
|
||||
target: 'http://localhost:3000/',
|
||||
rewrite(path) {
|
||||
return path.replace('@localhost:5173', '');
|
||||
},
|
||||
},
|
||||
'/url': 'http://localhost:3000',
|
||||
'/proxy': 'http://localhost:3000',
|
||||
},
|
||||
},
|
||||
build: {
|
||||
...defaultConfig.build,
|
||||
rollupOptions: {
|
||||
...defaultConfig.build?.rollupOptions,
|
||||
input: 'index.html',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default defineConfig(({ command, mode }) => devConfig);
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue