{"id":15101789,"url":"https://github.com/mementomori11723/dynamic-bun","last_synced_at":"2025-10-25T18:31:11.799Z","repository":{"id":224197144,"uuid":"762684823","full_name":"MementoMori11723/dynamic-bun","owner":"MementoMori11723","description":"A dynamic simple example website built with bun http server. (need to add a database","archived":false,"fork":false,"pushed_at":"2024-02-28T06:34:36.000Z","size":34264,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-06T05:08:41.386Z","etag":null,"topics":["bunjs","dynamic-routing","http-server","website"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MementoMori11723.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2024-02-24T12:01:20.000Z","updated_at":"2025-02-01T07:25:06.000Z","dependencies_parsed_at":"2024-02-28T07:24:33.418Z","dependency_job_id":null,"html_url":"https://github.com/MementoMori11723/dynamic-bun","commit_stats":null,"previous_names":["mementomori11723/dynamic-bun"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MementoMori11723%2Fdynamic-bun","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MementoMori11723%2Fdynamic-bun/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MementoMori11723%2Fdynamic-bun/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MementoMori11723%2Fdynamic-bun/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MementoMori11723","download_url":"https://codeload.github.com/MementoMori11723/dynamic-bun/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238195474,"owners_count":19432105,"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":["bunjs","dynamic-routing","http-server","website"],"created_at":"2024-09-25T18:40:36.411Z","updated_at":"2025-10-25T18:31:11.486Z","avatar_url":"https://github.com/MementoMori11723.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Dynamic - Bun\n\nIt's a website built with bun http server api's.\n\nIn this website we have a home page, about page and an error page.\n\n## Build Guide\n\nHere I will walk you through the steps to build a basic website with bun.js.\n\n### Steps : -\n\n\u003e _Step_ - 1: Install [bun.js](https://bun.sh/)\n\n```bash\n// to install bun type this command in terminal or command prompt.\ncurl -fsSL https://bun.sh/install | bash\n```\n\n\u003e _Step_ - 2: Type this command in your terminal or command prompt to start the project.\n\u003e **Note** :- Use the command in a new folder or directory.\n\n```bash\nbun init\n```\n\nAfter that command you will see that your project has a index.ts file, this is our main file, before we start writing our code we need to do a couple of things.\n\n\u003e _Step_ - 3: create two new folders called _**images**_ and _**pages**_\n\n```bash\nmkdir images\nmkdir pages\n```\n\n\u003e _Step_ - 4: inside _package.json_ add a script inside it you will have \"dev\":\"bun run --watch index.ts\"\n\n```json\n\"script\":{\n    \"dev\":\"bun run --watch index.ts\"\n}\n```\n\nthis will run our file by typing _**bun run dev**_ in terminal or command prompt.\n\n\u003e _Step_ - 5: Add your website icon called favicon.ico to images folder\n\nnow we will add our pages (or javascript) to our pages directory.\n\n\u003e _Step_ - 6: Add javascript pages to your directory.\n\u003e **Note** :- we will use web components to build the pages of our website.\n\n#### index.js\n\n```js\nclass test extends HTMLElement {\n  constructor() {\n    super();\n    const root = this.attachShadow({ mode: \"open\" });\n    root.innerHTML = /*html*/ `\n      \u003ch1\u003etest drive complete!\u003c/h1\u003e\n    `;\n  }\n}\ncustomElements.define(\"test-drive\", test);\n\nclass new_ele extends HTMLElement {\n  constructor() {\n    super();\n    const root = this.attachShadow({ mode: \"open\" });\n    root.innerHTML = /*html*/ `\n      \u003ch1\u003eThis works!\u003c/h1\u003e\n      \u003cp\u003e\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. \n        Sit porro sequi vitae eaque maiores doloribus, \n        ab fugiat alias ex ipsam facilis deserunt velit nam obcaecati, \n        repudiandae dolor voluptatibus? Sit, nesciunt.\n      \u003c/p\u003e\n      \u003ctest-drive\u003e\u003c/test-drive\u003e\n    `;\n  }\n}\ncustomElements.define(\"new-ele\", new_ele);\n```\n\n#### about.js\n\n```js\nclass new_ele extends HTMLElement {\n  constructor() {\n    super();\n    const root = this.attachShadow({ mode: \"open\" });\n    root.innerHTML = /*html*/ `\n      \u003ch1\u003eAbout page\u003c/h1\u003e\n    `;\n  }\n}\ncustomElements.define(\"new-ele\", new_ele);\n```\n\n#### error.js\n\n```js\nclass new_ele extends HTMLElement {\n  constructor() {\n    super();\n    const root = this.attachShadow({ mode: \"open\" });\n    root.innerHTML = /*html*/ `\n      \u003ch1\u003e404 - Page not found!\u003c/h1\u003e\n    `;\n  }\n}\ncustomElements.define(\"new-ele\", new_ele);\n```\n\nNow let's write the _index.ts_ file\n\n\u003e _Step_ - 7: Build a http server\n\n```ts\nconst base_path: string = \"./pages/\";\nconst headers: object = {\n  status: 200,\n  headers: {\n    \"Content-Type\": \"text/html; charset=UTF-8\",\n    Connection: \"close\",\n  },\n};\nconst app = Bun.serve({\n  async fetch(req) {\n    const url = new URL(req.url);\n    switch (url.pathname) {\n      case \"/error.js\":\n      case \"/index.js\":\n      case \"/about.js\":\n        return new Response(Bun.file(base_path + url.pathname.slice(1)));\n      default:\n        const file = `${\n          url.pathname == \"/\" ? \"index.js\" : `${url.pathname}.js`\n        }`;\n        const checkFile = Bun.file(base_path + file);\n        if (await checkFile.exists()) {\n          const body: string = /*html*/ `\n            \u003c!DOCTYPE html\u003e\n            \u003chtml\u003e\n            \u003chead\u003e\n                \u003clink rel=\"shortcut icon\" href=\"/favicon.ico\" type=\"image/x-icon\" /\u003e\n                \u003ctitle\u003eDemo\u003c/title\u003e\n                \u003cscript defer src=\"${file}\"\u003e\u003c/script\u003e\n            \u003c/head\u003e\n            \u003cbody\u003e\n                \u003cnew-ele\u003e\u003c/new-ele\u003e\n            \u003c/body\u003e\n            \u003c/html\u003e\n          `;\n          return new Response(body, headers);\n        } else {\n          return Response.redirect(\"/error\", 301);\n        }\n    }\n  },\n  port: 5000,\n});\nconsole.log(`App running at http://localhost:${app.port}`);\n```\n\nAnd there you have it, you have successfully built an entire website with bun.js\n\n## Explanation\n\nIf you observe closely you will see that we haven't used **.html** file or files to build a website.\n\nThat is because we wrote our html as a http response body and added necessary headers.\n\nBun.js by default has a server api which we can use to build a http server, inside that server we have a fetch function with a parameter request which we will use it to fetch the url path name.\n\nbased on the path name we will return a response, by default we will return html content if the path has a file in pages directory else we will redirect them to our error page.\n\nif it is one of the cases then it needs to return the js file, since the html content is dynamic.\n\n## Output\n\nTo run the project just type this in terminal or command prompt\n\n```bash\nbun run dev\n```\n\nAfter that you will get an output saying **App running at [http://localhost:[your_port_number]](http://localhost:%5Byour_port_number%5D)**\n\nif you go to that url, you will have your website which may or may not look similar to the output.\n\n### Output images\n\noutput - 1\n![Home page](./images/output%20-%201.webp)\n\noutput - 2\n![About page](./images/output%20-%202.webp)\n\noutput - 3\n![Error page](./images/output%20-%203.webp)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmementomori11723%2Fdynamic-bun","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmementomori11723%2Fdynamic-bun","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmementomori11723%2Fdynamic-bun/lists"}