gulp-aws-splash

by niftylettuce

niftylettuce / gulp-aws-splash

:shipit: The open-source LaunchRock alternative. Build beautiful splash pages to collect emails & mo...

436 Stars 18 Forks Last release: Not found MIT License 20 Commits 2 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Gulp AWS Splash

Circle CI MIT License

**The open-source LaunchRock alternative. Build beautiful splash pages to collect emails & more – primarily focused on performance and rapid development.

Default Components & Services*

This project is bundled with the following default components and services in mind:

* Note that you can swap out many of these components and services with your preferred alternatives.

Development

Development (and Deployment) is made simple thanks to Gulp. Follow these simple instructions for setting up this project locally:

  1. Make sure you are using Node.js version

    >= 0.12
    .
  2. Either clone this repository (recommended) or download a ZIP locally:

To clone locally (preferred approach):

  git clone [email protected]:niftylettuce/gulp-aws-splash.git

Or, to download a ZIP locally:

  curl -o ~/gulp-aws-splash.zip https://github.com/niftylettuce/gulp-aws-splash/archive/master.zip

If you downloaded the ZIP, then you'll need to extract it first of course.

  1. Change your working directory in terminal to the project's (e.g.

    cd ~/gulp-aws-splash/
    ).
  2. Install NPM dependencies required for developing locally and deploying the project:

  npm install

Also install

gulp
and
bower
globally if you have not yet already:
  npm install -g gulp bower
  1. Configure
    boot/config.js
    with your Google Analytics, MailChimp, and Amazon Web Services credentials.

For Google Analytics:

  1. Go to https://www.google.com/analytics/web/ → Admin → Create New Account.

  2. Complete required fields in order to create a new account.

  3. Copy/paste the generated "Tracking ID" as the value of

    googleAnalytics
    in
    boot/config.js
    :
-      googleAnalytics: env.GA || 'TODO',
+      googleAnalytics: env.GA || '12345678',

For MailChimp:

  1. Go to http://mailchimp.com/ → Log in (or Sign up) → Create List.

  2. Complete required fields in order to create a new list.

  3. Go to the Lists → Select (select your newly created list) → Signup forms → Embedded forms.

  4. Copy/paste the generated

    
     action attribute value as the value of 
    mailChimp.actionUrl
    in
    boot/config.js
    :
      mailChimp: {
-        actionUrl: env.MC_AU || 'TODO',
+        actionUrl: env.MC_AU || '//johndoe.us0.list-manage.com/subscribe/post?u=123456789abcdefghijklmno&id=1234567890',
  1. Copy/paste the generated
     name attribute value as the value of 
    mailChimp.hiddenInputName
    in
    boot/config.js
    (note that this
     is inside of an 
    with
    absolute
    CSS positioning):
    -        hiddenInputName: env.MC_HIN || 'TODO'
    +        hiddenInputName: env.MC_HIN || 'm_4co51234b92a65zb2a52z0221_154363e5def'
          },
    

    For Amazon Web Services:

    1. Go to https://console.aws.amazon.com/s3/home → Create New Bucket.

    2. Click on the newly created bucket → Static Website Hosting → Enable Website Hosting.

    3. Set the value of Index Document to

      index.html
      and Error Document to
      404.html
      , then click Save.
    4. Modify

      boot/config.js
      with your newly created bucket name:
          params: {
    -        Bucket: env.AWS_BUCKET || 'TODO'
    +        Bucket: env.AWS_BUCKET || 'gulp-aws-splash'
          }
    
    1. Go to https://console.aws.amazon.com/iam/home#security_credential → Access Keys (Access Key ID and Secret Access Key) → Create New Access Key.

    2. Copy/paste the values of Access Key ID and Secret Access Key to

      boot/config.js
      (note that you will repeat yourself below, since
      gulp-awspublish
      and
      gulp-cloudfront
      call for different configurations):
          aws: {
    -        key: env.AWS_KEY || 'TODO',
    +        key: env.AWS_KEY || 'ZFIKXOJ1MKTNVTQ4VPAD',
    -        accessKeyId: env.AWS_KEY || 'TODO',
    +        accessKeyId: env.AWS_KEY || 'ZFIKXOJ1MKTNVTQ4VPAD',
    -        secret: env.AWS_SECRET || 'TODO',
    +        secret: env.AWS_SECRET || 'j4nIT6KSuuuk01g3q4y+eYsuxtIUvMuoyWTfGV86W',
    -        secretAccessKey: env.AWS_SECRET || 'TODO',
    +        secretAccessKey: env.AWS_SECRET || 'j4nIT6KSuuuk01g3q4y+eYsuxtIUvMuoyWTfGV86W',
    
    1. Go to https://console.aws.amazon.com/cloudfront/home → Web → Get Started → Create Distribution.

    2. Complete required fields in order to create a new distribution

      • If you want to use your own domain name, then please fill out the value of Alternate Domain Names).
    3. Copy/paste the Distribution ID as the value for

      aws.distributionId
      in
      boot/config.js
      :
    -        distributionId: env.AWS_DI || 'TODO',
    +        distributionId: env.AWS_DI || 'UXCY8BV5VXPSL',
    
    1. Run
      gulp watch
      to start watching changes you make locally to the project. It should automatically open up http://localhost:3000/ in your default browser for you as well (which is the default development URL). Note that you typically don't need to run
      gulp build
      before running
      gulp watch
      (since it is in
      package.json
      as the postinstall script).

    Deployment

    Manual

    To manually deploy and publish changes to your project, simply run

    gulp deploy
    . That's all you have to do!

    Automated

    If you'd like your project to automatically be built and published to Amazon when you

    git push
    to GitHub, then configure CircleCI for continuous integration:
    1. Create a new repo on GitHub for your
      gulp-aws-splash
      project and push to it your locally checked out copy (ensure that the default
      circle.yml
      still exists in your project's root folder).
    2. Log in to CircleCI and add the newly created repository
    3. Create custom environment variables based off your configuration in
      boot/config.js
      . Here is a list of all the required variables:
    • GA
      - Google Analytics ID
    • MC_AU
      - MailChimp Form Action URL
    • MC_HIN
      - MailChimp Hidden Input Name
    • AWS_KEY
      - AWS key
    • AWS_SECRET
      - AWS secret
    • AWS_BUCKET
      - AWS bucket
    • AWS_DI
      - AWS distribution ID

    License

    MIT

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.