ultimatecourses / ultimate-angular-master-seed

Seed project for the "Ultimate Angular 1.x Pro" course.

Ultimate Angular: Pro App

This repo serves as the seed project for the Ultimate Angular 1.x Pro course as well as the final solution in a separate branch, come and learn advanced Angular 1.5 architecture and components!

Setup and install | Tasks | Firebase Rules | Resources

---

Live demo of app

Here's the app you're about to build, check it out! Create a user or login to get started with the contacts manager.

Setup and install

Fork this repo from inside GitHub so you can commit directly to your account, or simply download the .zip bundle with the contents inside.

Dependency installation

During the time building this project, you'll need development dependencies of which run on Node.js, follow the steps below for setting everything up (if you have some of these already, skip to the next step where appropriate):

1. Download and install Node.js here for Windows or for Mac.
2. Install Firebase CLI on the command-line with npm install -g firebase-tools
3. Install Gulp CLI on the command-line with npm install -g gulp

That's about it for tooling you'll need to run the project, let's move onto the project install.

Project installation and server

Now you've pulled down the repo and have everything setup, you'll need to cd into the directory that you cloned the repo into and run some quick tasks:

cd <master-seed-app-folder>
npm install

This will then setup all the development and production dependencies we need.

Now simply run this to boot up the server:

npm start

Everything you do will be inside of /src, and everything is compiled and outputted inside /dist, this is the same for both local development and deployment.

Tasks

A quick reminder of all tasks available:

Running the local server

npm start

Running the tests

npm test

Deploying to Firebase

You'll need to ensure you're logged into Firebase first (if you are prompted, otherwise skip to next step):

firebase login

To deploy:

npm run deploy

This will then use the gulpfile.babel.js tasks to build the project and deploy it all fully minified to your Firebase account. You'll then be shown the full URL of your project in the terminal for viewing your live app!

Firebase rules

You can copy and paste this into your database.rules.json file generated by Firebase:

{
  "rules": {
    ".read": true,
    "contacts": {
      "$uid": {
        ".read": "$uid === auth.uid",
        ".write": "$uid === auth.uid"
      }
    }
  }
}

Resources

There are several resources used inside this project, of which you can read further about to dive deeper or understand in more detail what they are:

• Firebase Docs
• Firebase CLI
• AngularFire Repo/Docs
• npm
• Gulp.js
• ui-router
• ngAnnotate
• ngTemplateCache

ultimate-angular-master-seed's Issues

Require is not defined

Hello,

I'm getting error after running npm start. I updated and downloaded all dependencies and ran npm install, following your set-up requirements.

vendor.js:39766 Uncaught ReferenceError: require is not defined
vendor.js:4640 Uncaught Error: [$injector:modulerr] Failed to instantiate module root due to:
Error: [$injector:modulerr] Failed to instantiate module components due to:
Error: [$injector:modulerr] Failed to instantiate module components.auth due to:
Error: [$injector:modulerr] Failed to instantiate module firebase due to:
Error: [$injector:nomod] Module 'firebase' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.5.8/$injector/nomod?p0=firebase
at http://localhost:4000/js/vendor.js:68:12
at http://localhost:4000/js/vendor.js:2082:17
at ensure (http://localhost:4000/js/vendor.js:2006:38)
at module (http://localhost:4000/js/vendor.js:2080:14)
at http://localhost:4000/js/vendor.js:4617:22
at forEach (http://localhost:4000/js/vendor.js:321:20)
at loadModules (http://localhost:4000/js/vendor.js:4601:5)
at http://localhost:4000/js/vendor.js:4618:40
at forEach (http://localhost:4000/js/vendor.js:321:20)
at loadModules (http://localhost:4000/js/vendor.js:4601:5)

npm install not working

Hi,

unfortunately there seems to be an error when trying to follow the instructions for setting up this project. If I try to npm install, it throws several python errors:

`gyp ERR! configure error
gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.
gyp ERR! stack at PythonFinder.failNoPython (C:\GITROOT\angularjspro_final-project\node_modules\node-gyp\lib\configure.js:484:19)
gyp ERR! stack at PythonFinder. (C:\GITROOT\angularjspro_final-project\node_modules\node-gyp\lib\configure.js:509:16)
gyp ERR! stack at C:\GITROOT\angularjspro_final-project\node_modules\graceful-fs\polyfills.js:284:29
gyp ERR! stack at FSReqWrap.oncomplete (fs.js:152:21)
gyp ERR! System Windows_NT 10.0.17134
gyp ERR! command "C:\Program Files\nodejs\node.exe" "C:\GITROOT\angularjspro_final-project\node_modules\node-gyp\bin\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd C:\GITROOT\angularjspro_final-project\node_modules\node-sass
gyp ERR! node -v v8.11.3
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok
Build failed with error code: 1
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: node scripts/build.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users<name>\AppData\Roaming\npm-cache_logs\2018-08-17T12_44_20_429Z-debug.log`

🚨 Potential Improper Access Control

👋 Hello, @toddmotto, @t-morgan, @yilinglu - a potential high severity Improper Access Control vulnerability in your repository has been disclosed to us.

Next Steps

1️⃣ Visit https://huntr.dev/bounties/1-other-ultimatecourses/ultimate-angular-master-seed for more advisory information.

2️⃣ Sign-up to validate or speak to the researcher for more assistance.

3️⃣ Propose a patch or outsource it to our community - whoever fixes it gets paid.

---

Confused or need more help?

• Join us on our Discord and a member of our team will be happy to help! 🤗

• Speak to a member of our team: @JamieSlome

---

This issue was automatically generated by huntr.dev - a bug bounty board for securing open source code.

Gulp 4 version

Hi, I'm struggling for weeks to migrate the gulpfile to gulp 4. Especially the watch-tasks arent working anymore... Could someone help me out here?

Trouble with npm run deploy command

Hi Todd,
Great course! One small issue -- when I do the npm run deploy command, it doesn't seem to work correctly. Google hasn't turned up with much useful information, but I'm going to keep searching. Thought I'd ask here as well.
Is this a version issue or something else?

Failed to load external module @babel/register

Hi Todd,
Thanks for this Great course!
I'm facing a "Failed to load external module @babel/register" error when run the "npm start" command.
Node Version: v8.11.3
Npm Version: 6.3.0
Gulp version: 3.9.1

[22:42:35] Failed to load external module @babel/register
[22:42:35] Requiring external module babel-register
/Users/neerkumar/Downloads/Learnings/ContactApp/gulpfile.babel.js:1
(function (exports, require, module, __filename, __dirname) { import gulp from 'gulp';
                                                              ^^^^^^
SyntaxError: Unexpected token import   
     at createScript (vm.js:80:10)   
    at Object.runInThisContext (vm.js:139:10)    
   at Module._compile (module.js:616:28)   
   at loader (/Users/neerkumar/Downloads/Learnings/ContactApp/node_modules/babel-register/lib/node.js:144:5)   
  at Object.require.extensions.(anonymous function) [as .js] (/Users/neerkumar/Downloads/Learnings/ContactApp/node_modules/babel-regi
ster/lib/node.js:154:7)   
 at Module.load (module.js:565:32)   
 at tryModuleLoad (module.js:505:12)    
at Function.Module._load (module.js:497:3)    
at Module.require (module.js:596:17)    
at require (internal/module.js:11:18)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `gulp`
npm ERR! Exit status 1npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/neerkumar/.npm/_logs/2018-08-07T17_12_35_510Z-debug.log

Thanks in advance.