{"id":20387043,"url":"https://github.com/cmdcolin/jbrowse-react-app-nextjs-demo-publicfolder","last_synced_at":"2025-08-03T01:14:04.900Z","repository":{"id":217944489,"uuid":"745183926","full_name":"cmdcolin/jbrowse-react-app-nextjs-demo-publicfolder","owner":"cmdcolin","description":null,"archived":false,"fork":false,"pushed_at":"2024-01-18T20:14:41.000Z","size":675,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-15T08:44:40.278Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/cmdcolin.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}},"created_at":"2024-01-18T20:01:40.000Z","updated_at":"2024-01-18T20:02:35.000Z","dependencies_parsed_at":"2024-01-18T22:38:59.493Z","dependency_job_id":"43ec1fe5-21a3-47a5-8ede-1b1474a088da","html_url":"https://github.com/cmdcolin/jbrowse-react-app-nextjs-demo-publicfolder","commit_stats":null,"previous_names":["cmdcolin/jbrowse-react-app-nextjs-demo-publicfolder"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cmdcolin%2Fjbrowse-react-app-nextjs-demo-publicfolder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cmdcolin%2Fjbrowse-react-app-nextjs-demo-publicfolder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cmdcolin%2Fjbrowse-react-app-nextjs-demo-publicfolder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cmdcolin%2Fjbrowse-react-app-nextjs-demo-publicfolder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cmdcolin","download_url":"https://codeload.github.com/cmdcolin/jbrowse-react-app-nextjs-demo-publicfolder/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241937029,"owners_count":20045166,"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":[],"created_at":"2024-11-15T02:42:24.281Z","updated_at":"2025-03-04T23:25:47.716Z","avatar_url":"https://github.com/cmdcolin.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# jbrowse-react-app-nextjs\n\nDemo of using public folder in nextjs for serving static files\n\n## How it works\n\nI created a runtime variable called `NEXT_PUBLIC_BASE_PATH` in .env and\n.env.development that refers to the \"sub-URI\" that the app is deployed to. E.g.\nfor https://jbrowse.org/demos/app-nextjs it is deployed to a sub-URI of\n/demos/app-nextjs. If you don't use a \"sub-URI\"/base path, you can leave this\nblank\n\nThen that NEXT_PUBLIC_BASE_PATH env variable is used in next.config.js to\nproperly put it into action as the basePath.\n\nThen, I use UriLocation/uri and not localPath/LocalPathLocation in the JBrowse\nconfig. LocalPath is referring to files accessed on hard disk in electron app,\nand doesn't work for web. Little confusing terminology I know, but you can use\nUriLocations anywhere, and they can be relative or absolute uri/url.\n\nIn this demo I made it so at dev time with \"yarn dev\" it deploys to\n/demos/testing and at prod time to /demos/app-nextjs\n\nYou can then see in\nhttps://github.com/cmdcolin/jbrowse-react-app-nextjs-demo-publicfolder/blob/main/app/config.ts\nthat this is prefixed to all the paths. This is sort of annoyingly a lot of\nwork, but the sub-URI doesn't have a trailing slash, so the \"normal\" relative\nURL resolution that would otherwise happen inside JBrowse does not include the\nproper sub-URI\n\n## Alternative approaches\n\nAlternatives to this approach could include hosting static files on a different\nserver than nextjs like amazon s3 bucket or apache server or something like\nthis.\n\nThe external server thing is actually required if using something like Django\nbecause the default server for Django doesn't support range requests. Looks like\nNext.js server does support HTTP Range requests though.\n\nWith an external server, you may run into CORS errors since it has to request\nacross hosts. To fix, you can either\n\n- Reverse proxy it so that it all looks like it is served from the same host\n  (bypass CORS)\n\n- Allow CORS on your server (google how to allow CORS on apache, nginx, or other\n  amazon s3, etc)\n\nIn any case, this public folder system might work fine\n\n## Hope that helps!\n\nLet me know if there are issues\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcmdcolin%2Fjbrowse-react-app-nextjs-demo-publicfolder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcmdcolin%2Fjbrowse-react-app-nextjs-demo-publicfolder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcmdcolin%2Fjbrowse-react-app-nextjs-demo-publicfolder/lists"}