Replace redirects.tsx by vite/netlify-cli redirect

.github/workflows/deploy.yaml

@@ -62,9 +62,10 @@ jobs:
       - name: Build app SSR
         run: |
           yarn workspace site build:ssr
-          yarn workspace site build:prerender --netlify-toml-path ./netlify.toml
+          yarn workspace site build:prerender --netlify-toml-path ./netlify.base.toml
       - name: Replace site placeholders in netlify.toml redirection file
         run: |
+          cp netlify.base.toml netlify.toml
           sed -i "s|:API_URL|$API_BASE_URL|g" site/netlify.toml;
           sed -i "s|:SITE_FR|$VITE_FR_BASE_URL|g" site/netlify.toml;
           sed -i "s|:SITE_EN|$VITE_EN_BASE_URL|g" site/netlify.toml;

site/.gitignore

@@ -5,5 +5,5 @@ cypress/videos
 cypress/screenshots
 cypress/downloads
 .deps.json
-netlify.dev.toml
+netlify*.toml
 source/public/sitemap.*.txt

site/netlify.base.toml

@@ -1,7 +1,10 @@
 [[headers]]
 for = "/*"
 [headers.values]
-Content-Security-Policy = "default-src 'self' mon-entreprise.fr; style-src 'self' 'unsafe-inline' mon-entreprise.zammad.com; connect-src 'self' *.incubateur.net raw.githubusercontent.com tm.urssaf.fr mon-entreprise.zammad.com api.recherche-entreprises.fabrique.social.gouv.fr geo.api.gouv.fr *.algolia.net *.algolianet.com; form-action 'self' *.sibforms.com *.incubateur.net mon-entreprise.zammad.com; script-src 'self' 'unsafe-inline' 'unsafe-eval' tm.urssaf.fr *.incubateur.net stonly.com code.jquery.com mon-entreprise.zammad.com polyfill.io; img-src 'self' data: tm.urssaf.fr user-images.githubusercontent.com jedonnemonavis.numerique.gouv.fr; frame-src 'self' https://www.youtube-nocookie.com https://codesandbox.io https://place-des-entreprises.beta.gouv.fr https://reso-staging.osc-fr1.scalingo.io https://stackblitz.com"
+Content-Security-Policy = "default-src 'self' mon-entreprise.fr; style-src 'self' 'unsafe-inline' mon-entreprise.zammad.com; connect-src 'self' *.incubateur.net raw.githubusercontent.com tm.urssaf.fr mon-entreprise.zammad.com api.recherche-entreprises.fabrique.social.gouv.fr geo.api.gouv.fr *.algolia.net *.algolianet.com; form-action 'self' *.sibforms.com *.incubateur.net mon-entreprise.zammad.com; script-src 'self' 'unsafe-inline' 'unsafe-eval' tm.urssaf.fr *.incubateur.net stonly.com code.jquery.com mon-entreprise.zammad.com polyfill.io; img-src 'self' data: mon-entreprise.urssaf.fr tm.urssaf.fr user-images.githubusercontent.com jedonnemonavis.numerique.gouv.fr; frame-src 'self' https://www.youtube-nocookie.com https://codesandbox.io https://place-des-entreprises.beta.gouv.fr https://reso-staging.osc-fr1.scalingo.io https://stackblitz.com"
+
+[dev]
+  autoLaunch = false
 
 ## Scalingo proxy for API
 [[redirects]]

site/package.json

@@ -22,14 +22,15 @@
 		"build:yaml-to-dts": "ts-node-esm scripts/build-yaml-to-dts.ts",
 		"postinstall": "node scripts/prepare.js",
 		"start": "vite dev",
+		"start:netlify": "sed 's|:SITE_EN|/infrance|g' netlify.base.toml | sed 's|:SITE_FR|/mon-entreprise|g' | sed 's|:API_URL|http://localhost:3004|g' | sed 's|\\[\\[redirects\\]\\]|\\[\\[redirects\\]\\]\\n  force = true|g' > netlify.toml && HMR_CLIENT_PORT=8888 netlify dev",
 		"build": "NODE_OPTIONS='--max-old-space-size=6144'; yarn build:sitemap && vite build && yarn build:iframe-script",
 		"build:ssr": "NODE_OPTIONS='--max-old-space-size=4096'; vite build --ssr ./source/entry-server.tsx --outDir ./dist/server --emptyOutDir && echo '{\"module\": \"commonjs\"}' > dist/package.json",
 		"build:prerender": "ts-node-esm prerender.ts",
 		"build:iframe-script": "NODE_OPTIONS='--max-old-space-size=4096'; vite build --config vite-iframe-script.config.ts",
 		"build:sitemap": "ts-node-esm scripts/build-sitemap.ts",
