{"id":25879730,"url":"https://github.com/teddy95/webapp-boilerplate","last_synced_at":"2025-03-02T13:27:49.426Z","repository":{"id":39432079,"uuid":"191893277","full_name":"Teddy95/webapp-boilerplate","owner":"Teddy95","description":"Boilerplate for Node.js Webapplications with Express, Marko.js \u0026 Webpack 🧙","archived":false,"fork":false,"pushed_at":"2023-03-15T04:44:56.000Z","size":2508,"stargazers_count":4,"open_issues_count":3,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-04-14T12:14:13.836Z","etag":null,"topics":["authentication","azure","boilerplate","bootstrap","docker","express","font-awesome","i18n","markojs","passport","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/Teddy95.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-06-14T07:05:53.000Z","updated_at":"2022-12-05T21:47:34.000Z","dependencies_parsed_at":"2023-02-08T08:46:37.825Z","dependency_job_id":null,"html_url":"https://github.com/Teddy95/webapp-boilerplate","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Teddy95%2Fwebapp-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Teddy95%2Fwebapp-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Teddy95%2Fwebapp-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Teddy95%2Fwebapp-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Teddy95","download_url":"https://codeload.github.com/Teddy95/webapp-boilerplate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241512260,"owners_count":19974555,"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":["authentication","azure","boilerplate","bootstrap","docker","express","font-awesome","i18n","markojs","passport","webpack"],"created_at":"2025-03-02T13:27:48.745Z","updated_at":"2025-03-02T13:27:49.404Z","avatar_url":"https://github.com/Teddy95.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Boilerplate for Node.js Webapplications with Express, Marko \u0026 Webpack 🧙\n\n![Screenshot](app/assets/images/screenshot.png)\n\n### Features\n\n- Marko.js 🧩\n- Express.js 🚂\n- Webpack ⚡\n- i18n internationalization 🌐\n- Bootstrap 5 🎨\n- FontAwesome 6 🔣\n- Outdated browser warning generated from `.browserslistrc` 🚨\n- Hot module replacement 🔥\n\nThis boilerplate also brings up a Dockerfile for instand use in a Docker container!\n\n### Use this boilerplate as template\n\n![Use this Template](app/assets/images/use-template.png)\n\nFirst of all, use this repository as template for your new web application by clicking the green button on top of this repository. After that, you have to clone your new repository to your local pc.\n\n```bash\n# Clone repository\n$ git clone https://github.com/YourUsername/YourRepository.git\n```\n\n## Contents\n\n- [Installation](#installation)\n- [Build application](#build-application)\n- [Run application](#run-application)\n- [Add routes / views](#add-routes--views)\n- [Components](#components)\n- [Stylesheets](#stylesheets)\n- [Language variables](#language-variables)\n- [Environment variables](#environment-variables)\n- [Authentication](#authentication)\n- [Docker container](#docker-container)\n\n### Installation\n\nInstall all node modules to get things work.\n\n```bash\n# Install node dependencies\n$ npm install\n```\n\n### Build application\n\nBefore you start your web application, you have to compile the app. This step is required bevor the first run and after every file change.\n\n```bash\n# Build your webapp\n$ npm run build\n```\n\n### Run application\n\n```bash\n# Run application\n$ npm run start\n```\n\nOr you can run the app in developer mode, so the app is compiling itself after filechanges and reload its contents in browser.\n\n```bash\n# Run application in developer mode\n$ npm run dev\n```\n\nYou can also run your app in debug mode. Just run the following command and attach a debugger to your app. The app is using the default port, mostly `9229`.\n\n```bash\n# Run application in debug mode\n$ npm run debug\n```\n\n### Add routes / views\n\nAdd a new route in `/app/routes.js` and the matching view in the `/app/view` directory as `.marko` file.\n\n### Components\n\nComponents are written in [marko.js](https://github.com/marko-js/marko). Add new components in the `/app/components` directory.\n\n### Stylesheets\n\nWrite your stylesheets in CSS or SCSS and save them to `/app/style` and import them to `style.scss`. This stylesheet file will be compiled and included in your application.\n\n### Language variables\n\nAll language variables are stored in `/app/locales` and can be accessed by a marko.js component. The boilerplate uses an own i18n module for use in server side mode and on the client side. Change language with query parameter `lang` e.g. `http://localhost:8080/?lang=de`\n\n```marko\n// Simple language variable\n\u003clang var=\"greeting\" /\u003e // -\u003e Hello world!\n\n// Language variable with value (value can also be an array of values)\n\u003clang var=\"interpolatedGreeting\" value=\"Andre\" /\u003e // -\u003e Hello Andre!\n\n// Language variables with singular and plural\n\u003clang var=\"cats\" value=\"1\" plural=true /\u003e // -\u003e One cat\n\u003clang var=\"cats\" value=\"2\" plural=true /\u003e // -\u003e 2 cats\n\n// You can also use the translation via JavaScript\n-- ${__('greeting')} // -\u003e Hello world!\n-- ${__('interpolatedGreeting', 'Andre')} // -\u003e Hello Andre!\n-- ${__n('cats', 2)} // -\u003e 2 cats\n```\n\n### Environment variables\n\nCreate an `.env` file in the root directory of your web app.\n\n```env\n# Sample...\nGITHUB_CLIENT_ID=\"11e92....df3\"\nGITHUB_CLIENT_SECRET=\"27bfd2..........84e66d7\"\n```\n\n```javascript\n// Access environment variables\nconst githubClientId = process.env.GITHUB_CLIENT_ID\nconsole.log(githubClientId)\n```\n\n### Authentication\n\n#### Enable authentication\n\nEnable authentication in `/config.js` by setting `authentication` to true.\n\n```bash\n# Login url\n/auth/\u003cprovider\u003e/login\n/auth/github/login\n\n# Login callback url\n/auth/\u003cprovider\u003e/callback\n\n# Logout url\n/logout\n```\n\nThe user object is passed to the browser and can be accessed by `out.global.user`. GitHub authentication is already integrated! Just enable authentication add an `.env` file as the example above with your GitHub client id and client secret to your project and let the magic happen. ✨\n\n#### Authentication for routes\n\nYou can enable authentication for each route in `/app/routes.js` individually.\n\n#### Add authentication providers\n\nYou can add third party authentication in `/app/authentication.js` e.g. for GitHub.\n\n```javascript\nmodule.exports = {\n\t'github': {\n\t\tauthMehtodFile: require('./lib/auth/github.auth.js'),\n\t\tcallbackHttpMethod: 'get'\n\t},\n\t'azuread-openidconnect': { ... },\n\t...\n}\n```\n\nYou need an `authMehtodFile` which returns a passport strategy and a `callbackHttpMethod` like get or post. The callback http method defines the method type of the callback url for the specific authentication type.\n\n## Docker container\n\n### Build image from Dockerfile\n\n```bash\n$ docker build -t webapp_name .\n```\n\n### Run container from image\n\nThe following command start a docker container from your image and map port 8080 to port 3000. 🔮\n\n```bash\n$ docker run -it -p 3000:8080 webapp_name\n```\n\nAfter running the commands above, go to: \u003chttp://localhost:3000\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fteddy95%2Fwebapp-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fteddy95%2Fwebapp-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fteddy95%2Fwebapp-boilerplate/lists"}