<p>In this tutorial I&rsquo;m going to show you how to build a photo gallery with a ready-to-use template from <a data-href="https://html5up.net/" href="https://html5up.net/" rel="nofollow noopener" target="_blank">HTML5UP</a>, powered by the <a data-href="https://www.cosmicjs.com" href="https://www.cosmicjs.com/" rel="nofollow noopener" target="_blank">Cosmic</a> API, hosted on the Cosmic App Server.</p><p><a href="https://github.com/cosmicjs/vuejs-photo-gallery/blob/master/article/img1.jpg" target="_blank"><img src="https://github.com/cosmicjs/vuejs-photo-gallery/raw/master/article/img1.jpg" alt="" class="fr-fic fr-dii"></a></p><h2>TL;DR</h2><p><a href="https://www.cosmicjs.com/apps/vuejs-photo-gallery" rel="noopener noreferrer" target="_blank">View demo</a><br><a href="https://github.com/cosmicjs/vuejs-photo-gallery" rel="noopener noreferrer" target="_blank">View the codebase on GitHub</a></p><h2>Prerequisites</h2><p>You&rsquo;ll need Node JS and npm. Make sure you already have them before you start.</p><h2>Getting Started</h2><p>First of all we&rsquo;ll need to install VueJS CLI and start the new project. &nbsp;Run the following commands to do this:</p><pre class="prism">npm install -g vue-cli
vue init webpack vuejs-photo-gallery
cd vuejs-photo-gallery
npm install</pre><p>After you&rsquo;ll setup this project you&rsquo;ll be able to run</p><pre class="prism">cd vuejs-photo-gallery
npm run dev</pre><p>And play with your app in browser</p><h2>Doing everything using the existing git repo</h2><p>First of all, you have to be sure you have node &gt; 6.x installed, than run the following commands:</p><pre class="prism">npm install -g vue-cli
git clone https://github.com/cosmicjs/vuejs-photo-gallery.git
cd vuejs-photo-gallery
npm install
npm run dev</pre><p>Browser window will open automatically once you&#39;ll run the last command</p><h2>Setting up Cosmic library</h2><p>First of all, install Cosmic Angular/JavaScript library</p><pre class="prism">npm install cosmicjs --save</pre><p>Now you should be able to import Cosmic object and perform Cosmic API calls like following:</p><pre class="prism">import Cosmic from &#39;cosmicjs&#39;;
const bucket = { slug: &#39;your-bucket-slug&#39; };

Cosmic.getObjects({ bucket }, (err, res) =&gt; {
  console.log(res.objects);
});</pre><h2>Setting up things with Cosmic</h2><p>Create the bucket and remeber the bucket name (<code>vuejs-photo-gallery</code> in our case):</p><p>Than create a new object type named Photo.</p><p>We also need a way to store the picture itself. Please enter the &ldquo;Metafields Template&rdquo; tab and add &ldquo;Image/File&rdquo; type metafield with key <code>image</code>. This metafield will store the image. We don&rsquo;t need anything more,
so just set the name and save object type. After save you&rsquo;ll be redirected to &lsquo;New Photo&rsquo; page. Create some photos using this page and save them - we&#39;ll use them as test data.</p><p><a href="https://github.com/cosmicjs/vuejs-photo-gallery/blob/master/article/img2.png" target="_blank"><img src="https://github.com/cosmicjs/vuejs-photo-gallery/raw/master/article/img2.png" alt="" class="fr-fic fr-dii"></a></p><p>The only thing left is to set site-wide things, such as title, tagline, social icons and footer text. Let&#39;s create one more object type named Global. And add the following metafields:</p><ul><li>Tagline - Plain Text Area</li><li>Twitter - Plain Text Input</li><li>Instagram - Plain Text Input</li><li>Github - Plain Text Input</li><li>Email - Plain Text Input</li><li>Footer - Plain Text Area</li></ul><h2>VueJS environments</h2><p>We want to pick our bucket name automatically on deploy. In this case we&#39;ll need configuration file, which we&#39;ll populate with correct data during deploy. Create <code>src/config.js</code> to match the following:</p><pre class="prism">Config = {
    bucket: &#39;vuejs-photo-gallery&#39;
};

