Skip to content

Commit 71f9c7d

Browse files
birkskyumautofix-ci[bot]
birkskyum
and
autofix-ci[bot]
authored
docs(solid-router): webpack example and installation guide (#5833)
* webpack solid-router example * use babel instead of swc * solid docs * solid docs * ci: apply automated fixes --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
1 parent d5ce04c commit 71f9c7d

File tree

16 files changed

+750
-78
lines changed

16 files changed

+750
-78
lines changed

‎docs/router/framework/solid/installation/with-webpack.md‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
---
2+
title: Installation with Webpack
3+
---
4+
5+
[//]: # 'BundlerConfiguration'
6+
7+
To use file-based routing with **Webpack**, you'll need to install the `@tanstack/router-plugin` package.
8+
9+
```sh
10+
npm install -D @tanstack/router-plugin
11+
```
12+
13+
Once installed, you'll need to add the plugin to your configuration.
14+
15+
```tsx
16+
// webpack.config.ts
17+
import { tanstackRouter } from '@tanstack/router-plugin/webpack'
18+
19+
export default {
20+
plugins: [
21+
tanstackRouter({
22+
target: 'solid',
23+
autoCodeSplitting: true,
24+
}),
25+
],
26+
}
27+
```
28+
29+
And in the .babelrc (SWC doesn't support solid-js, see [here](https://www.answeroverflow.com/m/1135200483116593182)), add these presets:
30+
31+
```tsx
32+
// .babelrc
33+
34+
{
35+
"presets": ["babel-preset-solid", "@babel/preset-typescript"]
36+
}
37+
38+
```
39+
40+
Or, for a full webpack.config.js, you can clone our [Quickstart Webpack example](https://github.com/TanStack/router/tree/main/examples/solid/quickstart-webpack-file-based) and get started.
41+
42+
Now that you've added the plugin to your Webpack configuration, you're all set to start using file-based routing with TanStack Router.
43+
44+
[//]: # 'BundlerConfiguration'
45+
46+
## Ignoring the generated route tree file
47+
48+
If your project is configured to use a linter and/or formatter, you may want to ignore the generated route tree file. This file is managed by TanStack Router and therefore shouldn't be changed by your linter or formatter.
49+
50+
Here are some resources to help you ignore the generated route tree file:
51+
52+
- Prettier - [https://prettier.io/docs/en/ignore.html#ignoring-files-prettierignore](https://prettier.io/docs/en/ignore.html#ignoring-files-prettierignore)
53+
- ESLint - [https://eslint.org/docs/latest/use/configure/ignore#ignoring-files](https://eslint.org/docs/latest/use/configure/ignore#ignoring-files)
54+
- Biome - [https://biomejs.dev/reference/configuration/#filesignore](https://biomejs.dev/reference/configuration/#filesignore)
55+
56+
> [!WARNING]
57+
> If you are using VSCode, you may experience the route tree file unexpectedly open (with errors) after renaming a route.
58+
59+
You can prevent that from the VSCode settings by marking the file as readonly. Our recommendation is to also exclude it from search results and file watcher with the following settings:
60+
61+
```json
62+
{
63+
"files.readonlyInclude": {
64+
"**/routeTree.gen.ts": true
65+
},
66+
"files.watcherExclude": {
67+
"**/routeTree.gen.ts": true
68+
},
69+
"search.exclude": {
70+
"**/routeTree.gen.ts": true
71+
}
72+
}
73+
```
74+
75+
You can use those settings either at a user level or only for a single workspace by creating the file `.vscode/settings.json` at the root of your project.
76+
77+
## Configuration
78+
79+
When using the TanStack Router Plugin with Webpack for File-based routing, it comes with some sane defaults that should work for most projects:
80+
81+
```json
82+
{
83+
"routesDirectory": "./src/routes",
84+
"generatedRouteTree": "./src/routeTree.gen.ts",
85+
"routeFileIgnorePrefix": "-",
86+
"quoteStyle": "single"
87+
}
88+
```
89+
90+
If these defaults work for your project, you don't need to configure anything at all! However, if you need to customize the configuration, you can do so by editing the configuration object passed into the `tanstackRouter` function.
91+
92+
You can find all the available configuration options in the [File-based Routing API Reference](../../../../api/file-based-routing.md).

‎examples/solid/quickstart-webpack-file-based/.babelrc‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["babel-preset-solid", "@babel/preset-typescript"]
3+
}

‎examples/solid/quickstart-webpack-file-based/.gitignore‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# Local
2+
.DS_Store
3+
*.local
4+
*.log*
5+
6+
# Dist
7+
node_modules
8+
dist/
9+
10+
# IDE
11+
.idea

‎examples/solid/quickstart-webpack-file-based/.vscode/settings.json‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"files.watcherExclude": {
3+
"**/routeTree.gen.ts": true
4+
},
5+
"search.exclude": {
6+
"**/routeTree.gen.ts": true
7+
},
8+
"files.readonlyInclude": {
9+
"**/routeTree.gen.ts": true
10+
}
11+
}

‎examples/solid/quickstart-webpack-file-based/README.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# Example
2+
3+
To run this example:
4+
5+
- `npm install` or `yarn`
6+
- `npm start` or `yarn start`

‎examples/solid/quickstart-webpack-file-based/package.json‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
{
2+
"name": "tanstack-router-solid-example-quickstart-webpack-file-based",
3+
"private": true,
4+
"type": "module",
5+
"scripts": {
6+
"dev": "webpack serve --port 3001 --no-open",
7+
"build": "webpack build && tsc --noEmit"
8+
},
9+
"dependencies": {
10+
"@tanstack/solid-router": "^1.135.2",
11+
"@tanstack/solid-router-devtools": "^1.135.2",
12+
"solid-js": "^1.9.10"
13+
},
14+
"devDependencies": {
15+
"@babel/core": "^7.28.5",
16+
"@babel/preset-typescript": "^7.27.1",
17+
"@swc/core": "^1.10.15",
18+
"@tanstack/router-plugin": "^1.135.2",
19+
"babel-loader": "^10.0.0",
20+
"babel-preset-solid": "^1.9.10",
21+
"html-webpack-plugin": "^5.6.3",
22+
"swc-loader": "^0.2.6",
23+
"typescript": "^5.7.2",
24+
"webpack": "^5.97.1",
25+
"webpack-cli": "^5.1.4",
26+
"webpack-dev-server": "^5.2.0"
27+
}
28+
}

‎examples/solid/quickstart-webpack-file-based/public/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
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.0" />
6+
<title>TanStack router</title>
7+
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
</body>
12+
</html>

‎examples/solid/quickstart-webpack-file-based/src/app.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { RouterProvider, createRouter } from '@tanstack/solid-router'
2+
3+
import { routeTree } from './routeTree.gen'
4+
5+
// Set up a Router instance
6+
const router = createRouter({
7+
routeTree,
8+
defaultPreload: 'intent',
9+
scrollRestoration: true,
10+
})
11+
12+
// Register things for typesafety
13+
declare module '@tanstack/solid-router' {
14+
interface Register {
15+
router: typeof router
16+
}
17+
}
18+
const App = () => {
19+
return <RouterProvider router={router} />
20+
}
21+
22+
export default App

‎examples/solid/quickstart-webpack-file-based/src/index.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { render } from 'solid-js/web'
2+
import App from './app'
3+
4+
const rootElement = document.getElementById('root')!
5+
6+
if (!rootElement.innerHTML) {
7+
render(() => <App />, rootElement)
8+
}

‎examples/solid/quickstart-webpack-file-based/src/routeTree.gen.ts‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
/* eslint-disable */
2+
3+
// @ts-nocheck
4+
5+
// noinspection JSUnusedGlobalSymbols
6+
7+
// This file was automatically generated by TanStack Router.
8+
// You should NOT make any changes in this file as it will be overwritten.
9+
// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
10+
11+
import { Route as rootRouteImport } from './routes/__root'
12+
import { Route as AboutRouteImport } from './routes/about'
13+
import { Route as IndexRouteImport } from './routes/index'
14+
15+
const AboutRoute = AboutRouteImport.update({
16+
id: '/about',
17+
path: '/about',
18+
getParentRoute: () => rootRouteImport,
19+
} as any)
20+
const IndexRoute = IndexRouteImport.update({
21+
id: '/',
22+
path: '/',
23+
getParentRoute: () => rootRouteImport,
24+
} as any)
25+
26+
export interface FileRoutesByFullPath {
27+
'/': typeof IndexRoute
28+
'/about': typeof AboutRoute
29+
}
30+
export interface FileRoutesByTo {
31+
'/': typeof IndexRoute
32+
'/about': typeof AboutRoute
33+
}
34+
export interface FileRoutesById {
35+
__root__: typeof rootRouteImport
36+
'/': typeof IndexRoute
37+
'/about': typeof AboutRoute
38+
}
39+
export interface FileRouteTypes {
40+
fileRoutesByFullPath: FileRoutesByFullPath
41+
fullPaths: '/' | '/about'
42+
fileRoutesByTo: FileRoutesByTo
43+
to: '/' | '/about'
44+
id: '__root__' | '/' | '/about'
45+
fileRoutesById: FileRoutesById
46+
}
47+
export interface RootRouteChildren {
48+
IndexRoute: typeof IndexRoute
49+
AboutRoute: typeof AboutRoute
50+
}
51+
52+
declare module '@tanstack/solid-router' {
53+
interface FileRoutesByPath {
54+
'/about': {
55+
id: '/about'
56+
path: '/about'
57+
fullPath: '/about'
58+
preLoaderRoute: typeof AboutRouteImport
59+
parentRoute: typeof rootRouteImport
60+
}
61+
'/': {
62+
id: '/'
63+
path: '/'
64+
fullPath: '/'
65+
preLoaderRoute: typeof IndexRouteImport
66+
parentRoute: typeof rootRouteImport
67+
}
68+
}
69+
}
70+
71+
const rootRouteChildren: RootRouteChildren = {
72+
IndexRoute: IndexRoute,
73+
AboutRoute: AboutRoute,
74+
}
75+
export const routeTree = rootRouteImport
76+
._addFileChildren(rootRouteChildren)
77+
._addFileTypes<FileRouteTypes>()

0 commit comments

Comments
 (0)