();\n React.useEffect(() => {\n getServerUptime().then(setUptime);\n }, []);\n return (\n \n Server uptime: {uptime || 'loading...'}\n
\n );\n};\n```\n\nAs you can see, when the component mount, the app is calling directly `getServerUptime` located on the server. During build process, isomor transpile `getServerUptime` to a query function that will call the backend through an http request.\n\nSince there is no more separation between the backend and the frontend, there is much more consistency and a better overview of the project. It remove lot of overhead and let you focus on implementing features.\nIt can bring lot of advantage with TypeScript since the types implemented on the server will be the same for the client.\nMinimalistic and very generic, this tool can work with any kind of library like React, Vue and Angular or just Vanilla JS.\n\n## How does it work\n\nIsomor work a bit like lambda function. In a specific folder, by default `api`, you define the entrypoints of your server. Those entrypoints must follow some specific rules:\n\n- all the files in the root of `api` folder are entrypoints\n- each of those file **must** return a default async function\n\nIsomor will then identify those entrypoints and generate an `api` module to consume them.\n\nFinally isomor create a server to expose those entrypoints to the frontend.\n\nThat's all :-)\n\n## Getting started\n\nInstall isomor:\n\n```shell\nyarn add isomor\nnpm install isomor\n```\n\nUpdate your package.json file to add some script:\n\n```json\n ...\n \"scripts\": {\n \"isomor:build\": \"isomor-transpiler\",\n \"isomor:serv\": \"isomor-server\",\n \"prod\": \"yarn isomor:build && yarn build && ISOMOR_STATIC_FOLDER=./build yarn isomor:serv\",\n ...\n }\n```\n\nAssuming you are using `yarn` and that `yarn build` is building your frontend application in `./build` folder.\n\n`isomor-transpiler` is used to generate your `api` module. During development process you can run it in watch mode with `yarn isomor:build --watch`.\n\n`isomor-server` is used to serve your `api` to be consumed by the frontend. During development process you can run it in watch mode with `yarn isomor:serv --watch`.\n\nNow, in your frontend application, create a folder call `api`. The root of this folder will contain all the entrypoints of your API. Those entrypoints must return a default async function, see following example:\n\n```ts\n// in api/getUptime.ts\nexport default async function (): Promise {\n return process.uptime();\n}\n```\n\nAs you can see, even if we are not using `await`, we are still returning a Promise. This is because the call of the function from the frontend to the backend is asynchrone.\nThis file can `import` and `export` anything you want from the whole server. Isomor will clean it up and provide the only necessary for the frontend to access the endpoint. So if you export some `type` or `interface`, those will be accessible from the frontend but any exported named function will not.\n\nAfter creating your first endpoint in api/getUptime.ts file, run `yarn isomor:build` to generate the client. This will create a node module called `api` in \"node_modules/api\" folder.\n\nIn your frontend app, you can now use this module, just like this:\n\n```ts\nimport getUptime from 'api/getUptime';\n\ngetUptime().then((uptime) => document.getElementById('uptime').textContent=`${uptime}`;)\n```\n\nAnd that's all, you are done.\n\nOk, you still have to serve your API. For this run `yarn isomor:serv`, this will expose your endpoints on the port 3005.\nTo serve you frontend you have 2 options:\n\n- either use the static folder from isomor-server by defining his path with an environment variable `ISOMOR_STATIC_FOLDER=./static_folder yarn isomor:serv`\n- or use the server from your frontend framework. For example, if you are using `create-react-app`, do `yarn start` but before that you need to setup the reverse proxy in the package.json `\"proxy\": \"http://127.0.0.1:3005\",`. Effectively, isomor fetch the endpoints with a relative path, in the case of the previous example, the api module would do `fetch('/isomor/api/getUptime')`. If you don't want to use reverse proxy, you can as well use absolute URL, see [config](Docs/Config.md).\n\nFind some example in the github repo: [https://github.com/apiel/isomor/tree/master/packages/example](https://github.com/apiel/isomor/tree/master/packages/example)\n\nThose 2 examples has been build with React but since an api module is created those could be easily used as well with Vuejs, Angular or...\n\n> **Note:** if you are using this library with react-create-app you might need to setup a server proxy in package.json `\"proxy\": \"http://127.0.0.1:3005\",`\n\n> **Note:** the `api` folder should not contain sub folder called `server`.\n\n## Advanced guides\n\n- [Server](Docs/Server.md)\n- [WebSocket](Docs/WebSocket.md)\n- [Request / Response context](Docs/ReqResCtx.md)\n- [TypeORM](Docs/TypeORM.md)\n- [Config](Docs/Config.md)\n- [Why isomor?!](Docs/Why.md)\n","readmeFilename":"README.md","description":"Isomor unify the frontend and the backend by generating automatically the API","homepage":"https://apiel.github.io/isomor/","repository":{"type":"git","url":"git+https://github.com/apiel/isomor.git"},"bugs":{"url":"https://github.com/apiel/isomor/issues"},"keywords":["isomorphic","typescript","server"]}