Skip to content

Commit

Permalink
feat: improvement of the web perf
Browse files Browse the repository at this point in the history
  • Loading branch information
fpasquet committed Apr 11, 2023
1 parent 8780763 commit 68bae5e
Show file tree
Hide file tree
Showing 96 changed files with 2,180 additions and 2,019 deletions.
34 changes: 34 additions & 0 deletions .github/workflows/deploy-storybook.yml
@@ -0,0 +1,34 @@
name: Build and Deploy Storybook
on:
push:
branches:
- master
jobs:
build-and-deploy-storybook:
runs-on: ubuntu-latest
permissions:
contents: write
concurrency:
group: ${{ github.workflow }}-${{ github.ref }}
steps:
- name: Checkout Repo
uses: actions/checkout@v3
- name: Get yarn cache directory path
id: yarn-cache-dir-path
run: echo "::set-output name=dir::$(yarn cache dir)"
- uses: actions/cache@v3
id: yarn-cache
with:
path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
restore-keys: |
${{ runner.os }}-yarn-
- name: Install modules
run: yarn install --frozen-lockfile
- name: Build Storybook
run: yarn build:storybook
- name: Deploy Storybook
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./storybook-static
3 changes: 2 additions & 1 deletion .gitignore
Expand Up @@ -24,7 +24,8 @@ dist-ssr
*.sw?

