https://github.com/teddy95/webapp-boilerplate
Boilerplate for Node.js Webapplications with Express, Marko.js & Webpack 🧙
https://github.com/teddy95/webapp-boilerplate
authentication azure boilerplate bootstrap docker express font-awesome i18n markojs passport webpack
Last synced: about 2 months ago
JSON representation
Boilerplate for Node.js Webapplications with Express, Marko.js & Webpack 🧙
- Host: GitHub
- URL: https://github.com/teddy95/webapp-boilerplate
- Owner: Teddy95
- License: mit
- Created: 2019-06-14T07:05:53.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-03-15T04:44:56.000Z (about 2 years ago)
- Last Synced: 2024-04-14T12:14:13.836Z (about 1 year ago)
- Topics: authentication, azure, boilerplate, bootstrap, docker, express, font-awesome, i18n, markojs, passport, webpack
- Language: JavaScript
- Homepage:
- Size: 2.39 MB
- Stars: 4
- Watchers: 1
- Forks: 2
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Boilerplate for Node.js Webapplications with Express, Marko & Webpack 🧙
### Features
- Marko.js 🧩
- Express.js 🚂
- Webpack ⚡
- i18n internationalization 🌐
- Bootstrap 5 🎨
- FontAwesome 6 🔣
- Outdated browser warning generated from `.browserslistrc` 🚨
- Hot module replacement 🔥
This boilerplate also brings up a Dockerfile for instand use in a Docker container!
### Use this boilerplate as template
First 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.
```bash
# Clone repository
$ git clone https://github.com/YourUsername/YourRepository.git
```
## Contents
- [Installation](#installation)
- [Build application](#build-application)
- [Run application](#run-application)
- [Add routes / views](#add-routes--views)
- [Components](#components)
- [Stylesheets](#stylesheets)
- [Language variables](#language-variables)
- [Environment variables](#environment-variables)
- [Authentication](#authentication)
- [Docker container](#docker-container)
### Installation
Install all node modules to get things work.
```bash
# Install node dependencies
$ npm install
```
### Build application
Before you start your web application, you have to compile the app. This step is required bevor the first run and after every file change.
```bash
# Build your webapp
$ npm run build
```
### Run application
```bash
# Run application
$ npm run start
```
Or you can run the app in developer mode, so the app is compiling itself after filechanges and reload its contents in browser.
```bash
# Run application in developer mode
$ npm run dev
```
You 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`.
```bash
# Run application in debug mode
$ npm run debug
```
### Add routes / views
Add a new route in `/app/routes.js` and the matching view in the `/app/view` directory as `.marko` file.
### Components
Components are written in [marko.js](https://github.com/marko-js/marko). Add new components in the `/app/components` directory.
### Stylesheets
Write 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.
### Language variables
All 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`
```marko
// Simple language variable
// -> Hello world!
// Language variable with value (value can also be an array of values)
// -> Hello Andre!
// Language variables with singular and plural
// -> One cat
// -> 2 cats
// You can also use the translation via JavaScript
-- ${__('greeting')} // -> Hello world!
-- ${__('interpolatedGreeting', 'Andre')} // -> Hello Andre!
-- ${__n('cats', 2)} // -> 2 cats
```
### Environment variables
Create an `.env` file in the root directory of your web app.
```env
# Sample...
GITHUB_CLIENT_ID="11e92....df3"
GITHUB_CLIENT_SECRET="27bfd2..........84e66d7"
```
```javascript
// Access environment variables
const githubClientId = process.env.GITHUB_CLIENT_ID
console.log(githubClientId)
```
### Authentication
#### Enable authentication
Enable authentication in `/config.js` by setting `authentication` to true.
```bash
# Login url
/auth//login
/auth/github/login
# Login callback url
/auth//callback
# Logout url
/logout
```
The 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. ✨
#### Authentication for routes
You can enable authentication for each route in `/app/routes.js` individually.
#### Add authentication providers
You can add third party authentication in `/app/authentication.js` e.g. for GitHub.
```javascript
module.exports = {
'github': {
authMehtodFile: require('./lib/auth/github.auth.js'),
callbackHttpMethod: 'get'
},
'azuread-openidconnect': { ... },
...
}
```
You 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.
## Docker container
### Build image from Dockerfile
```bash
$ docker build -t webapp_name .
```
### Run container from image
The following command start a docker container from your image and map port 8080 to port 3000. 🔮
```bash
$ docker run -it -p 3000:8080 webapp_name
```
After running the commands above, go to: