|
| 1 | +# Starting your app |
| 2 | + |
| 3 | +Now that you've gone through everything in the Getting Started section, lets get our app up and running. We do this by running the following: |
| 4 | + |
| 5 | +```bash |
| 6 | +$ gulp serve |
| 7 | +``` |
| 8 | + |
| 9 | +We should see something like this spit out after it: |
| 10 | + |
| 11 | +```bash |
| 12 | +$ gulp serve |
| 13 | +[12:15:45] Requiring external module babel-register |
| 14 | +(node:23392) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version. |
| 15 | +[12:16:03] Using gulpfile ~/aftest/gulpfile.babel.js |
| 16 | +(node:23392) DeprecationWarning: crypto.createCredentials is deprecated. Use tls.createSecureContext instead. |
| 17 | +(node:23392) DeprecationWarning: crypto.Credentials is deprecated. Use tls.SecureContext instead. |
| 18 | +[12:16:04] Starting 'serve'... |
| 19 | +[12:16:04] Starting 'clean:tmp'... |
| 20 | +[12:16:04] Starting 'lint:scripts'... |
| 21 | +[12:16:04] Starting 'lint:scripts:client'... |
| 22 | +[12:16:04] Starting 'lint:scripts:server'... |
| 23 | +[12:16:04] Starting 'inject'... |
| 24 | +[12:16:04] Starting 'inject:scss'... |
| 25 | +[12:16:04] Starting 'copy:fonts:dev'... |
| 26 | +[12:16:04] Starting 'env:all'... |
| 27 | +[12:16:04] Finished 'env:all' after 63 ms |
| 28 | +[12:16:04] Finished 'clean:tmp' after 370 ms |
| 29 | +[12:16:06] gulp-inject 6 files into app.scss. |
| 30 | +[12:16:06] Finished 'inject:scss' after 2.63 s |
| 31 | +[12:16:06] Finished 'inject' after 2.63 s |
| 32 | +[12:16:08] Finished 'copy:fonts:dev' after 4.04 s |
| 33 | +[12:16:08] Finished 'lint:scripts:server' after 4.74 s |
| 34 | +[12:16:09] Finished 'lint:scripts:client' after 5.33 s |
| 35 | +[12:16:09] Finished 'lint:scripts' after 5.33 s |
| 36 | +[12:16:09] Starting 'start:server'... |
| 37 | +[12:16:09] Finished 'start:server' after 16 ms |
| 38 | +[12:16:09] Starting 'start:client'... |
| 39 | +[nodemon] 1.9.2 |
| 40 | +[nodemon] to restart at any time, enter `rs` |
| 41 | +[nodemon] watching: /home/user/aftest/server/**/* |
| 42 | +[nodemon] starting `node server` |
| 43 | +(node:22180) DeprecationWarning: crypto.createCredentials is deprecated. Use tls.createSecureContext instead. |
| 44 | +(node:22180) DeprecationWarning: crypto.Credentials is deprecated. Use tls.SecureContext instead. |
| 45 | +Express server listening on 9000, in development mode |
| 46 | +(node:22180) DeprecationWarning: crypto.pbkdf2 without specifying a digest is deprecated. Please specify a digest |
| 47 | +[12:16:18] Finished 'start:client' after 8.97 s |
| 48 | +[12:16:18] Starting 'watch'... |
| 49 | +[12:16:18] Finished 'watch' after 234 ms |
| 50 | +[12:16:18] Finished 'serve' after 15 s |
| 51 | +finished populating users |
| 52 | +webpack: wait until bundle finished: / |
| 53 | +[BS] Proxying: http://localhost:9000 |
| 54 | +[BS] Access URLs: |
| 55 | + ---------------------------------- |
| 56 | + Local: http://localhost:3000 |
| 57 | + External: http://10.0.75.1:3000 |
| 58 | + ---------------------------------- |
| 59 | + UI: http://localhost:3002 |
| 60 | + UI External: http://10.0.75.1:3002 |
| 61 | + ---------------------------------- |
| 62 | +webpack done hook |
| 63 | +Hash: eb4e167635a3952856e9 |
| 64 | +Version: webpack 1.13.1 |
| 65 | +Time: 16538ms |
| 66 | + Asset Size Chunks Chunk Names |
| 67 | + app.bundle.js 2.83 MB 0 [emitted] app |
| 68 | + polyfills.bundle.js 209 kB 1 [emitted] polyfills |
| 69 | + vendor.bundle.js 2.62 MB 2 [emitted] vendor |
| 70 | + app.bundle.js.map 3.34 MB 0 [emitted] app |
| 71 | +polyfills.bundle.js.map 271 kB 1 [emitted] polyfills |
| 72 | + vendor.bundle.js.map 3.06 MB 2 [emitted] vendor |
| 73 | + ../client/index.html 1.39 kB [emitted] |
| 74 | +Child html-webpack-plugin for "..\client\index.html": |
| 75 | + Asset Size Chunks Chunk Names |
| 76 | + ../client/index.html 2.69 kB 0 |
| 77 | +webpack: bundle is now VALID. |
| 78 | +``` |
| 79 | + |
| 80 | +And then our default browser should open up to the app: |
| 81 | + |
| 82 | + |
| 83 | +<img src="/images/afs-screenshot.png" style="max-width: 800px; box-shadow: 0px 6px 6px -3px rgba(0, 0, 0, 0.2), 0px 10px 14px 1px rgba(0, 0, 0, 0.14), 0px 4px 18px 3px rgba(0, 0, 0, 0.12);" alt="App Screenshot"> |
| 84 | + |
| 85 | + |
| 86 | +Fantastic! We're now up and running with our Full-Stack Angular web application! So what can it do? |
| 87 | + |
| 88 | +### Homepage |
| 89 | + |
| 90 | +Assuming you scaffolded with a back-end database, you should see some 'features'. If you scaffolded with socket.io, you should see 'x' buttons next to each, and an input box. Try opening two browser windows to the same page side-by-side, and hitting the 'x' on one of the features. You should see the feature get removed on both web pages. Neat! This is because these database object changes are communicated to clients using socket.io. |
| 91 | + |
| 92 | + |
| 93 | +<img src="/images/socket.io-demo.gif" style="max-width: 800px; box-shadow: 0px 6px 6px -3px rgba(0, 0, 0, 0.2), 0px 10px 14px 1px rgba(0, 0, 0, 0.14), 0px 4px 18px 3px rgba(0, 0, 0, 0.12);" alt="Socket.io demo"> |
| 94 | + |
| 95 | + |
| 96 | +Neat. Let's see what else we can do. |
| 97 | + |
| 98 | +### Sign Up |
| 99 | + |
| 100 | +[TODO] |
0 commit comments