Menu
Hacker Room
Informasi
Lifestyle
WebDev
solid

SolidJS Router file-based

Example File Structure

pages/
├── index.jsx
├── users.jsx
└── users/
    └── _id.jsx

Install Packages

pnpm i -D chokidar npm-run-all solid-app-router vue-route-generator-jsx

Set Up package.json in scripts Section

{
  "name": "vite-template-solid",
  "version": "0.0.0",
  "description": "",
  "scripts": {
    "dev": "run-p dev:*",
    "dev:vite": "vite",
    "dev:routify": "node routify.js -w",
    "build": "node routify.js && vite build",
    "serve": "vite preview"
  },
  "license": "MIT",
  "devDependencies": {
    "chokidar": "^3.5.2",
    "npm-run-all": "^4.1.5",
    "solid-app-router": "^0.0.50",
    "vite": "^2.3.8",
    "vite-plugin-solid": "^2.0.0",
    "vue-route-generator-jsx": "0.0.3"
  },
  "dependencies": {
    "solid-js": "^1.0.0"
  }
}

Create routify.js

const fs = require('fs')
const { generateRoutes } = require('vue-route-generator-jsx')
const chokidar = require('chokidar');

const generate = () => fs.writeFileSync('./src/routes.js', generateRoutes({
  pages: './src/pages'
}))

if (process.argv[2] == '-w') {
  const watcher = chokidar.watch('./src/pages')
  watcher.on('add', () => generate())
  watcher.on('unlink', () => generate())  
} else {
  generate()
}

Set Up src/App.jsx

import {Route, Router} from 'solid-app-router'
import routes from './routes'

export default function(){
  return <>
    <Router routes={routes}>
      <Route></Route>
    </Router>
  </>
}

Create src/pages/index.jsx File

export default function(){
	return <>
		<h1>Hello World</h1>
	</>
}

Run

npm run dev

Build

npm run build

Random Articles

Convert Svelte to Vue

Global Store di Vue 3

3 Bentuk Hasil Build SvelteKit untuk 3 Kebutuhan Berbeda

Cara Edit CSS Tanpa Reload dan Tanpa Framework JS

Privacy Policy for Catatan Zen

Cari