# Custom
public/data
reports/*
storybook-static
public/imgs/posts
public/imgs/authors
public/feed.xml
70 changes: 55 additions & 15 deletions bin/build.ts
@@ -1,30 +1,70 @@
import { cpSync } from 'node:fs';
import { resolve } from 'node:path';
import { build as buildVite } from 'vite';
import { createServer as createViteServer } from 'vite';

const rootDir = process.cwd();
const outDir = resolve(rootDir, 'dist');
const outPublicDir = resolve(rootDir, 'dist/public');
const args = process.argv.slice(2).reduce<Record<string, string | number | boolean>>((currentArgs, currentArg) => {
const [key, value] = currentArg.replace('--', '').split('=');
currentArgs[key] = value;
return currentArgs;
}, {});

const copyImgs = (): void => {
const srcDir = resolve(rootDir, '_assets');
const outputDir = resolve(rootDir, 'public/imgs');
cpSync(srcDir, outputDir, { recursive: true });
};

const generateFeeds = async (): Promise<void> => {
const baseUrl = process.env.BASE_URL || '/';

const vite = await createViteServer({
server: { middlewareMode: true },
base: baseUrl,
appType: 'custom',
});

try {
const { generateFeedFile } = await vite.ssrLoadModule('/src/helpers/feedHelper.ts');
generateFeedFile({ rootDir: outPublicDir });
} catch (e) {
console.error(e);
} finally {
vite.close();
}
};

const build = async (): Promise<void> => {
// 1. Build Server
buildVite({
base: process.env.BASE_URL || '/',
build: {
emptyOutDir: false,
ssr: true,
outDir: 'dist',
rollupOptions: {
input: 'src/server.ts',
copyImgs();
if (args.ssr) {
await buildVite({
base: process.env.BASE_URL || '/',
build: {
emptyOutDir: false,
ssr: true,
outDir: outDir,
rollupOptions: {
input: 'src/server.ts',
},
},
},
mode: process.env.NODE_ENV || 'production',
});
mode: process.env.NODE_ENV || 'production',
});
}

// 2. Build Client
buildVite({
await buildVite({
base: process.env.BASE_URL || '/',
build: {
emptyOutDir: false,
manifest: true,
outDir: 'dist/public',
outDir: outPublicDir,
},
mode: process.env.NODE_ENV || 'production',
});

generateFeeds();
};

build();
13 changes: 13 additions & 0 deletions bin/dev.ts
@@ -1,5 +1,10 @@
import chokidar from 'chokidar';
import { cpSync } from 'node:fs';
import { resolve } from 'node:path';
import { createServer as createViteServer } from 'vite';

const rootDir = process.cwd();

const dev = async (): Promise<void> => {
const vite = await createViteServer({
base: process.env.BASE_URL || '/',
Expand All @@ -8,6 +13,14 @@ const dev = async (): Promise<void> => {
host: '0.0.0.0',
},
});

const assetsDir = resolve(rootDir, '_assets');
const watcher = chokidar.watch(assetsDir, { cwd: assetsDir });

watcher.on('all', (event, filePath) => {
cpSync(resolve(assetsDir, filePath), resolve(rootDir, 'public/imgs', filePath), { recursive: true });
});

await vite.ssrLoadModule('/src/server.ts');
};

Expand Down
39 changes: 0 additions & 39 deletions bin/prepare.ts

This file was deleted.

44 changes: 5 additions & 39 deletions bin/prerender.ts
@@ -1,11 +1,6 @@
import { existsSync, mkdirSync, writeFileSync } from 'node:fs';
import { dirname, resolve } from 'node:path';
import { resolve } from 'node:path';
import { createServer as createViteServer } from 'vite';

import { createRequestByUrl } from '../src/helpers/requestHelper';

const rootDir = process.cwd();

const prerender = async (): Promise<void> => {
const baseUrl = process.env.BASE_URL || '/';
const vite = await createViteServer({
Expand All @@ -16,40 +11,11 @@ const prerender = async (): Promise<void> => {
});

try {
const { render } = await vite.ssrLoadModule('/src/entry-server.tsx');
const { getLinksAndScripts } = await vite.ssrLoadModule('/src/helpers/ssrHelper.ts');

const { getI18nInstanceByLang, getUrlsByLang } = await vite.ssrLoadModule('/src/helpers/prerenderHelper.ts');
const urlsByLang = getUrlsByLang({ baseUrl });
const { links, scripts } = getLinksAndScripts({
dirname: resolve(rootDir, 'dist'),
baseUrl: process.env.BASE_URL,
const { generateHtmlFiles } = await vite.ssrLoadModule('/src/helpers/prerenderHelper.ts');
generateHtmlFiles({
rootDir: resolve(process.cwd(), 'dist'),
baseUrl,
});

for (const { lang, url } of urlsByLang) {
const i18n = getI18nInstanceByLang(lang);
const html = await render({
request: createRequestByUrl({ url }),
i18n,
links,
scripts,
});

const is404 = /\/404/.test(url);
const filePath = resolve(
rootDir,
'dist/public',
is404 ? '404.html' : `${url.length > 1 ? `${url.substring(1)}/` : ''}index.html`
).replace(baseUrl, '/');

const dirPath = dirname(filePath);
if (!existsSync(dirPath)) {
mkdirSync(dirPath, { recursive: true });
}
writeFileSync(filePath, html, 'utf8');
}

console.log('🦖🖨 Your static site is ready to deploy from dist');
} catch (e) {
console.error(e);
} finally {
Expand Down
40 changes: 20 additions & 20 deletions package.json
Expand Up @@ -4,12 +4,11 @@
"type": "module",
"scripts": {
"postinstall": "husky install",
"prepare": "yarn ts-node bin/prepare",
"ts-node": "ts-node -r dotenv/config",
"validate-and-format-markdown": "yarn ts-node bin/validateAndFormatMarkdown",
"indexation:algolia": "yarn ts-node bin/indexationAlgolia",
"build": "yarn ts-node bin/build",
"prerender": "yarn prepare && yarn build && yarn ts-node bin/prerender",
"prerender": "yarn build && yarn ts-node bin/prerender",
"start:dev": "yarn ts-node bin/dev",
"start:prod": "NODE_ENV=production node dist/server",
"start:static": "npx serv --path dist/public",
Expand All @@ -32,8 +31,8 @@
"node": ">= 16.0"
},
"dependencies": {
"@eleven-labs/design-system": "^0.5.4",
"@remix-run/router": "^1.3.2",
"@eleven-labs/design-system": "^0.6.0",
"@remix-run/router": "^1.5.0",
"algoliasearch": "^4.14.3",
"classnames": "^2.3.2",
"cross-fetch": "^3.1.5",
Expand All @@ -48,32 +47,26 @@
"react-dom": "^18.2.0",
"react-ga": "^3.3.1",
"react-i18next": "^12.1.5",
"react-markdown": "^8.0.5",
"react-router-dom": "^6.8.1",
"react-syntax-highlighter": "^15.5.0",
"rehype-raw": "^6.1.1",
"rehype-rewrite": "^3.0.6",
"react-router-dom": "^6.10.0",
"serve-static": "^1.15.0"
},
"devDependencies": {
"@babel/core": "^7.20.12",
"@elevenlabs/eslint-config": "^0.0.1",
"@storybook/addon-actions": "^7.0.0-beta.48",
"@storybook/addon-essentials": "^7.0.0-beta.48",
"@storybook/addon-interactions": "^7.0.0-beta.48",
"@storybook/addon-links": "^7.0.0-beta.48",
"@storybook/react": "^7.0.0-beta.48",
"@storybook/react-vite": "^7.0.0-beta.48",
"@storybook/testing-library": "^0.0.14-next.1",
"@storybook/addon-actions": "^7.0.2",
"@storybook/addon-essentials": "^7.0.2",
"@storybook/addon-interactions": "^7.0.2",
"@storybook/addon-links": "^7.0.2",
"@storybook/react": "^7.0.2",
"@storybook/react-vite": "^7.0.2",
"@storybook/testing-library": "^0.1.0",
"@types/express": "^4.17.17",
"@types/i18next": "^13.0.0",
"@types/markdown-it": "^12.2.3",
"@types/node": "^18.13.0",
"@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11",
"@types/react-i18next": "^8.1.0",
"@types/react-router-dom": "^5.3.3",
"@types/react-syntax-highlighter": "^15.5.6",
"@types/sanitize-html": "^2.8.1",
"@vitejs/plugin-react": "^3.1.0",
"autoprefixer": "^10.4.13",
Expand All @@ -82,22 +75,29 @@
"dotenv": "^16.0.3",
"eslint": "^8.27.0",
"feed": "^4.2.2",
"glob": "^9.3.2",
"gray-matter": "^4.0.3",
"husky": "^8.0.3",
"lint-staged": "^13.1.2",
"markdown-it": "^13.0.1",
"node-sass": "^8.0.0",
"postcss": "^8.4.21",
"postcss-normalize": "^10.0.1",
"postcss-scss": "^4.0.6",
"prettier": "^2.7.1",
"rehype-raw": "^6.1.1",
"rehype-react": "^7.1.2",
"rehype-rewrite": "^3.0.6",
"remark-parse": "^10.0.1",
"remark-rehype": "^10.1.0",
"rollup-plugin-visualizer": "^5.9.0",
"sanitize-html": "^2.10.0",
"sass": "^1.58.1",
"storybook": "^7.0.0-beta.48",
"storybook": "^7.0.2",
"stylelint": "^15.2.0",
"stylelint-config-standard-scss": "^7.0.1",
"ts-node": "^10.9.1",
"typescript": "^4.7.4",
"unified": "^10.1.2",
"vite": "^4.1.1",
"vite-tsconfig-paths": "^4.0.5",
"yup": "^0.32.11"
Expand Down

0 comments on commit 68bae5e

Please sign in to comment.