module.exports = Config;</pre><h2>Prepare assets</h2><p>Download the template ZIP and unzip it somewhere. In our case we have the following content:</p><p><code>index.html</code> - this is our HTML markup, we&#39;ll move it to Vue components later. <code>images</code> - this is sample images folder. We don&#39;t need it, our images will be served from Cosmic servers <code>assets</code> - other assets such as CSS, fonts, javascript files. We&#39;ll need CSS and fonts. Let&#39;s ignore Javascript for now, since we&#39;re planning to use VueJS. Let&#39;s copy <code>assets/css</code> and <code>assets/fonts</code> folders to <code>static</code> folder inside our project. This will allow us to add these files to the build automatically as static assets.</p><h2>Prepare index.html</h2><p>Now it&#39;s time to include our assets to <code>index.html</code>. Add the following to the <code>head</code> section:</p><pre class="prism">&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot; /&gt;
&lt;!--[if lte IE 8]&gt;&lt;script src=&quot;assets/js/ie/html5shiv.js&quot;&gt;&lt;/script&gt;&lt;![endif]--&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;static/css/main.css&quot; /&gt;
&lt;!--[if lte IE 8]&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;assets/css/ie8.css&quot; /&gt;&lt;![endif]--&gt;
&lt;!--[if lte IE 9]&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;assets/css/ie9.css&quot; /&gt;&lt;![endif]--&gt;
&lt;noscript&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;static/css/noscript.css&quot; /&gt;&lt;/noscript&gt;</pre><p>This will include our static assets. Once we&#39;ll implement correct markup, appearance will be automatically set via CSS.</p><h2>VueJS components</h2><p>Looking into our page, we can define components we&#39;ll need:</p><p><code>Header</code> and <code>Footer</code> - for this will be very simple components, which will display global data which will be loaded on app startup <code>Thumbs</code> - this component will display photos thumbnails <code>Viwer</code> - this component will display the big photo and provide prev/next navigation. Please note - we&#39;re creating component&#39;s templates markup using template we downloaded before (doing copy-paste from index.html and applying VueJS directives).</p><p><code>Header</code> component:</p><pre class="prism">&lt;template&gt;
    &lt;header id=&quot;header&quot;&gt;
        &lt;h1&gt;{{ header }}&lt;/h1&gt;
        &lt;div v-html=&quot;text&quot;&gt;&lt;/div&gt;
        &lt;ul class=&quot;icons&quot;&gt;
            &lt;li&gt;&lt;a :href=&quot;twitter&quot; class=&quot;icon fa-twitter&quot;&gt;&lt;span class=&quot;label&quot;&gt;Twitter&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a :href=&quot;instagram&quot; class=&quot;icon fa-instagram&quot;&gt;&lt;span class=&quot;label&quot;&gt;Instagram&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a :href=&quot;github&quot; class=&quot;icon fa-github&quot;&gt;&lt;span class=&quot;label&quot;&gt;Github&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a :href=&quot;email&quot; class=&quot;icon fa-envelope-o&quot;&gt;&lt;span class=&quot;label&quot;&gt;Email&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/header&gt;
&lt;/template&gt;

&lt;script&gt;
import {EventBus} from &#39;../event_bus&#39;;

export default {
    name: &#39;app-header&#39;,
    created() {
        EventBus.$on(&#39;global_loaded&#39;, (obj) =&gt; {
            this.header = obj.title;
            this.text = obj.metafield.tagline.value;
            this.twitter = obj.metafield.twitter.value;
            this.instagram = obj.metafield.instagram.value;
            this.github = obj.metafield.github.value;
            this.email = &#39;mailto:&#39; + obj.metafield.email.value;
        });
    },
    data () {
        return {
            text: null,
            twitter: &#39;&#39;,
            instagram: &#39;&#39;,
            github: &#39;&#39;,
            email: &#39;&#39;,
            header: &#39;&#39;
        }
    }
}
&lt;/script&gt;</pre><p><code>Footer</code> component is very similar:</p><pre class="prism">&lt;template&gt;
    &lt;footer id=&quot;footer&quot;&gt;
        &lt;div v-html=&quot;text&quot;&gt;&lt;/div&gt;
    &lt;/footer&gt;
&lt;/template&gt;

&lt;script&gt;
import {EventBus} from &#39;../event_bus&#39;;

