Skip to content
This repository was archived by the owner on Jun 2, 2022. It is now read-only.

Commit d987163

Browse files
author
SSen
committed
fix: history fallback for react-router
1 parent 6b75ff2 commit d987163

14 files changed

Lines changed: 354 additions & 4 deletions

File tree

‎packages/package.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
"run:web:isolated-scripts:start": "node -r ts-node/register -r tsconfig-paths/register src/@rocket-scripts/web/__run__/start.isolated-scripts.run.ts",
1515
"run:web:isolated-scripts:build": "node -r ts-node/register -r tsconfig-paths/register src/@rocket-scripts/web/__run__/build.isolated-scripts.run.ts",
1616
"run:web:isolated-scripts:watch": "node -r ts-node/register -r tsconfig-paths/register src/@rocket-scripts/web/__run__/watch.isolated-scripts.run.ts",
17+
"run:web:react-router:start": "node -r ts-node/register -r tsconfig-paths/register src/@rocket-scripts/web/__run__/start.react-router.run.ts",
1718
"run:web:puppeteer-recorder-test": "node -r ts-node/register -r tsconfig-paths/register src/@rocket-scripts/web/__run__/start.puppeteer-recorder-test.run.ts",
1819
"run:web:proxy:start": "node -r ts-node/register -r tsconfig-paths/register src/@rocket-scripts/web/__run__/start.proxy.run.ts",
1920
"run:web:https:start": "node -r ts-node/register -r tsconfig-paths/register src/@rocket-scripts/web/__run__/start.https.run.ts",
@@ -86,6 +87,7 @@
8687
"@types/react": "^17.0.3",
8788
"@types/react-dev-utils": "^9.0.5",
8889
"@types/react-dom": "^17.0.3",
90+
"@types/react-router-dom": "^5.1.7",
8991
"@types/react-test-renderer": "^17.0.1",
9092
"@types/resolve": "^1.20.0",
9193
"@types/rimraf": "^3.0.0",
@@ -184,5 +186,8 @@
184186
"worker-loader": "^3.0.8",
185187
"yaml-loader": "^0.6.0",
186188
"yargs": "^16.2.0"
189+
},
190+
"dependencies": {
191+
"react-router-dom": "^5.2.0"
187192
}
188193
}

‎packages/src/@rocket-scripts/web/__run__/start.react-router.run.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { start } from '@rocket-scripts/web/start';
2+
import { copyFixture } from '@ssen/copy-fixture';
3+
import puppeteer from 'puppeteer';
4+
5+
(async () => {
6+
const cwd: string = await copyFixture('test/fixtures/web/react-router');
7+
8+
const { port } = await start({
9+
cwd,
10+
staticFileDirectories: ['{cwd}/public'],
11+
app: 'app',
12+
});
13+
14+
const browser = await puppeteer.launch({
15+
//userDataDir: process.env.CHROMIUM_USER_DATA_DEBUG,
16+
headless: false,
17+
args: ['--start-fullscreen'],
18+
devtools: true,
19+
});
20+
21+
const [page] = await browser.pages();
22+
await page.goto(`http://localhost:${port}`);
23+
})();

‎packages/src/@rocket-scripts/web/__tests__/start.test.ts‎

