All Projects β†’ TheDonDope β†’ crudular

TheDonDope / crudular

Licence: other
An Angular CRUD example application using JWT and consuming a JSON API

Programming Languages

typescript
32286 projects
HTML
75241 projects
javascript
184084 projects - #8 most used programming language
Dockerfile
14818 projects
SCSS
7915 projects

Projects that are alternatives of or similar to crudular

Bootstrapcdn
Free Bootstrap CDN hosting
Stars: ✭ 1,075 (+6618.75%)
Mutual labels:  bootstrap4, font-awesome
sakura
🌸 A Jekyll theme with baked in Bootstrap 4, Font Awesome 5, Algolia instant search, and more!
Stars: ✭ 31 (+93.75%)
Mutual labels:  bootstrap4, font-awesome
ng-multi-bootstrap-themes
Dynamically Switch Themes with Bootstrap 4 and Angular 6
Stars: ✭ 37 (+131.25%)
Mutual labels:  bootstrap4, font-awesome
Awesome Bootstrap Checkbox
βœ”οΈFont Awesome Bootstrap Checkboxes & Radios. Pure css way to make inputs look prettier
Stars: ✭ 2,044 (+12675%)
Mutual labels:  bootstrap4, font-awesome
startbootstrap-logo-nav
A Bootstrap navigation template with a logo in the navigation bar - created by Start Bootstrap
Stars: ✭ 65 (+306.25%)
Mutual labels:  bootstrap4
VTMsite
Vampire: The Masquerade character creator page made with Angular
Stars: ✭ 36 (+125%)
Mutual labels:  bootstrap4
Admin-Dashboard-Template-Bootstrap
Admin Dashboard Template - Bootstrap 4 & Material Design. ATTENTION! New templates for the latest Bootstrap 5 are now also available. Access new free templates via the link below.
Stars: ✭ 47 (+193.75%)
Mutual labels:  bootstrap4
Python
covers python basic to advance topics, practice questions, logical problems in python, web development using html, css, bootstrap, jquery, DOM, Django πŸš€πŸš€. πŸ’₯ 🌈
Stars: ✭ 29 (+81.25%)
Mutual labels:  bootstrap4
gulp-sass-bootstrap-boilerplate
β°πŸ“Œ Boilerplate with gulp.js, Sass, Babel, and Browsersync.
Stars: ✭ 24 (+50%)
Mutual labels:  bootstrap4
simple-webpack-starter
Webpack 4 starter project for rapid websites development with SASS, Bootstrap 4, ES6 & Docker.
Stars: ✭ 18 (+12.5%)
Mutual labels:  bootstrap4
components
Components library for the Blockchain.com ecosystem πŸ’ πŸ”₯
Stars: ✭ 20 (+25%)
Mutual labels:  font-awesome
Azia-Admin-Bootstrap-Template
Free Bootstrap 4 Admin template
Stars: ✭ 73 (+356.25%)
Mutual labels:  bootstrap4
spring-boot-vuejs-websockets
βœ”οΈ Simple spring-boot vue.js app with websockets and docker support
Stars: ✭ 30 (+87.5%)
Mutual labels:  bootstrap4
cmb2-field-faiconselect
CMB2 Field Type: Font Awesome (Font Awesome Icon Selector for CMB2)
Stars: ✭ 20 (+25%)
Mutual labels:  font-awesome
luya-bootstrap4
Bootstrap4 Assets and Helper classes like ActiveForm for LUYA and Yii2.
Stars: ✭ 18 (+12.5%)
Mutual labels:  bootstrap4
pothole detection
By using this app users can report the potholes on road by clicking a photo via our app and if a pothole is detected by Machine Learning modal then it is saved to our Database from where officials can view the specifics like location,reported by and official can resolve the request.User are notified by email for every update regarding their request
Stars: ✭ 17 (+6.25%)
Mutual labels:  bootstrap4
timeline-express
Timeline express allows you to create a vertical animated and responsive timeline of posts, without writing a single line of code. Sweet!
Stars: ✭ 20 (+25%)
Mutual labels:  font-awesome
hugo-dynamic-tabs
A Hugo theme component that allows you to add dynamic tabs in your markdown files.
Stars: ✭ 36 (+125%)
Mutual labels:  bootstrap4
material-sass
A rubygem of Material Design for Bootstrap 4
Stars: ✭ 55 (+243.75%)
Mutual labels:  bootstrap4
mudjs
WebSocket MUD client for DreamLand
Stars: ✭ 13 (-18.75%)
Mutual labels:  bootstrap4

Crudular

Crudular

Angular Style Guide Conventional Commits Build Status

This project was generated with Angular CLI version 1.6.3.

It uses the following npm packages (version numbers current as of 2017-03-04):

  • Bootstrap 4.0.0-alpha.6: Used for the SCSS styling of the application
  • Font-Awesome 4.7.0: Used as the glyphicon font of the application
  • Moment 2.17.0: Used for date/time manipulation (Note: The npm package already includes the types for moment so you do not need to add it with npm install @types/moment --save-dev)

It follows the Official Angular Styleguide.

Features

The application provides the following features:

  • Provide a login view to authenticate with a remote api
  • Manage a JWT authenticity token to use for calls of protected remote api methods
  • Provide a home view showing the user information about his JWT token
  • Provide a dynamic authentication-based navigation
  • Provides full Docker support for both development and production environment

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build.

Dockerization

The application provides full Docker support. You can use it for both development as well as production builds and deployments.

How to build and start the dockerized version of the application

The Dockerization infrastructure is described in the docker-compose.yml (respectively docker-compose.production.yml. The application consists of two containers:

  • crudular-angular - In development mode, this container serves the angular app. In production mode it builds the angular app, with the build artifacts being served by the Nginx container
  • crudular-nginx - This container is used only production mode. It serves the built angular app with Nginx.

Development build and deployment

Run the following:

$ docker-compose build
$ docker-compose up -d

Now open your browser at http://localhost:4200

Production build and deployment

Run the following:

$ docker-compose -f docker-compose.production.yml build
$ docker-compose -f docker-compose.production.yml up crudular-angular   # Wait until this container has finished building, as the nginx container is dependent on the production build artifacts
$ docker-compose -f docker-compose.production.yml up -d crudular-nginx  # Start the nginx container in detached mode

Now open your browser at http://localhost:8080

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Commit Message Format

This project follows the angular commit-message convention.

Versioning

This project follows the Semantic Versioning 2.0.0 specification.

Bumping Version Number

If you follow semantic versioning and use the angular commit-message convention, you can use the following npm task to get the appropiate next version number

$ npm run bump-version

Releasing

You can use the following workflow to ease your release process:

Note: The following scripts use the npm-packages conventional-github-releaser, conventional-recommended-bump and standard-changelog. Make sure you install them first by running: npm install -g conventional-github-releaser conventional-recommended-bump standard-changelog. Furthermore, gitflow is partially used for the following commands

  1. Given your project was initialized with $ git flow init and your current branch being develop is ready to be released, do the following
  2. Get your next-version number:$ npm run bump-version
  3. Start your next-release: $ git flow release start <next-version-from-step-1>
  4. Bump the version number in your package.json with the version from step 1
  5. Generate your CHANGELOG.md: $ npm run changelog
  6. Make your release commit: $ git add --all && git commit -m 'chore(release): <next-version-from-step-1>'
  7. Finish your release: $ git flow release finish <next-version-from-step-1>
  8. Push your branches and tags to GitHub: $ git push origin master && git push origin develop && git push origin --tags
  9. Draft and publish your GitHub Relase: $ npm run github-release

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].