-		"build:preview": "VITE_FR_BASE_URL=http://localhost:8888; VITE_EN_BASE_URL=http://localhost:8889; yarn build && yarn build:ssr && cp ./netlify.toml ./netlify.dev.toml && yarn build:prerender --dev --netlify-toml-path ./netlify.dev.toml",
-		"preview:mon-entreprise": "sed 's|:SITE_EN|_|g' netlify.dev.toml | sed 's|:SITE_FR||g' | sed 's|:API_URL|http://localhost:3004|g' > dist/netlify.toml && cd dist && npx netlify-cli dev -d ./ -p 8888",
-		"preview:infrance": "      sed 's|:SITE_EN||g' netlify.dev.toml | sed 's|:SITE_FR|_|g' | sed 's|:API_URL|http://localhost:3004|g' > dist/netlify.toml && cd dist && npx netlify-cli dev -d ./ -p 8889",
+		"build:preview": "VITE_FR_BASE_URL=http://localhost:8888; VITE_EN_BASE_URL=http://localhost:8889; yarn build && yarn build:ssr && cp ./netlify.base.toml ./netlify.preview.toml && yarn build:prerender --dev --netlify-toml-path ./netlify.preview.toml",
+		"preview:mon-entreprise": "sed 's|:SITE_EN|_|g' netlify.preview.toml | sed 's|:SITE_FR||g' | sed 's|:API_URL|http://localhost:3004|g' > dist/netlify.toml && cd dist && netlify dev -d ./ -p 8888",
+		"preview:infrance": "      sed 's|:SITE_EN||g' netlify.preview.toml | sed 's|:SITE_FR|_|g' | sed 's|:API_URL|http://localhost:3004|g' > dist/netlify.toml && cd dist && netlify dev -d ./ -p 8889",
 		"typecheck:watch": "tsc --skipLibCheck --noEmit --watch",
 		"test": "vitest",
 		"test:dev-e2e:mon-entreprise": "cypress open --e2e --config \"baseUrl=http://localhost:8888\"",
@@ -134,6 +135,7 @@
 		"dotenv": "=8.1.0",
 		"i18next-parser": "^6.0.0",
 		"isomorphic-fetch": "^2.2.1",
+		"netlify-cli": "^10.6.3",
 		"rimraf": "^3.0.2",
 		"rollup-plugin-toml": "^1.0.0",
 		"serve-static": "^1.14.2",

site/source/App.tsx

@@ -21,7 +21,7 @@ import { Helmet } from 'react-helmet-async'
 import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 import { Redirect, Route, Switch } from 'react-router-dom'
-import { CompatRoute, useLocation } from 'react-router-dom-v5-compat'
+import { CompatRoute } from 'react-router-dom-v5-compat'
 import styled, { css } from 'styled-components'
 import Accessibilité from './pages/Accessibilité'
 import Budget from './pages/Budget/Budget'
@@ -37,7 +37,6 @@ import Nouveautés from './pages/Nouveautes/Nouveautes'
 import Simulateurs from './pages/Simulateurs'
 import Stats from './pages/Stats/LazyStats'
 import Provider, { ProviderProps } from './Provider'
-import redirects from './redirects'
 import { constructLocalizedSitePath } from './sitePaths'
 
 type RootProps = {
@@ -100,7 +99,6 @@ const Router = () => {
 						<Redirect to={location.pathname.replace(/\/+$/, location.search)} />
 					)}
 				/>
-				{redirects}
 				<Route path="/iframes" component={Iframes} />
 				<Route component={App} />
 			</Switch>

site/source/components/utils/Emoji.tsx

@@ -1,5 +1,4 @@
 import emojiFn from 'react-easy-emoji'
