![](\"./docs/assets/tobie.svg\")
\n \n\n \n \n \n
\\\\${markup}\\\n\n#### Prerender\n\nWhen setting the flag app: 'prerender' in tobiee.config.js render block, Tobie will use [react-snap](https://github.com/stereobooster/react-snap) to create your static pre rendered HTML files. To override Tobie's default configuration for react-snap, define your react-snap configuration instead of the boolean flag for the crawl property, like so: crawl: {\nminifyHtml: {\ncollapseWhitespace: false,\nremoveComments: false\n}\n\n#### Envs\n\nUse the env object in tobie.config.js to specify environment variables during _compile time_. Tobie will substitue those with the specified ones. You could also create an .env file next to your package.json and it will be picked by Tobie, in the same way.\n\n#### Styles\n\nTobie supports css, scss and css modules from scratch. To use css modules just name your file to \\*.module.(css|scss), and Tobie will parse it the correct way.\n\n## :heavy_check_mark: Tests\n\nTobiee comes shipped with Jest (unit test) and Jest puppeteer (integration test).\n\n#### Loadable components\n\nTobiee comes prepacked and configured to use [Loadable Components](https://loadable-components.com/).\nTo split your chunks, just use import your components like so; loadable(() => import('@Containers/Docs')); and loadable components/ tobiee will take care of the rest. Visit their docs for more information, and how it works behind the scenes.\n\n#### Unit test\n\nAll files in the source directory name \\*.test.{js|jsx|mjs} will parsed and use for unit testing. For creating custom configuration, place a jest.config.js in project root, and it will be merged with Tobie's predefault one.\n\n#### Integration test\n\nTobie uses [Jest Puppeteer](https://github.com/smooth-code/jest-puppeteer) to run integration test's. All files places under src directory named \\*.test.integration.{js|jsx|mjs} will be used in the integration tests. Along with starting Jest puppeteer (as an headless Chrome), Tobie will also start the dev server to run the integration test's against. For creating custom configuration, add a jest-puppeteer.config.js in project root, and it will be merged with Tobie's predefault one.\n\n## Examples\n\n#### tobie.config.js\n\n```bash\nmodule.exports = {\n\n\t// Specify how you want to render your app\n\trender: {\n\t\t// Valid options are 'ssr' || 'prerender' || 'client' - default are 'ssr'\n\t\tapp: 'ssr',\n\t\t// Specify your root element\n\t\trootElement: 'root'\n\t},\n\t// Want to pass in some dynamic vars to your application? Either set it here, or create an .env in project root\n\tenv: {\n\t\t// Will be processed as: process.env.HELLO, and will be subst at compile time\n\t\tHELLO: 'world'\n\t},\n\t// Merge Tobies webpack with your project\n\tmerge(config, target, environment) {\n\t\t// config: Tobies webpack object\n\t\t// target: 'client' or 'server'\n\t\t// environment: 'production' or 'development'\n\t\tconfig.resolve.alias['@App'] = __dirname;\n\t\treturn config;\n\t}\n};\n```\n\n## :trophy: Inspiration\n\nWe previously used [Razzle](https://github.com/jaredpalmer/razzle) as our prefered setup, which is _awesome_ but since maintaince were down for a while, and needs to have our own custom one, we humbily borrowed and used a lot from there, so if you like Tobie, please give a shout out to the team over there.\n\n## Development process\n\nTo run/debug Tobie at your local workspace, start with:\n`npm link [Tobie path]`\n","readmeFilename":"README.md"}