File-System Pages

Actual documentation

Migration

If you want to migrate from bundles to file-system pages, there is few steps:

1. Enable fileSystemPages.enable option in tramvai.json, and change default folders for safety:

   {
     "fileSystemPages": {
       "enable": true,
       "pagesDir": "new-fs-pages", // file-system pages directory
       "routesDir": false // force disable file-system routing
     }
   }

2. Split your bundles to components

   from this bundle src/bundles/someBundle.ts:

   import { createBundle } from '@tramvai/core';
   import { lazy } from '@tramvai/react';
   import { actionFoo, actionBar } from '../actions';
   import { StoreFoo, StoreBar } from '../reducers';
   import { CommonComponent } from '../components';
   
   const someBundle = createBundle({
     name: 'someBundle',
     components: {
       'pages/foo-page': lazy(() => import('../pages/Foo')),
       'pages/bar-page': lazy(() => import('../pages/Bar')),
       'components/common': CommonComponent,
     },
     actions: [actionFoo, actionBar],
     reducers: [StoreFoo, StoreBar],
   });
   
   export default someBundle;

   you need to create two page components, src/new-fs-pages/foo.tsx and src/new-fs-pages/bar.tsx, with this content:

   import { lazy, PageComponent } from '@tramvai/react';
   import { actionFoo, actionBar } from '../actions';
   import { StoreFoo, StoreBar } from '../reducers';
   import { CommonComponent } from '../components';
   
   // the same for src/new-fs-pages/bar.tsx
   const FooPage: PageComponent = () => {
     return <h1>Foo Page</h1>;
   }
   
   FooPage.components = {
       'components/common': CommonComponent,
   };
   FooPage.actions = [actionFoo, actionBar];
   FooPage.reducers = [StoreFoo, StoreBar];
   
   export default FooPage;

   then update your routes config from:

   const routes = [
       {
           name: 'foo',
           path: '/foo/',
           config: {
               bundle: 'sameBundle',
               pageComponent: 'pages/foo-page',
           },
       },
       {
           name: 'bar',
           path: '/bar/',
           config: {
               bundle: 'sameBundle',
               pageComponent: 'pages/bar-page',
           },
       },
   ]

   to this:

   const routes = [
       {
           name: 'foo',
           path: '/foo/',
           config: {
               pageComponent: '@/new-fs-pages/foo',
           },
       },
       {
           name: 'bar',
           path: '/bar/',
           config: {
               pageComponent: '@/new-fs-pages/bar',
           },
       },
   ]

   and remove bundle property from createApp