-import { useTranslation } from 'react-i18next'
 
 type PropType = {
 	emoji: string | undefined
@@ -12,27 +11,18 @@ type PropType = {
 // - allow to configure the URL to self host twemoji images in production
 // - using a real React component works better with the translation scripts
 export default function Emoji({ emoji, alt, title }: PropType) {
-	const language = useTranslation().i18n.language
 	alt ??= emoji
-	const siteUrl =
-		language === 'fr'
-			? import.meta.env.VITE_FR_BASE_URL
-			: import.meta.env.VITE_EN_BASE_URL
+
 	if (!emoji) {
 		return null
 	}
 
-	return emojiFn(
-		emoji,
-		import.meta.env.MODE === 'production'
-			? {
-					baseUrl: siteUrl + '/twemoji/2/',
-					ext: '.png',
-					props: {
-						alt,
-						title,
-					},
-			  }
-			: { props: { alt, title }, ext: '.png' }
-	)
+	return emojiFn(emoji, {
+		baseUrl: '/twemoji/2/',
+		ext: '.png',
+		props: {
+			alt,
+			title,
+		},
+	})
 }

site/source/redirects.tsx

@@ -1,19 +0,0 @@
-import { Redirect } from 'react-router-dom'
-// @ts-ignore
-import netlifyToml from '../netlify.toml'
-
-interface NetlifyRedirect {
-	from: string
-	to: string
-	status: number
-}
-
-// TODO : doesn't work when previewing netlify redirect in developpement mode (yarn run build:preview)
-export default (netlifyToml as { redirects: NetlifyRedirect[] }).redirects
-	.filter(({ from, status }) => status === 301 && !from.startsWith('https'))
-	.map(({ from, to }) => ({
-		from: decodeURIComponent(from.replace(/^:.*?\//, '/')),
-		to: decodeURIComponent(to.replace(/^:.*?\//, '/').replace(':splat', '*')),
-	}))
-	.filter(({ from, to }) => from !== to)
-	.map((props) => <Redirect key={props.from} {...props} exact />)

site/source/types/rollup-plugin-toml.d.ts

@@ -1,5 +0,0 @@
-declare module 'rollup-plugin-toml' {
-	import { Plugin } from 'vite'
-	const plugin: Plugin
-	export default plugin
-}

site/vite.config.ts

@@ -6,12 +6,13 @@ import legacy from '@vitejs/plugin-legacy'
 import react from '@vitejs/plugin-react'
 import fs from 'fs/promises'
 import path from 'path'
-import toml from 'rollup-plugin-toml'
-import { defineConfig, Plugin } from 'vite'
-import shimReactPdf from 'vite-plugin-shim-react-pdf'
 import serveStatic from 'serve-static'
+import { defineConfig, loadEnv, Plugin } from 'vite'
+import shimReactPdf from 'vite-plugin-shim-react-pdf'
 
-export default defineConfig(({ command }) => ({
+const env = (mode: string) => loadEnv(mode, process.cwd(), '')
+
+export default defineConfig(({ command, mode }) => ({
 	resolve: {
 		alias: { '@': path.resolve('./source') },
 		extensions: ['.js', '.ts', '.jsx', '.tsx', '.json'],
@@ -30,7 +31,6 @@ export default defineConfig(({ command }) => ({
 			babel: { plugins: ['babel-plugin-styled-components'] },
 		}),
 		yaml(),
-		toml,
 		shimReactPdf(),
 		multipleSPA({
 			defaultSite: 'mon-entreprise',
@@ -62,6 +62,12 @@ export default defineConfig(({ command }) => ({
 		}),
 	],
 	server: {
+		hmr: {
+			clientPort:
+				typeof env(mode).HMR_CLIENT_PORT !== 'undefined'
+					? parseInt(env(mode).HMR_CLIENT_PORT)
+					: undefined,
+		},
 		// Keep watching changes in the publicodes package to support live reload
 		// when we iterate on publicodes logic.
 		// https://vitejs.dev/config/#server-watch
@@ -73,6 +79,11 @@ export default defineConfig(({ command }) => ({
 		},
 		proxy: {
 			'/api': 'http://localhost:3004',
+			'/twemoji': {
+				target: 'https://twemoji.maxcdn.com',
+				changeOrigin: true,
+				rewrite: (path) => path.replace(/^\/twemoji/, ''),
+			},
 		},
 	},
 	optimizeDeps: {
@@ -119,7 +130,8 @@ function multipleSPA(options: MultipleSPAOptions): Plugin {
 			)
 			// eslint-disable-next-line @typescript-eslint/no-misused-promises
 			vite.middlewares.use(async (req, res, next) => {
-				const url = req.originalUrl
+				const url = req.originalUrl?.replace(/^\/%2F/, '/')
+
 				const firstLevelDir = url?.slice(1).split('/')[0]
 
 				if (url && /\?.*html-proxy/.test(url)) {
@@ -127,8 +139,20 @@ function multipleSPA(options: MultipleSPAOptions): Plugin {
 				}
 
 				if (url === '/') {
-					res.writeHead(302, { Location: '/' + options.defaultSite })
-					res.end()
+					res.writeHead(302, { Location: '/' + options.defaultSite }).end()
+				} else if (
+					firstLevelDir &&
+					url &&
+					Object.keys(options.sites)
+						.map((site) => `/${site}.html`)
+						.includes(url)
+				) {
+					const siteName = firstLevelDir.replace('.html', '')
+					const content = await vite.transformIndexHtml(
+						'/' + siteName,
+						await fillTemplate(siteName)
+					)
+					res.end(content)
 				} else if (
 					firstLevelDir &&
 					Object.keys(options.sites).some((name) => firstLevelDir === name)