export default {
    name: &#39;app-footer&#39;,
    created() {
        EventBus.$on(&#39;global_loaded&#39;, (obj) =&gt; {
            this.text = obj.metafield.footer.value;
        });
    },
    data () {
        return {
            text: null
        }
    }
}
&lt;/script&gt;</pre><p>Both components uses <code>EventBus</code> to receive data from parent component. I&#39;ll tell about the Event bus later in this post.</p><h2>Thumbs component</h2><p>This component is more complicated than previous two:</p><pre class="prism">&lt;template&gt;
    &lt;section id=&quot;thumbnails&quot;&gt;
        &lt;article v-for=&quot;(item, index) in items&quot; v-bind:class=&quot;{ &#39;active&#39;: activeIndex == index }&quot;&gt;
            &lt;a class=&quot;thumbnail&quot; v-on:click=&quot;selectImage(item, index)&quot;&gt;
                &lt;img v-bind:src=&quot;item.metafield.image.imgix_url&quot; alt=&quot;&quot; /&gt;
            &lt;/a&gt;
            &lt;h2&gt;{{ item.title }}&lt;/h2&gt;
            &lt;div v-html=&quot;item.content&quot;&gt;&lt;/div&gt;
        &lt;/article&gt;
    &lt;/section&gt;
&lt;/template&gt;

&lt;script&gt;
import Cosmic from &#39;cosmicjs&#39;;
import * as Config from &#39;../config&#39;;
import {EventBus} from &#39;../event_bus&#39;;

const bucket = { slug: Config.bucket };

export default {
    name: &#39;thumbs&#39;,
    props: [&#39;bus&#39;],
    created() {
        Cosmic.getObjectType({ bucket }, { type_slug: &#39;photos&#39; }, (err, res) =&gt; {
            this.items = res.objects.all;
            EventBus.$emit(&#39;loaded&#39;, this.items[0]);
        });
        EventBus.$on(&#39;move&#39;, (dir) =&gt; {
            this.activeIndex = this.activeIndex + dir;
            if (dir &gt; 0 &amp;&amp; this.activeIndex &gt;= this.items.length) {
                this.activeIndex = 0;
            }
            if (dir &lt; 0 &amp;&amp; this.activeIndex &lt; 0) {
                this.activeIndex = this.items.length - 1;
            }
            EventBus.$emit(&#39;loaded&#39;, this.items[this.activeIndex]);
        });
    },
    data () {
        return {
            items: [],
            activeIndex: 0
        }
    },
    methods: {
        selectImage (itm, index) {
            EventBus.$emit(&#39;loaded&#39;, itm);
            this.activeIndex = index;
        }
    }
}
&lt;/script&gt;</pre><p>On component creation we&#39;re fetching our photos list and subscribes to Event bus &#39;move&#39; event. Than we just render these photos and emit a new event each time when user selects a new photo.</p><h2>Viewer component</h2><pre class="prism">&lt;template&gt;
    &lt;div id=&quot;viewer&quot;&gt;
        &lt;div class=&quot;inner&quot;&gt;
            &lt;div class=&quot;nav-next&quot; v-on:click=&quot;selectNext()&quot;&gt;&lt;/div&gt;
            &lt;div class=&quot;nav-previous&quot; v-on:click=&quot;selectPrev()&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;slide active&quot; v-if=&quot;img&quot;&gt;
            &lt;div class=&quot;caption&quot;&gt;
                &lt;h2&gt;{{ img.title }}&lt;/h2&gt;
                &lt;div v-html=&quot;img.content&quot;&gt;&lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;image&quot; v-bind:style=&#39;{ backgroundImage: &quot;url(&quot; + img.metafield.image.imgix_url + &quot;)&quot; }&#39;&gt;
            &lt;/div&gt;
        &lt;/div&gt; 
    &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
import {EventBus} from &#39;../event_bus&#39;;

export default {
    name: &#39;viewer&#39;,
    props: [&#39;bus&#39;],
    created() {
        EventBus.$on(&#39;loaded&#39;, (obj) =&gt; {
            this.img = obj;
        });
    },
    data () {
        return {
            img: null
        }
    },
    methods: {
        selectNext() {
            EventBus.$emit(&#39;move&#39;, 1);
        },
        selectPrev() {
            EventBus.$emit(&#39;move&#39;, -1);
        }
    }
}
&lt;/script&gt;</pre><p>This component subscribes to <code>loaded</code> event via Event bus. This event means that uses selected a new photo and we have to show it bigger size; Another task of this component is to notify Thumbs component when users click prev/next buttons. Component uses Event bus for this purpose also.</p><h2>Event bus</h2><p>Event bus follows publish-subscribe pattern and allows us setup communication between Thumbs and Viewer components. Both components are on the same level (no parent-child relationship), so we need something more complicated than simple event emission.
Event bus implementation is very easy (<code>src/event_bus.js</code>):</p><pre class="prism">import Vue from &#39;vue&#39;;
export const EventBus = new Vue();</pre><p>This event bus is used to fire events in one component (using <code>EventBus.$emit</code>) and subscribe on them in another component (using <code>EventBus.$on</code>).</p><h2>Concatenating everything together</h2><p>Now it&#39;s time to concat everything with <code>App</code> component:</p><pre class="prism">&lt;template&gt;
  &lt;div&gt;
    &lt;div id=&quot;main&quot;&gt;
      &lt;app-header&gt;&lt;/app-header&gt;
      &lt;thumbs&gt;&lt;/thumbs&gt;
      &lt;app-footer&gt;&lt;/app-footer&gt;
    &lt;/div&gt;
    &lt;viewer&gt;&lt;/viewer&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
import AppHeader from &#39;./components/AppHeader&#39;
import AppFooter from &#39;./components/AppFooter&#39;
import Thumbs from &#39;./components/Thumbs&#39;
import Viewer from &#39;./components/Viewer&#39;
import Vue from &#39;vue&#39;;
import Cosmic from &#39;cosmicjs&#39;;
import * as Config from &#39;./config&#39;;
import {EventBus} from &#39;./event_bus&#39;;

const bucket = { slug: Config.bucket };

export default {
  name: &#39;app&#39;,
  components: {
    AppFooter,
    AppHeader,
    Thumbs,
    Viewer
  },
  created() {
    Cosmic.getObjectType({ bucket }, { type_slug: &#39;globals&#39; }, (err, res) =&gt; {
      EventBus.$emit(&#39;global_loaded&#39;, res.objects.all[0]);
      console.log(res.objects.all[0]);
    });
  },
}
&lt;/script&gt;</pre><p>This component loads globals data on creation and notify <code>AppHeader</code> and <code>AppFooter</code> components via <code>EventBus</code>.</p><h2>Deploy to Cosmic servers</h2><p>Cosmic has some requirements for deploying apps:</p><ul><li>it must be in public git repo</li><li><a href="https://devcenter.heroku.com/">Specific requirements</a> depending on your platform must be met</li></ul><p>In our case we actually have HTML5 app, so we&#39;ll need some additional software.</p><h2>Prepare config</h2><p>Create a <code>prepare.js</code> file in your project directory:</p><pre class="prism">var fs = require(&#39;fs&#39;);

var str = `
    Config = {
        bucket: &#39;${process.env.COSMIC_BUCKET}&#39;
    };

    module.exports = Config;
`;
fs.writeFile(&quot;./src/config.js&quot;, str, function(err) {
    if(err) {
        return console.log(err);
    }
    console.log(&quot;The file was saved!&quot;);
});</pre><p>This script will rewrite application config file (see more info above) file to use your Cosmic bucket write key and bucket name.</p><h2>Modify package.json</h2><p>VueJS CLI adds some packaged on <code>package.json</code> as <code>devDependencies</code>. We have to move them all into <code>dependencies</code> to make our scripts work in Cosmic servers.</p><h2>Prepare software</h2><p>We&#39;ll also need something to serve our Angular app. We&#39;ll use Express framework:</p><pre class="prism">npm install --save express</pre><p>Add the following to your package.json:</p><pre class="prism">{
  ...
  &quot;scripts&quot;: {
    ...
    &quot;start&quot;: &quot;node app.js&quot;
  },
  ...
}</pre><p>The main point is to have <code>start</code> command defined in the <code>scripts</code> section (you can safely replace default angular <code>start</code> command). This is the command which will be run to start our app. So now we have the only thing left - create the <code>app.js</code> file:</p><pre class="prism">const express = require(&#39;express&#39;)
const app = express()

app.use(express.static(&#39;./dist&#39;));

app.listen(process.env.PORT, function () {
});</pre><p>This is a simple Express app which serves <code>dist</code> dir as dir of static files. Please take note - app listens on port specified via <code>PORT</code> environment variable, it&#39;s important to run apps on Cosmic App Server.</p><h2>Build VueJS app for production</h2><p>We&#39;ll use <code>app.json</code> to do this (dokku <code>predeploy</code> section):</p><pre class="prism">{
    &quot;scripts&quot;: {
        &quot;dokku&quot;: {
            &quot;predeploy&quot;: &quot;node prepare.js &amp;&amp; npm run build&quot;
        }
    }
}</pre><p>This script will be executed before we&#39;ll launch our express app to build the VueJS app for production.</p><h2>Run it!</h2><p>Now you can enter &#39;Deploy Web App&#39; page in your Cosmic Dashboard.</p><p><a href="https://github.com/cosmicjs/vuejs-photo-gallery/blob/master/article/img-deploy.png" target="_blank"><img src="https://github.com/cosmicjs/vuejs-photo-gallery/raw/master/article/img-deploy.png" alt="" class="fr-fic fr-dii"></a></p><p>Simply enter your repo URL and click &#39;Deploy to Web&#39; - deploy process will be started and app become ready in a couple of minutes.</p><h2>Conclusion</h2><p>Using Cosmic App Server allows quickly deploy the application to hosting using a git repo and don&#39;t worry about server configuration and software installation - everything will be done by Cosmic servers.</p>

How to Build a Vue.js Photo Gallery

<p style="text-align: center;"><img src="https://cosmicjs.imgix.net/965f5250-624e-11e7-9d28-7b65c66a2644-angular-image-feed.jpg" style="width: 100%;" class="fr-fic fr-dib"></p><p>In this tutorial I&rsquo;m going to show you how to build a user-driven photo gallery, powered by Angular, hosted on the Cosmic App Server.</p><h2>TL;DR</h2><p><a href="https://www.cosmicjs.com/apps/angular-js-image-feed/demo">View Demo</a><br><a href="https://github.com/cosmicjs/angular-image-feed" rel="noopener noreferrer" target="_blank">View the full source code on GitHub</a><br><a href="https://www.cosmicjs.com/apps/angular-js-image-feed">Install the App and deploy to the Cosmic App Server</a></p><h1>Prerequisites</h1><p>You&rsquo;ll need the node JS, npm and Angular cli pre-installed. Make sure you already have them before you start. Please refer to <a href="https://angular.io/guide/quickstart">Angular docs</a> on how to do this.</p><h1>Getting Started</h1><p>First of all we&rsquo;ll need to create the Angular project. We&rsquo;ll use ng cli to do it. So once you&rsquo;ll have all prerequisites installed, you&rsquo;ll need to setup the new Angular project:</p><pre class="prism">ng new cosmic-angular</pre><p>After you&rsquo;ll setup this project you&rsquo;ll be able to run</p><pre class="prism">cd cosmic-angular
ng serve --open</pre><p>And play with your app in browser</p><h1>Doing everything using the existing git repo</h1><p>First of all, you have to be sure you have node &gt; 6.x installed, than run the following commands:</p><pre class="prism">npm install -g @angular/cli
git clone https://github.com/cosmicjs/angular-image-feed
cd cosmic-angular
npm install
ng serve --open</pre><p>The most recent ng cli version at the article creation moment was 1.1.3. Browser window will open automatically once you&#39;ll run the last command</p><h1>Setting up Cosmic library</h1><p>First of all, install the Cosmic npm module for Angular/JavaScript applications:</p><pre class="prism">npm install cosmicjs --save</pre><p>Now you should be able to import Cosmic object and perform Cosmic API calls like following:</p><pre class="prism">import Cosmic from &#39;cosmicjs&#39;;
const bucket = { slug: &#39;your-bucket-slug&#39; };

Cosmic.getObjects({ bucket }, (err, res) =&gt; {
  console.log(res.objects);
});</pre><h1>Setting up things with Cosmic</h1><p>Create the bucket and remember the bucket name (<code>&lsquo;cosmic-angular&rsquo;</code> in our case):</p><p>Than create a new object type named Photo and please remember the object type slug (photos&rsquo;).</p><p>We also need a way to store the picture itself. Please enter the &ldquo;Metafields Template&rdquo; tab and add &ldquo;Image/File&rdquo; type Metafield with key <code>&#39;photo&#39;</code>. This Metafield will store the image. We don&rsquo;t need anything
more, so just set the name and save Object Type. After save you&rsquo;ll be redirected to &lsquo;New Photo&rsquo; page. Create some photos using this page and save them - we&#39;ll use them as test data.</p><p>You&#39;ll also need to create the Bucket write key. It&#39;s necessary to allow users upload pictures and create photo Objects. Open Settings page and click &#39;Generate new key&#39; on API Write Access Key than copy generated key and save the changes.</p><p><a href="https://github.com/cosmicjs/angular-image-feed/blob/master/img2.png" target="_blank"><img src="https://github.com/cosmicjs/angular-image-feed/raw/master/img2.png" alt="" class="fr-fic fr-dii"></a></p><h1>Angular environments</h1><p>Edit the <code>src/environments/environment.ts</code> to match the following:</p><pre class="prism">export const environment = {
  production: false,
  write_key: &#39;YOURWRITEKEY&#39;,
  bucket_name: &#39;YOURBUCKETNAME&#39;,
  photos_type: &#39;photos&#39;
};</pre><h1>Configuration service for Angular</h1><p>We&#39;re planning to use Cosmic Objects in more than one Angular component. In such case makes sense to create a dedicated configuration service and store all Cosmic related things such as bucket name, write key, etc in a single place. Let&#39;s create <code>src/services/cosmic_config.ts</code> with the following contents:</p><pre class="prism">import {Injectable} from &#39;@angular/core&#39;;

@Injectable()
export class CosmicConfigService {
    private write_key;
    private bucket_name;
    private photos_type;

    constructor() {
        this.photos_type = environment.photos_type;
        this.write_key = environment.write_key;
        this.bucket_name = environment.bucket_name
    }

    public getReadCfg(): any {
        return {
            bucket: {
                slug: this.bucket_name
            }
        };
    }

    public getWriteCfg(): any {
        return {
            bucket: {
                slug: this.bucket_name,
                write_key: this.write_key
            }
        };
    }

    public buildPhotoUploadObj(title, file): any {
        return {
            write_key: this.write_key,
            type_slug: this.photos_type,
            title: title,
            metafields: [{
                key: &#39;picture&#39;,
                type: &#39;file&#39;,
                value: file
            }]
        };
    }

    getPhotoSlug() {
        return this.photos_type;
    }
}</pre><p>This service has a few methods:</p><ul><li><code>getReadCfg</code> - returns config object for reading data</li><li><code>getWriteCfg</code> - return config object for writing data (with write_key specified)</li><li><code>buildPhotoUploadObj</code> - builds object to create photo using file name and title</li><li><code>getPhotoSlug</code> - returns object type slug for photos</li></ul><p>We&#39;ll call these methods from our Angular components.</p><h1>View the gallery - Angular part</h1><p>Create <code>src/components/picture/picture.ts</code> file with the following content:</p><pre class="prism">import { Component, Input } from &#39;@angular/core&#39;;

@Component({
    selector: &#39;picture&#39;,
    templateUrl: &#39;./picture.html&#39;
})
export class Picture {
    @Input() picture: any;

    constructor() {
    }
}</pre><p>Than create a template for Picture component:</p><pre class="prism">&lt;div class=&quot;ui card picture-item&quot;&gt;
  &lt;div class=&quot;image&quot;&gt;
    &lt;img class=&quot;ui fluid image&quot; [src]=&quot;picture.metafield.picture.url&quot; alt=&quot;{{ picture.title }}&quot;&gt;
  &lt;/div&gt;
  &lt;div class=&quot;content&quot;&gt;
    &lt;div class=&quot;description&quot;&gt;{{ picture.title }}&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre><p>We&#39;ll use this component to display a single gallery picture item.</p><p>Now create <code>src/components/picture_upload/picture_upload.ts</code> file with the following content:</p><pre class="prism">import { Component, Input, Output, EventEmitter } from &#39;@angular/core&#39;;
import Cosmic from &#39;cosmicjs&#39;;
import { CosmicConfigService } from &#39;../../services/cosmic_config&#39;;

@Component({
    selector: &#39;picture-upload&#39;,
    templateUrl: &#39;./picture_upload.html&#39;
})
export class PictureUpload {
    private fl;
    private title;
    public uploading;
    @Output() onUpload = new EventEmitter&lt;any&gt;();

    constructor(
        private cosmicConfig: CosmicConfigService
    ) {
        this.uploading = false;
        this.fl = null;
        this.title = &quot;&quot;;
    }

    onFileChange(ev) {
        if (ev.target.files &amp;&amp; ev.target.files.length) {
            this.fl = ev.target.files[0];
        }
    }

    upload() {
        this.uploading = true;
        Cosmic.addMedia(this.cosmicConfig.getWriteCfg(), {
            media: this.fl,
            folder: this.fl.name
        }, (error, response) =&gt; {
            Cosmic.addObject(this.cosmicConfig.getWriteCfg(),
                this.cosmicConfig.buildPhotoUploadObj(this.title, response.body.media.name),
            (error, response) =&gt; {
                this.title = &#39;&#39;;
                this.fl = null;
                this.uploading = false;
                this.onUpload.emit({});
            });
        });
    }
}</pre><p>Than add the following template:</p><pre class="prism">&lt;div class=&quot;picture-upload&quot;&gt;
    &lt;div class=&quot;ui form&quot; [ngClass]=&quot;{ &#39;active dimmer&#39;: uploading }&quot;&gt;
        &lt;div class=&quot;ui grid&quot; *ngIf=&quot;!uploading&quot;&gt;
            &lt;div class=&quot;five wide column&quot;&gt;
                &lt;div class=&quot;field&quot;&gt;
                    &lt;input type=&quot;text&quot; placeholder=&quot;Title...&quot; (input)=&quot;title = $event.target.value&quot; [value]=&quot;title&quot;/&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;six wide column&quot;&gt;
                &lt;div class=&quot;field&quot;&gt;
                    &lt;input type=&quot;file&quot; (change)=&quot;onFileChange($event)&quot;/&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;five wide column&quot;&gt;
                &lt;button class=&quot;ui primary button fluid&quot; (click)=&quot;upload()&quot;&gt;Upload photo&lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div *ngIf=&quot;uploading&quot; class=&quot;ui text loader&quot;&gt;Upload is in progress&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</pre><p>Add <code>Picture</code> and <code>PictureUpload</code> components to app.module.ts as it&rsquo;s done with other components like AppComponent. This will allow us to use it in our app.</p><h2>What happens here?</h2><p>Our <code>Picture</code> component doesn&#39;t perform anything interesting - it just displays object properties. However <code>PuctureUpload</code> component doing much more interesting thing. It creates a record on Cosmic servers, but this record has an image attached, so this makes the whole process more complicated:</p><ul><li>upload the image to Cosmic servers (using <code>addMedia</code> method)</li><li>obtain uploaded image name</li><li>create the new Cosmic object (using <code>addObject</code> method) passing it obtained image name</li><li>fire an event to notify parent component about finished upload</li></ul><h1>Concatenating everything together</h1><p>Now we need to modify our <code>AppComponent</code> to use these newly created components. Modify <code>src/app/app.component.ts</code> to look like the following:</p><pre class="prism">import { Component } from &#39;@angular/core&#39;;
import Cosmic from &#39;cosmicjs&#39;;
import {CosmicConfigService} from &#39;../services/cosmic_config&#39;;

@Component({
  selector: &#39;app-root&#39;,
  templateUrl: &#39;./app.component.html&#39;,
  styleUrls: [&#39;./app.component.css&#39;]
})
export class AppComponent {
  public items = [];
  page = 0;
  page_size = 2;
  scrollEnabled = true;

  constructor(
    public cosmicCfg: CosmicConfigService
  ) {
    this.reload();
  }

  reload() {
    this.items = [];
    this.page = 0;
    this.scrollEnabled = true;
    let params = {
      type_slug: this.cosmicCfg.getPhotoSlug(),
      limit: this.page_size,
      skip: 0
    };
    Cosmic.getObjectType(this.cosmicCfg.getReadCfg(), params, (err, res) =&gt; {
      this.items = res.objects.all;
    });
  }

  onUpload() {
    this.reload();
  }

  onScroll() {
    if (!this.scrollEnabled) {
      return;
    }
    this.page++;
    let params = {
      type_slug: this.cosmicCfg.getPhotoSlug(),
      limit: this.page_size,
      skip: this.page * this.page_size
    };
    Cosmic.getObjectType(this.cosmicCfg.getReadCfg(), params, (err, res) =&gt; {
      if (res.objects &amp;&amp; res.objects.all) {
        res.objects.all.forEach((itm) =&gt; {
          this.items.push(itm);
        });
      }
      else {
        this.scrollEnabled = false;
      }
    });
  }
}</pre><p>And make its template like following:</p><pre class="prism">&lt;div infiniteScroll [infiniteScrollDistance]=&quot;1&quot; [infiniteScrollThrottle]=&quot;300&quot; (scrolled)=&quot;onScroll()&quot;&gt;
    &lt;picture-upload (onUpload)=&quot;onUpload()&quot;&gt;&lt;/picture-upload&gt;
&lt;picture *ngFor=&quot;let item of items&quot; [picture]=&quot;item&quot;&gt;&lt;/picture&gt;
&lt;/div&gt;</pre><p>We&#39;re planning to have the infinite-scrollable gallery (and you can already see it&#39;s directives in code). This means we have to install the right library:</p><pre class="prism">npm install --save ngx-infinite-scroll</pre><h2>What&rsquo;s happening here?</h2><ul><li>until we got empty response, we&#39;re assuming there are more photos on server</li><li>we&#39;re fetching photos in bulks of 2 (<code>page_size</code> property)</li><li>we&#39;re fetching only &#39;photo&#39; type objects (this is useful in case if we have more object types)</li><li>once we got empty response, we&#39;re setting the flag and stopping try to fetch more photos</li><li>once we&#39;re getting an event from <code>PhotoUpload</code> component, we&#39;re resetting the whole list.</li></ul><h1>Deploy to Cosmic servers</h1><p>Cosmic has some requirements for deploying apps:</p><ul><li>it must be in public git repo, or you need to <a href="https://www.cosmicjs.com/integrations">connect your GitHub account</a> for private repo deployment</li><li><a href="https://devcenter.heroku.com/">Specific requirements</a> depending on your platform must be met</li></ul><p>In our case we actually have HTML5 app, so we&#39;ll need some additional software.</p><h2>Prepare config</h2><p>Create a <code>prepare.js</code> file in your project directory:</p><pre class="prism">var fs = require(&#39;fs&#39;);

var str = `
    export const environment = {
        production: true,
        write_key: &#39;${process.env.COSMIC_WRITE_KEY}&#39;,
        bucket_name: &#39;${process.env.COSMIC_BUCKET}&#39;,
        photos_type: &#39;photos&#39;
    };
`;
fs.writeFile(&quot;./src/environments/environment.prod.ts&quot;, str, function(err) {
    if(err) {
        return console.log(err);
    }
    console.log(&quot;The file was saved!&quot;);
}); </pre><p>This script will rewrite default Angular production settings file to use your Cosmic bucket write key and bucket name.</p><h2>Modify package.json</h2><p>Angular cli adds some packaged on <code>package.json</code> as <code>devDependencies</code>. We have to move them in <code>dependencies</code> to make our scripts work:</p><pre class="prism">...
&quot;dependencies&quot;: {
    &quot;@angular/cli&quot;: &quot;^1.1.3&quot;,
    &quot;@angular/compiler-cli&quot;: &quot;^4.0.0&quot;,
    ...
},
...</pre><h2>Prepare software</h2><p>We&#39;ll also need something to serve our Angular app. We&#39;ll use Express framework:</p><pre class="prism">npm install --save express</pre><p>Add the following to your package.json:</p><pre class="prism">{
  ...
  &quot;scripts&quot;: {
    ...
    &quot;start&quot;: &quot;node app.js&quot;
  },
  ...
  &quot;engines&quot;: {
    &quot;node&quot;: &quot;6.9.4&quot;,
    &quot;npm&quot;: &quot;4.2.0&quot;
  }
  ...
}</pre><p>The main point is to have <code>start</code> command defined in the <code>scripts</code> section (you can safely replace default angular <code>start</code> command). This is the command which will be run to start our app. So now we have the only thing left - create the <code>app.js</code> file:</p><pre class="prism">const express = require(&#39;express&#39;)
const app = express()

app.use(express.static(&#39;./dist&#39;));

app.listen(process.env.PORT, function () {
});</pre><p>This is a simple Express app which serves <code>dist</code> dir as dir of static files. Please take note - app listens on port specified via <code>PORT</code> environment variable, it&#39;s important to run apps on Cosmic App Server.</p><h2>Build Angular app for production</h2><p>We&#39;ll use <code>app.json</code> to do this (dokku <code>predeploy</code> section):</p><pre class="prism">{
    &quot;scripts&quot;: {
        &quot;dokku&quot;: {
            &quot;predeploy&quot;: &quot;node prepare.js &amp;&amp; ng build --aot --prod&quot;
        }
    }
}</pre><p>This script will be executed before we&#39;ll launch our express app to build the Angular app for production.</p><h2>Run it!</h2><p>Now you can enter &#39;Deploy Web App&#39; page in your Cosmic Dashboard.</p><p><a href="https://github.com/cosmicjs/angular-image-feed/blob/master/img-deploy.png" target="_blank"><img src="https://github.com/cosmicjs/angular-image-feed/raw/master/img-deploy.png" alt="" class="fr-fic fr-dii"></a></p><p>Simply enter your repo URL and click &#39;Deploy to Web&#39; - deploy process will be started and app become ready in a couple of minutes.</p><h1>Conclusion</h1><p>Using the Cosmic App Server allows us to quickly deploy the application to hosting using a git repo and you don&#39;t worry about server configuration and software installation - everything will be done by Cosmic servers.</p>

Blogs by Ivan Larionov

Start building today

Blogs by Ivan Larionov

.css-9vqfqm{display:inline-block;white-space:pre;}.css-sanqhm{opacity:0;}Start building today

Start building today