Giter Site home page Giter Site logo

oxenprogrammer / local-weather-app Goto Github PK

View Code? Open in Web Editor NEW

This project forked from duluca/local-weather-app

0.0 1.0 0.0 3.25 MB

Learn Angular, Material, RxJS fundemantals using OpenWeatherMap.org APIs

Home Page: https://angularforenterprise.com

License: MIT License

TypeScript 69.05% JavaScript 8.13% HTML 19.08% CSS 0.88% Dockerfile 0.10% Shell 0.07% SCSS 2.69%

local-weather-app's Introduction

LocalCast Weather

Learn Angular, Angular Material, RxJS fundementals with LocalCast Weather using the Kanban method.

View live demo: https://localcast-weather.duluca.now.sh/

Angular Version CircleCI DeepScan grade Coverage Status Kanban Board

mat-style4

Get the book

LocalCast Weather has been developed in support of my book Angular for Enterprise-Ready Web Applications. You can get the book at any major bookstore or find the links at http://AngularForEnterprise.com.

Watch the talk on Architecture for Scalable Angular Apps on Pluralsight.

Check out the slides for Architecture for Scalable Angular Apps free at Slides.com.

Check out LemonMart, an Angular Grocery Store LOB App implemented with a Router-first architecture with common recipes and patterns at https://github.com/duluca/lemon-mart. You can also use LemonMart as a template project to start your own app.

Build, debug and publish Docker images with npm Scripts for Docker and achieve Blue-Green deployments on AWS Fargate with npm Scripts for AWS.

Build

  • npm run build:prod to build a production optimized version of the app.
  • npm run docker:debug to run tests and build a containerized version of the app.

Developers

This app was developed to demonstrate Angular fundementals, unit testing, and different techniques for building Angular apps using reactive patterns. The app is a good blueprint if you intend to build largely a single screen app experience. Questions? Consider creating an issue on this repo and buying my book at http://AngularForEnterprise.com.

Pre-requisites

  • Do NOT install @angular/cli or typescript globally to avoid version mismatch issues across multiple projects.
    • Note: When creating new projects in the future, execute npx @angular/cli new app-name --routing to create a new Angular app with basic routing wired.
    • If you have trouble with this command, try npx -p @angular/cli new app-name --routing
  • To run ng commands from within the project directory, preprend npx to commands, like npx ng build.
  • To continue using ng without having to prepend npx, configure shell autofallback as described here: https://www.npmjs.com/package/npx#shell-auto-fallback.

Adapting the template

  • Fork and clone this repo.
  • Rename the repo on GitHub to match the name of your project.
  • Search and replace references to lemon-mart with your project name and git repo.
  • Remove manager, pos, and inventory folders and references to them from app-routing.module.ts.
  • You may modify profile.component.ts and view-user.component.ts under the user folder to fit your needs.
  • Edit lemonmart-theme.scss to match your desired color scheme.
  • Now you may begin implementing your own feature modules.

During Development

  • Run npm start for a developmenet web server.
  • Navigate to http://localhost:5000/. The app will automatically reload if you change any of the source files.
    • Note that the port is different than the default Angular port of 4200 intentionally, so you can run test projects or proof of concepts side-by-side without the hassle of specifiying a new port.
  • Run npm test to execute the unit tests via Karma.
  • Run npm run e2e to execute the end-to-end tests via Protractor.

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.

Further help with Angular CLI

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

Full-Stack Setup with Docker Compose and Deploying to AWS

See the example project here https://github.com/duluca/lemon-mart-server

Deprecations

Waffle.io

Sadly Waffle.io no longer exists. I recommend using GitHub Projects as a free replacement.

Using Zeit Now with Docker

Unfortunately Zeit Now no longer allows publication of arbitrary Dockerfile images. Using Zeit v2 you can publish the output of your dist folder and still be able to host your application for free.

A replacement for publishing arbitrary Docker images would be a new service called Google Cloud Run. A sample command would look like gcloud beta run deploy --image localcast-weather.

local-weather-app's People

Contributors

brendoncaulkins avatar duluca avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.