{"id":18315547,"url":"https://github.com/mathieutu/serve-my-app","last_synced_at":"2025-04-05T20:32:37.607Z","repository":{"id":135922944,"uuid":"168970769","full_name":"mathieutu/serve-my-app","owner":"mathieutu","description":"Deploy your javascript application and add your own routes in a minute.","archived":false,"fork":false,"pushed_at":"2019-08-29T10:20:29.000Z","size":454,"stargazers_count":3,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-21T09:51:07.994Z","etag":null,"topics":["api","app","express","react","serve","vuejs"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mathieutu.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-02-03T17:14:30.000Z","updated_at":"2021-05-28T06:18:26.000Z","dependencies_parsed_at":null,"dependency_job_id":"95a6c4ac-f989-4fba-96de-88cc87d5c950","html_url":"https://github.com/mathieutu/serve-my-app","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mathieutu%2Fserve-my-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mathieutu%2Fserve-my-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mathieutu%2Fserve-my-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mathieutu%2Fserve-my-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mathieutu","download_url":"https://codeload.github.com/mathieutu/serve-my-app/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247399818,"owners_count":20932875,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["api","app","express","react","serve","vuejs"],"created_at":"2024-11-05T16:41:32.190Z","updated_at":"2025-04-05T20:32:37.597Z","avatar_url":"https://github.com/mathieutu.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ServeMyApp\n\n[![npm](https://img.shields.io/npm/v/serve-my-app.svg)](https://www.npmjs.com/package/serve-my-app)\n[![npm](https://img.shields.io/npm/dt/serve-my-app.svg)](https://www.npmjs.com/package/serve-my-app) \n\n\n**🚀  Serve your Javascript application and/or add an API to it in a minute!**\n\nThis package allows you to add a NodeJS Express server easily and quickly to your Javascript application.\n\n\u003cbr\u003e\n\n![screenshot](./screenshot.png)\n\n\u003cbr\u003e\n\n**✨ Features:**\n\nIncludes a fully customizable Express Server, which allows you to:\n\n - Serve your Javascript application, with routing handling.\n - Add directly your api routes into your project, without thinking to something else.\n\n## Table of contents\n\n- [Getting started](#Getting-started)\n- [Configuration](#Configuration)\n- [Usage](#Usage)\n- [FAQ](#FAQ)\n\n------\n\n## Getting started\n\nIn this ReadMe, we will take an example with a **create-react-app application**, and a **@vue/cli one is coming**. \nBut it can be what you want, so please, let us know if you tested it with another framework or app. It will be added to this doc.\n\n### Installation\n```bash\ncd my-app\nnpm install serve-my-app express\n```\n\n### Automatic initialisation\n```bash\nnpx sma-init\n```\n\n## Configuration\n\nThe `serve-my-app` binary will serve your frontend and your api.\n\nIt has several configuration parameters. \n\n**See [usage](#usage) section to understand how to use them.**\n\n\nMost useful ones:\n\n| Option    | Type           | Default value | Usage                                                                             |\n|---------  |----------------|---------------|-----------------------------------------------------------------------------------|\n| --srv     | string / false | `false`       | Serve api routes from this folder (relative path)                                 |\n| --src     | string / false | `false`       | Serve your application from this folder (**browser compatible** files)            |\n| --watch   | `false`        | `false`       | Restart server if change detected in `--srv` folder                               |\n| --proxify | boolean        | `false`       | Proxify calls from your app to the express server (depends of you app dev server) |\n\n\nOther ones:\n\n| Option    | Type    | Default value                | Usage                                                                             |\n|-----------|---------|------------------------------|-----------------------------------------------------------------------------------|\n| --host    | string  | `HOST` if set or `'0.0.0.0'` | Specify server host                                                               |\n| --port    | integer | `PORT` if set or `3001`      | Specify server port                                                               |\n| --https   | boolean | `HTTPS` if set or `false`    | Specify if displayed url should use https                                         |\n\n## Usage\n\n### Automatic initialisation\n\nYou really should use the `sma-init` command to configure your server, but see below to understand how tu use ServeMyApp\n\n### I only want to serve my frontend code in production\n\n- Build your application files (**depends on your application framework/type**):\n  ```bash\n   npm run build\n  ```\n\n- Serve them.\n  ```bash\n   serve-my-app --src=build\n  ```\n\nExplanation:\n  - `--src`: We're assuming that previous command will output compiled files to `build` folder.\n\n\n### I only want to add some api routes.\n\n- Create an api file as [described below](#what-should-the-server-entrypoint-look-like).\n \n- Serve it for development purpose:\n  ```bash\n  serve-my-app --srv=srv --watch\n  ```\n\n- Add your routes\n\n- Serve it for production:\n  ```bash\n  serve-my-app --srv=srv\n  ```\n\nExplanation:\n  - `--srv`: We're assuming that your api entrypoint is in `srv` folder.\n  - `--watch`: Server will restart when a route will be added.\n\n\n### I want to serve both my frontend code and add some api routes.\n\n- Create an api file as [described below](#what-should-the-server-entrypoint-look-like). \n\nThen :\n\n- For development purpose:\n\n  - Launch the server\n\n    ```bash\n      serve-my-app --srv=srv --proxify --watch\n    ```\n\n  - Launch your frontend application (**depends on your framework**):\n\n    ```bash\n    npm run start/serve\n    ```\n\n  Explanation:\n    - `--srv`: We're assuming that your api entrypoint is in `srv` folder.\n    - `--watch`: Server will restart when a route will be added.\n    - `--proxify`: All the relative xhr/fetch calls made in the application will be proxyfied to the server.\n\n- To run the server only once for production:\n\n  - Build your app files (**depends on your framework**):\n\n    ```bash\n    npm run build\n    ```\n\n  - Launch the server\n\n    ```bash\n    serve-my-app --srv=srv --src=build\n    ```\n\n  Explanation:\n    - `--srv`: We're assuming that your api entrypoint is in `srv` folder.\n    - `--src`: We're assuming that previous command will output compiled files to `build` folder.\n\n**👍 In all cases, you can use relative urls for xhr/fetch calls in your code.**\n**🚀 Again, all the ServeMyApp related commands and files can be generated using the `sma-init` cli tool.**\n\n## FAQ\n\n### What should the server entrypoint look like?\nIt's a file exporting a function, which will receive the Express application as its first parameter, \nand the node http server as its second. With both you can do anything you want with your server.\n\nFor example:\n\n   ```javascript\n   const { json } = require('express');\n   const socketIO = require(\"socket.io\");\n   \n   module.export = (app, http) =\u003e {\n       app.use(json());\n   \n       app.get('/foo', (req, res) =\u003e {\n           res.json({msg: 'foo'});\n       });\n   \n       app.post('/bar', (req, res) =\u003e {\n           res.json(req.body);\n       });\n       \n       socketIO(http).on(\"connection\", client =\u003e {\n         client.emit(\"message\", \"Welcome\");\n        });\n   }\n   ```\n \n\n### I want to use some transpilation process for my server (Webpack, TypeScript...).\n\nAnd you're right, it's a good idea!\n\nIn that case, you just have to handle the compilation process on your own, and specify an other folder for `—srv` files. \n\nFor example, for a TypeScript transpilation, and an `\"outDir\": \"../dist\"` in `srv/tsconfig.json`, you can update your script in `package.json` as: \n\n```json\n\"build:server\": \"rm -rf dist \u0026\u0026 tsc -p srv\",\n\"sma\": \"serve-my-app --srv=dist [...]\"\n```\n\n**🤘 For Typescript transpilation `ts-node` will be used if your api entrypoint is detected as a typescript file.**\nIt allows you to use directly your typescript file for development:\n```json\n\"sma:dev\": \"serve-my-app --srv=srv --watch [...]\"\n```\n\n**😉 To help you in your Typescript development, you can import the ApiFunction type from 'serve-my-app':**\n\n```typescript\nimport { ApiFunction } from 'serve-my-app'\n\nconst api: ApiFunction = (app, server) =\u003e {\n //\n}\n\nexport default api\n```\n\n\n**🔗 See a full example at: [mathieutu/starter-kit-react-express](https://github.com/mathieutu/starter-kit-react-express)**\n\n### My `package.json` behaves in a weird manner: a `proxy` key comes and goes in it.\n\nTo proxify xhr calls from the front dev server to the express server, create-react-app uses a `proxy` key in the package.json. \nThis is why this package adds it automatically if `--proxify` argument is provided. \n\nThis should be transparent for you, but if you want to disable it and handle yourself (or not) the proxy, you can do it by not passing the `-—proxify` flag. \n\nYou can find the documentation about proxies in create-react-app [here](https://facebook.github.io/create-react-app/docs/proxying-api-requests-in-development#docsNav).\n\n### Another question?\n\nPlease feel free to [ask it](https://github.com/mathieutu/serve-my-app/issues/new)!\n\n\n## License\n\nThis package is an open-sourced software licensed under the [MIT license](http://opensource.org/licenses/MIT).\n\n\n## Contributing\n\nIssues and PRs are obviously welcomed and encouraged, for new features as well as documentation.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmathieutu%2Fserve-my-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmathieutu%2Fserve-my-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmathieutu%2Fserve-my-app/lists"}