<p><a href="https://cosmicjs.com/" rel="noopener noreferrer" target="_blank">Cosmic</a> allows you to easily create nested Object structures and upload media files. In this tutorial we will learn how nested structures are built and how you can fetch this data from the <a href="https://cosmicjs.github.io/rest-api-docs/">Cosmic API</a> to use in a simple, personal music website powered by Cosmic and Nuxt.js.&nbsp;</p><h3>TL;DR:</h3><p><a href="https://cosmicjs.com/apps/vue-music-website" rel="noopener noreferrer" target="_blank">Personal Music Site Demo</a><br><a href="https://github.com/cosmicjs/vue-music-website" rel="noopener noreferrer" target="_blank">Personal Music Site Codebase</a></p><h3>Intro</h3><p>As there are already numerous articles where you can learn how to work with the Cosmic Dashboard, we will use an already prepared Bucket snapshot.</p><h3>Create a Bucket</h3><p>At first, you will need to create a fresh Bucket as the next step <strong>will remove all data from it</strong>.</p><p>Download base <a href="https://raw.githubusercontent.com/zezic/cosmicjs-music-site/master/bucket.json" rel="noopener noreferrer" target="_blank">bucket.json</a> which contain Bucket Objects template description as well as some demo data for our app. To import it to your Bucket simply follow your Bucket dashboard page and navigate to <em>Settings &gt; Import / Export</em> section; you will see the <em>Add import file</em> button - click it and select <em>bucket.json</em> file you downloaded before.</p><p>Now your Bucket with freshly imported Object templates allow you to build Objects into next structures:</p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/71ee3740-9738-11e8-8c41-ef0b20cd7aaa-structure.png" style="width: 690px;" class="fr-fic fr-dib"></p><p>In Cosmic when you need to nest/link Objects into another Object you use the Multiple Objects Relationship metafield. Then, when you fetch the <em>root</em> Object you will get all items related to it by Metafield objects. In next paragraph you will see how to deploy an app that accesses such structures with just one Cosmic API request.</p><h3>Deploy the application</h3><p>To deploy an actual app follow next steps:</p><p><strong>1) Clone the repository to your machine and go to freshly created folder</strong></p><p><br></p><div class="fr-embedly                  " data-original-embed="<a href='https://gist.github.com/zezic/98f5328fdeb4df04e64ce1f8ccd8f4b4' class='embedly-card'></a>"><a href="https://gist.github.com/zezic/98f5328fdeb4df04e64ce1f8ccd8f4b4" class="embedly-card"></a></div><p><strong>2) Install app dependencies</strong></p><div class="fr-embedly                " data-original-embed="<a href='https://gist.github.com/zezic/556378cb7edfb03f902bafcf852a2941' class='embedly-card'></a>"><a href="https://gist.github.com/zezic/556378cb7edfb03f902bafcf852a2941" class="embedly-card"></a></div><p><strong>3) Configure your local app instance</strong></p><p>Actually, the way Cosmic hosted apps are configured is by reading environment variables, but this time to be more clear with our local deployment we just edit file called <strong>instance.config.js</strong>. To be able to run the app against your own
Cosmic Bucket you will need to change next 3 attributes in this file:</p><ul><li><strong>slug</strong></li><li><strong>read_key</strong></li><li><strong>write_key</strong></li></ul><p>To obtain this settings go to your Bucket dashboard and navigate to <em>Settings &gt; Basic Settings</em>. There you will see fields called:</p><ul><li><strong>Bucket slug</strong></li><li><strong>API Read Access Key</strong></li><li><strong>API Write Access Key</strong></li></ul><p>Copy values from those fields to your <strong>instance.config.js</strong> and save it. After that it should look like that:</p><div class="fr-embedly            " data-original-embed="<a href='https://gist.github.com/zezic/ebc8b808f73b5757a62862b31c622bfe' class='embedly-card'></a>"><a href="https://gist.github.com/zezic/ebc8b808f73b5757a62862b31c622bfe" class="embedly-card"></a></div><p><strong>4) Run the app</strong></p><div class="fr-embedly           " data-original-embed="<a href='https://gist.github.com/zezic/dffe20bf427e97fd97ae6f07da4a735a' class='embedly-card'></a>"><a href="https://gist.github.com/zezic/dffe20bf427e97fd97ae6f07da4a735a" class="embedly-card"></a></div><p>After the app builds you will see the message saying that the server is started at its address and port. Navigate to this address with your web browser. You should see the app homepage with demo data loaded from your Bucket:</p><p><br></p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/dcd8ffb0-9740-11e8-a892-552b20b02690-screenshot.png" style="width: 690px;" class="fr-fic fr-dib"></p><p><br></p><h3>Learn how data is fetched</h3><p>Fetching data from Cosmic to your JS app is pretty simple when you get used to JavaScript as an asynchronous language itself. In this particular app example we use a small factory that produces a promise which later resolves to the Bucket instance that allows us to fetch Objects from it. In <a href="https://github.com/zezic/cosmicjs-music-site/blob/master/lib/cosmic.js" rel="noopener noreferrer" target="_blank">this file</a> you can see how it&#39;s done:</p><div class="fr-embedly         " data-original-embed="<a href='https://gist.github.com/zezic/83bc3eb110147416e640b1d9980c7992' class='embedly-card'></a>"><a href="https://gist.github.com/zezic/83bc3eb110147416e640b1d9980c7992" class="embedly-card"></a></div><p>You can notice how Bucket initialization requires parameters that we set up prior in the configuration file.</p><p>Then you can see how Bucket access is actually used in the app&#39;s state management. Here is the simplified view of <a href="https://github.com/zezic/cosmicjs-music-site/blob/master/store/index.js" rel="noopener noreferrer" target="_blank">index Vuex file</a>:</p><div class="fr-embedly         " data-original-embed="<a href='https://gist.github.com/zezic/f5fd017df87029ae629978cc29fcf0f4' class='embedly-card'></a>"><a href="https://gist.github.com/zezic/f5fd017df87029ae629978cc29fcf0f4" class="embedly-card"></a></div><p>Here we <span style="color: rgb(226, 80, 65);">await</span>ing when promise with Bucket resolves. Then we call <strong><span style="color: rgb(85, 57, 130);">getObjects</span></strong> with type of &#39;authors&#39;, quantity limited to 1 and disabled metafields explanation. Then if the response is returned with non empty status, we pick the first-received Object and store it to our state. That&#39;s it!</p><p>If you want to look at received data more closely, you can install <a href="https://github.com/vuejs/vue-devtools" rel="noopener noreferrer" target="_blank">vue-devtools</a>, then run app in development mode by <strong>&quot;npm run dev&quot;</strong> command and inspect Vuex state via vue-devtools in your browser. You will see that received data tree contains not only Author object, but also related Albums and Tracks.</p><h3>What about pushing data to Cosmic?</h3><p>You also can not only &quot;read&quot; Objects from your Bucket, but also write (create) them into it. To <span id="result_box" lang="en">involve</span> this type of operation our app allows users to post Comments regarding Albums. Look at <a href="https://github.com/zezic/cosmicjs-music-site/blob/master/components/CommentForm.vue#L50-L60" rel="noopener noreferrer" target="_blank">next piece of code in the context of comment form</a> and you will see that creating Objects with <span style="color: rgb(85, 57, 130);"><strong>addObject</strong></span> method is as simple as getting them by <strong><span style="color: rgb(85, 57, 130);">getObjects</span></strong> from Cosmic.</p><h3>Conclusion</h3><p>Cosmic allows you to create data structures based on Multiple Objects Relationships and then receive this data in your app by few lines of code.&nbsp;</p><p>If you have any comments or questions about building apps with Cosmic, <a href="https://twitter.com/cosmic_js" rel="noopener noreferrer" target="_blank">reach out to us on Twitter</a> and <a href="https://cosmicjs.com/community" rel="noopener noreferrer" target="_blank">join the conversation on Slack</a>.</p>

Blogs by Sergey Ukolov

Start building today