Generate, Build, and Deploy

with Yeoman, Form.io, Angular.js, Gulp, and Amazon S3

Follow along @

http://bit.ly/1TGDVUQ

About

Let's build something amazing!

http://groupselfie.us
https://github.com/travist/groupselfie

Getting started with Yeoman

npm install -g yo

Angular.js + Gulp Yeoman Generator

https://github.com/Swiip/generator-gulp-angular

Installing and Running Generator


npm install -g gulp bower generator-gulp-angular
mkdir myapp && cd $_
yo gulp-angular

Serving Application

gulp serve

Upgrade to Angular 1.5


bower install --save angular
bower install --save angular-sanitize
bower install --save angular-messages
bower install --save angular-aria

Install Bootswatch, Font Awesome, and Form.io


bower install --save bootswatch
bower install --save font-awesome
bower install --save ng-formio
bower install --save ng-formio-helper

Add dependencies

/src/app/index.module.js
(function() {
  'use strict';
  angular.module('groupselfie', [
    'ngSanitize',
    'ngMessages',
    'ngAria',
    'ui.router',
    'ui.bootstrap',
    'toastr',
    'formio',
    'ngFormioHelper'
  ]);
})();

Changes: Part 1

Delete "overrides" from bower.json file

Changes: Part 2

Don't exclude bootstrap.js

/gulp/conf.js
exports.wiredep = {
  exclude: [/\/bootstrap-sass\/.*\.js/, /\/bootstrap\.css/],
  directory: 'bower_components'
};

Changes: Part 3

Change /app/index.scss to the following

You can modify variables with the following.

Changes: Part 4

Modify the fonts gulp task.

/gulp/build.js
gulp.task('fonts', function () {
  return gulp.src([
    'bower_components/bootstrap-sass/assets/fonts/**/*',
    'bower_components/font-awesome/fonts/*',
  ])
  .pipe($.filter('**/*.{eot,svg,ttf,woff,woff2}'))
  .pipe(gulp.dest(path.join(conf.paths.dist, '/fonts/')));
});

Changes: Part 5

Add the following routes to gulp/server.js

Changes: Part 6

Add the navbar in index.html

and add "container" to ui-view

Move views to "views" folder.

including main.html

Create a gulp task to move "views" to dist.

/gulp/build.js
gulp.task('views', function() {
  return gulp.src([
    path.join(conf.paths.src, '/views/**/*')
  ]).pipe(gulp.dest(path.join(conf.paths.dist, '/views/')));
});

gulp.task('build', ['html', 'fonts', 'views', 'other']);

User Authentication

using Form.io

Create a Form.io project

Using the Default template

Create "auth" page.

/src/views/user/auth.html

Create "login" page

/src/views/user/login.html

Create "register" page

/src/views/user/register.html

Register the FormioAuth provider

/src/app/index.config.js

Initialize the FormioAuth provider

/src/app/index.run.js
(function() {
  'use strict';

  angular.module('groupselfie').run(runBlock);

  /** @ngInject */
  function runBlock(FormioAuth) {
    FormioAuth.init();
  }
})();

You now have user Authentication!

Amazon S3

@ https://aws.amazon.com

We will create 2 buckets

  • groupselfie.us - Will host our application.
  • files.groupselfie.us - Will host our files.

Go to Identity & Access Management (IAM)

Go to IAM Users section

Create a user for S3

Take note of the security credentials

Attach Policy to this user

Give this user full S3 Access

Create a user for uploading

Take note of the security credentials

Copy User ARN

Click on this user within Users to get to this page.

Create application S3 bucket

Note: Your bucket will need to be called something else.

Configure bucket for Static Web Hosting

Create files S3 bucket

Configure properties for files bucket

Add the following bucket policy.

You must change the ARN & bucket names to match yours. 

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "UploadFile",
      "Effect": "Allow",
      "Principal": {
        "AWS": "arn:aws:iam::551091399009:user/GroupSelfieUpload"
      },
      "Action": [
        "s3:GetObject",
        "s3:PutObjectAcl",
        "s3:PutObject"
      ],
      "Resource": "arn:aws:s3:::files.groupselfie.us/*"
    },
    {
      "Sid": "AllowPublicRead",
      "Effect": "Allow",
      "Principal": {
        "AWS": "*"
      },
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::files.groupselfie.us/*"
    },
    {
      "Sid": "crossdomainAccess",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::files.groupselfie.us/crossdomain.xml"
    }
  ]
}

Add CORS Configuration

Add the following CORS

Replace the domain name with yours. 



  
    http://groupselfie.us
    POST
    GET
    HEAD
    3000
    *

Configure Form.io for S3

Adding Resources

Create "Group" Resource

within your Form.io project

Configure permissions

To allow authenticated users to create and manage their own.

Create "Selfie" Resource

Configure permissions

To allow authenticated users to create and manage their own.

Add FormioResourceProvider for "Group"

/src/app/index.config.js

Add FormioResourceProvider for "Selfie"

/src/index.confg.js

Adding the views

The "main" view

/src/views/main.html

The "main" view code

/src/app/index.route.js

The "group" view

/src/views/group/view.html

Finding groups

/src/views/group/find.html

Finding groups code

/src/app/index.route.js

Deployment

Install Gulp S3

npm install --save gulp-s3

Add a new Deploy task

which will build before it deploys 

var s3 = require("gulp-s3");
gulp.task('deploy', ['build'], function () {
  return gulp.src('./dist/**/*').pipe(s3(require('./aws.json')));
});

Create an aws.json file


{
  "key": "-- THE KEY FOR THE USER THAT HAS FULL S3 ACCESS --",
  "secret": "-- THE SECRET FOR THE USER THAT HAS FULL S3 ACCESS --",
  "bucket": "groupselfie.us",
  "region": "us-east-1"
}

Add aws.json to .gitignore

to help keep this information safe 
.gitignore
aws.json
node_modules/
bower_components/
coverage/
.sass-cache/
.idea/
.tmp/
dist/

Deploy your app!

gulp deploy

Have Fun!