Lines changed: 44 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -170,7 +170,7 @@ describe('web/start', () => {
170170
app,
171171
stdout,
172172
logfile: process.env.CI
173-
? path.join(process.cwd(), `logs/start-static-file-directories.txt`)
173+
? path.join(process.cwd(), `logs/isolate-script.txt`)
174174
: undefined,
175175
isolatedScripts: {
176176
isolate: 'isolate.ts',
@@ -206,6 +206,49 @@ describe('web/start', () => {
206206
console.log(stdout.lastFrame());
207207
});
208208

209+
test('should rewrite url with history fallback', async () => {
210+
// Arrange : project directories
211+
const cwd: string = await copyFixture('test/fixtures/web/react-router');
212+
const staticFileDirectories: string[] = ['{cwd}/public'];
213+
const app: string = 'app';
214+
215+
// Arrange : stdout
216+
const stdout = createInkWriteStream();
217+
218+
// Act : server start
219+
const { port, close } = await start({
220+
cwd,
221+
staticFileDirectories,
222+
app,
223+
stdout,
224+
logfile: process.env.CI
225+
? path.join(process.cwd(), `logs/history-fallback.txt`)
226+
: undefined,
227+
});
228+
229+
await timeout(1000 * 5);
230+
231+
// Arrange : wait server start
232+
const url: string = `http://localhost:${port}/b`;
233+
234+
page = await browser.newPage();
235+
236+
await page.goto(url, { timeout: 1000 * 60 });
237+
238+
await page.waitForSelector('#app section div', { timeout: 1000 * 60 });
239+
240+
// Assert
241+
await expect(
242+
page.$eval('#app section div', (e: Element) => e.innerHTML),
243+
).resolves.toBe('B');
244+
245+
// Arrange : server close
246+
await close();
247+
248+
// Assert : print stdout
249+
console.log(stdout.lastFrame());
250+
});
251+
209252
test('should get static files with multiple static file directories', async () => {
210253
// Arrange : project directories
211254
const cwd: string = await copyFixture(

‎packages/src/@rocket-scripts/web/start.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -210,6 +210,7 @@ export async function start({
210210
compress: true,
211211
//@ts-ignore TODO webpack-dev-server 4.x
212212
static: staticFileDirectories,
213+
historyApiFallback: true,
213214
};
214215

215216
const restartAlarm: Observable<string[]> = combineLatest([

‎packages/test/fixtures/web/react-router/package.json‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"private": true,
3+
"scripts": {
4+
"app:build": "ts-node scripts/build.ts",
5+
"app:start": "ts-node scripts/start.ts",
6+
"build": "npm run app:build",
7+
"start": "npm run app:start"
8+
},
9+
"dependencies": {
10+
"react": "^17.0.1",
11+
"react-dom": "^17.0.1",
12+
"react-router-dom": "^5.2.0"
13+
},
14+
"devDependencies": {
15+
"@types/react": "^16.9.34",
16+
"@types/react-dom": "^16.9.6",
17+
"@types/react-router-dom": "^5.1.7",
18+
"@types/webpack-env": "^1.15.1",
19+
"typescript": "^3.9.5",
20+
"ts-node": "^8.10.2"
21+
}
22+
}

‎packages/test/fixtures/web/react-router/public/favicon.ico‎

766 Bytes
Binary file not shown.

‎packages/test/fixtures/web/react-router/public/manifest.json‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"short_name": "App",
3+
"name": "My App",
4+
"icons": [
5+
{
6+
"src": "favicon.ico",
7+
"sizes": "64x64 32x32 24x24 16x16",
8+
"type": "image/x-icon"
9+
}
10+
],
11+
"start_url": ".",
12+
"display": "standalone",
13+
"theme_color": "#000000",
14+
"background_color": "#ffffff"
15+
}

‎packages/test/fixtures/web/react-router/scripts/build.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { build } from '@rocket-scripts/web';
2+
3+
(async () => {
4+
await build({
5+
app: 'app',
6+
});
7+
})();

‎packages/test/fixtures/web/react-router/scripts/start.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { start } from '@rocket-scripts/web';
2+
import { parseNumber } from '@rocket-scripts/utils';
3+
4+
(async () => {
5+
await start({
6+
app: 'app',
7+
port: parseNumber(process.env.PORT) ?? 'random',
8+
});
9+
})();

‎packages/test/fixtures/web/react-router/src/app/index.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8"/>
5+
<meta name="viewport" content="width=device-width, initial-scale=1"/>
6+
<meta name="theme-color" content="#000000"/>
7+
<link rel="shortcut icon" href="favicon.ico"/>
8+
<link rel="manifest" href="manifest.json"/>
9+
<title>App</title>
10+
</head>
11+
12+
<body>
13+
<noscript>You need to enable JavaScript to run this app.</noscript>
14+
<div id="app"></div>
15+
</body>
16+
</html>

0 commit comments

Comments
 (0)