{"id":29362912,"url":"https://github.com/rub3n2000/parcelreactprojectbuilder","last_synced_at":"2025-10-14T20:32:31.610Z","repository":{"id":40282855,"uuid":"280145650","full_name":"rub3n2000/parcelreactprojectbuilder","owner":"rub3n2000","description":"A cra alternative, template builder for react apps with parcel and typescript. As well as options for express backend as wrapper api combo, or even prebuilt auth for express and react.","archived":false,"fork":false,"pushed_at":"2023-06-13T04:47:14.000Z","size":3755,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-09-26T02:25:35.962Z","etag":null,"topics":["dotnet","dotnet-core","dotnetcore","eslint","express","expressjs","javascript","js","parcel","parcelbundler","parceljs","passport","passportjs","react","reactjs","ts","typescript"],"latest_commit_sha":null,"homepage":"","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rub3n2000.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-07-16T12:15:54.000Z","updated_at":"2023-06-19T17:45:39.000Z","dependencies_parsed_at":"2024-11-15T05:46:22.240Z","dependency_job_id":null,"html_url":"https://github.com/rub3n2000/parcelreactprojectbuilder","commit_stats":{"total_commits":84,"total_committers":4,"mean_commits":21.0,"dds":0.6190476190476191,"last_synced_commit":"0a7f026b76d4f636b2986a560731f4cce4fa55b6"},"previous_names":["rub3n2000/parcelreacttstemplate"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/rub3n2000/parcelreactprojectbuilder","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rub3n2000%2Fparcelreactprojectbuilder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rub3n2000%2Fparcelreactprojectbuilder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rub3n2000%2Fparcelreactprojectbuilder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rub3n2000%2Fparcelreactprojectbuilder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rub3n2000","download_url":"https://codeload.github.com/rub3n2000/parcelreactprojectbuilder/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rub3n2000%2Fparcelreactprojectbuilder/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279020905,"owners_count":26086948,"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","status":"online","status_checked_at":"2025-10-14T02:00:06.444Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["dotnet","dotnet-core","dotnetcore","eslint","express","expressjs","javascript","js","parcel","parcelbundler","parceljs","passport","passportjs","react","reactjs","ts","typescript"],"created_at":"2025-07-09T09:17:24.108Z","updated_at":"2025-10-14T20:32:31.584Z","avatar_url":"https://github.com/rub3n2000.png","language":"C#","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Parcel-React Project-Builder w/ express \u0026 dotnet core backend alternatives.\n\n**This is a hobby project made by one person and rarely updated. It's templates are meant as a starting point for projects,**\n**I don't recommend using the code as is for production environments.**\n**You are meant to build on the code, update dependencies to newer versions if you desire, exchange some packages for others that fit your needs etc.**\n\nA cra alternative, template builder for react apps with parcel and typescript.\n\nAs well as options for express backend as wrapper api combo,\n or even prebuilt auth for express and react.\n\nNow you can replace the express backend with a dotnet 6 backend wrapper.\n\nworks like cra, filling out the template for you with one command.\n\n**Express backends are in js while frontends in ts. Feel free to change that.**\nPersonally my backends are usually quite simple, and my main use of typescript,\nis being able to know what I will receive from the api, as the api defines the models,\nwith explicit typing for mongoose. As well as knowing what I am receiving in my props.\n\n## Install instructions\n        npm install -g parcelreacttstemplateinstaller\nor\n        npm install parcelreacttstemplateinstaller\n*however removing -g will cause it to only work within your current folder.*\n\n## Usage instructions\nsimply type: \n        **parcelreactGen**\nin the terminal.\n\n**Please be patient as generating the actual project might take a little while,**\n**and the feedback isn't great. Wait for it to display done, no progress bar unfortunately.**\n\n**All dotnet projects have a line in startup.cs that is commented out enforcing httpsredirect.**\n**Should be uncommented before being published to a online host of any kind.**\n\n**All dotnet auth projects have a appsettings.json with Token or RsaPrivateKey and RsaPublicKey.**\n**Token should be replaced with a new random long string of characters, RsaPrivateKey and RsaPublicKey**\n**should be replaced with newly generated private and public rsa key string values.**\n**you can use my [very simple tool](https://github.com/rub3n2000/RsaKeyGenerator) for rsa keys or any other way of generating rsa key.**\n**for the hmac Token which is in appsettings.json you can simply write a long random string or use an online string generator.**\n\n**Nodejs auth project have a secret.js authKey which should be a new long random string.**\n\n**It will ask you which type of project you want to generate.**\n\n#### Currently there are 8 types included:\n\n**cleanfrontend**: a parcel, react, typescript frontend with eslint and sass.\n\n**withBackendWrapper**: an expressjs server, that serves api at /api, and static files,\nfrom the client directory for everything else. Otherwise the client directory is identical to\nthe cleanfrontend.\n\n**withAuth**: same as withBackendWrapper, except the backend has premade auth routes using passportjs,\nand the frontend starts with a login form / register form, and redirects to the app when you are logged in.\n\n**dotnet6React**: A dotnet 6.0 wrapper project, where you can put your api's. Serving a parcel react empty frontend, at /* and\n                api at /api/{controllername}/{action}/{id}.\n                only routes prefixed by /api/ will not return frontend.\n                x unit test folders also included, for those who wish to do unit and integration testing on the backend.\n\n**dotnet6ReactWOData**: A Dotnet 6.0 wrapper project, with OData. Serving a parcel react empty frontend at /* and\n                       api at /api/{route}.\n                       Only routes prefixed by /api/ will not return frontend.\n                       x unit test folders also included, for those who wish to do unit and integration testing on the backend.\n\n**dotnet6ReactwAuth** A Dotnet 6.0 wrapper project, with prebuilt auth in backend and frontend. It serves a parcel react frontend,\n                     with a login form and register form, and a secret page you must login to see, at /*. While it serves  \n                     api at /api/{route}.\n                     Only routes prefixed by /api/ will not return frontend.\n                     x unit test folders also included, for those who wish to do unit and integration testing on the backend.\n                     Default database is a local sqlite db that gets created within the project. Feel free to replace it.\n\n**dotnet6ReactwRsaAuth** A Dotnet 6.0 wrapper project, with prebuilt auth in backend and frontend. It serves a parcel react frontend,\n                     with a login form and register form, and a secret page you must login to see, at /*. While it serves  \n                     api at /api/{route}.\n                     Only routes prefixed by /api/ will not return frontend.\n                     x unit test folders also included, for those who wish to do unit and integration testing on the backend.\n                     Default database is a local sqlite db that gets created within the project. Feel free to replace it.\n\n**dotnet6ReactODataAuth** A Dotnet 6.0 wrapper project, with prebuilt auth in backend and frontend. It serves a parcel react frontend,\n                     with a login form and register form, and a secret page you must login to see, at /*. While it serves  \n                     api at /api/{route}.\n                     Additionally, OData is implemented.\n                     Only routes prefixed by /api/ will not return frontend.\n                     x unit test folders also included, for those who wish to do unit and integration testing on the backend.\n                     Default database is a local sqlite db that gets created within the project. Feel free to replace it.\n\n\n## Running the app\n\n#### Clean Frontend\nTo start cleanfrontend simply do npm install then npm start. \nIt will hot-restart as you make changes.\nCleanfrontend doesn't include an api, so as long as the client appears to be working you are all good there.\n_______________________________________________\n\n#### Express Backend wrapper(withBackendWrapper) or withAuth\nTo start withBackendWrapper or withAuth simply do\n                npm run preStart\nthat installs the npm packages neccesary in the client folder as well as server.\n\nTherefore you only have to run it the first time, and everytime you add a new npm package to,\nthe package.json within client, instead of using npm install --save within the client folder.\n\nAfter installing the packages do \n                npm run server\nTo run the actual server serving the app.\nIt will hot-restart when you change files in frontend, or backend.\n\nTo test that the api works, and not only the frontend, you can do\nlocalhost:5000/api/test/health on the withBackendWrapper. If you get \"all good\" it works.\n\nOn withAuth you can tell simply by attempting to login or register, though here you will have to first\nsetup a mongodb database or equivelent in server.js. It is set by default to your local mongodb server,\nif you happen to have one running you can just use that one.\n\n________________________________________________________________________________________________________________\n\n#### Dotnet6 React\nTo start dotnet6React simply do\nnpm run preStart\nthat installs the npm packages neccesary in the Frontend folder as well as dotnet restore.\n\nTherefore you only have to run it the first time, and everytime you add a new npm package to,\nthe package.json within Frontend, instead of using npm install --save within the client folder.\n\nAfter installing the packages do \n                npm run server\nTo run the actual server serving the app.\nIt will hot-restart when you change files in frontend, or backend.\n\nTo test that the api works, and not only the frontend, you can do\nlocalhost:5000/api/WeatherForecast on the dotnetReact app. If you get some json temperature forecast filler info,\nyou are all set.\n\n#### Dotnet6 React with OData.\nTo start dotnet6ReactwOData simply do\nnpm run preStart\nthat installs the npm packages neccesary in the Frontend folder as well as dotnet restore.\n\nTherefore you only have to run it the first time, and everytime you add a new npm package to,\nthe package.json within Frontend, instead of using npm install --save within the client folder.\n\nAfter installing the packages do \n                npm run server\nTo run the actual server serving the app.\nIt will hot-restart when you change files in frontend, or backend.\n\nTo test that the api works, and not only the frontend, you can do\nlocalhost:5000/api/WeatherForecast on the dotnetReact app. If you get some json temperature forecast filler info,\nyou are all set.\n\nYou can then do localhost:5000/api/WeatherForecast?$Select=id to make sure odata is working.\nFrontend should be at any route that doesnt start with /api/.\n\n#### Dotnet6 React with auth.\nTo start dotnet6ReactwAuth simply do\nnpm run preStart\nthat installs the npm packages neccesary in the Frontend folder as well as dotnet restore, migrating db and updating it.\nTherefore you only have to run it the first time.\n\nIf you use it again, you will have to delete the migration folder and the .db files first.\n\nAfter installing the packages do \n                npm run server\nTo run the actual server serving the app.\nIt will hot-restart when you change files in frontend, or backend.\n\nTo test that the api works, and not only the frontend, you can simply attempt to register and then login at /*.\n\n#### Dotnet6 React with auth RSA.\nTo start dotnet6ReactwRsaAuth simply do\nnpm run preStart\nthat installs the npm packages neccesary in the Frontend folder as well as dotnet restore, migrating db and updating it.\nTherefore you only have to run it the first time.\n\nIf you use it again, you will have to delete the migration folder and the .db files first.\n\nAfter installing the packages do \n                npm run server\nTo run the actual server serving the app.\nIt will hot-restart when you change files in frontend, or backend.\n\nTo test that the api works, and not only the frontend, you can simply attempt to register and then login at /*.\n\n#### Dotnet6 React with OData and Auth.\nTo start dotnet6ReactODataAuth simply do\nnpm run preStart\nthat installs the npm packages neccesary in the Frontend folder as well as dotnet restore, migrating db and updating it.\nTherefore you only have to run it the first time.\n\nIf you use it again, you will have to delete the migration folder and the .db files first.\n\nAfter installing the packages do \n                npm run server\nTo run the actual server serving the app.\nIt will hot-restart when you change files in frontend, or backend.\n\nTo test that the api works, and not only the frontend, you can simply attempt to register and then login at /*.\n\nYou can then do localhost:5000/api/WeatherForecast?$Select=id to make sure odata is working.\n\n________________________________________________________________________________________________________________","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frub3n2000%2Fparcelreactprojectbuilder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frub3n2000%2Fparcelreactprojectbuilder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frub3n2000%2Fparcelreactprojectbuilder/lists"}