<p>In this tutorial I&#39;ll be showing you how I built a Vue.js app with Authentication using Cosmic and AWS Lambda prior to deploying to Netlify. Let&#39;s get started.</p><h3>TL;DR</h3><p><a href="https://cosmicjs.com/apps/vue-cosmic-auth" rel="noopener noreferrer" target="_blank">Demo Link</a><br><a href="https://github.com/cosmicjs/vue-authentication" rel="noopener noreferrer" target="_blank">View Code on Github</a></p><p><a href="https://app.netlify.com/start/deploy?repository=https://github.com/availit/v-cosmic-auth" rel="noopener noreferrer" target="_blank"><img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify" class="fr-fic fr-dii"></a></p><h3>Features</h3><ul><li>Netlify hosting (plus CDN, Prerendering, Minification, etc..)</li><li>Vuetify components for interface</li><li>AWS Lambda functions via Netlify</li><li>Cosmic for Database API</li><li>Password hashing using PBKDF2 with Salt</li><li>Email Verification using Nodemailer via SendinBlue</li></ul><h3>Needed Improvements</h3><ul><li>Password reset function</li><li>User avatar support</li></ul><h3>Prerequisites</h3><p>You will be required to have Node JS and npm before starting. Make sure you already have them installed. If not you can find them here: <a href="https://nodejs.org">https://nodejs.org</a></p><p>In order to deploy you will need a Netlify account.</p><p>Also for SMTP server to send email verification link I am using <a href="https://www.sendinblue.com/" rel="noopener noreferrer" target="_blank">SendInBlue</a> since they give you 300 free emails a day.</p><h3>Project Structure</h3><p><strong>Important things to note:</strong></p><p><strong>~/public/_redirects</strong><br>This file is important since it points all your traffic to the index.html file in order for vue-router to handle the requests. To learn more about Netlify redirects <a href="https://www.netlify.com/docs/redirects/" rel="noopener noreferrer" target="_blank">visit their docs</a>.</p><p><strong>~/cosmic.js</strong><br>This file is the main entry point for Cosmic node library that we will export in order to use through-out our lambda functions.</p><p><strong>~/functions</strong><br>The functions directory holds all of our lambda functions which will automatically get ran on AWS once we deploy to netlify. We&#39;ll be using these functions to handle our hashing and database logic required for Cosmic.</p><h3>Fork and Clone</h3><p>First we&#39;ll be forking the repository on GitHub. Afterwards open up command line or terminal and clone it to your project folder on your local machine with this command:</p><pre>git clone <a href="https://github.com/cosmicjs/vue-authentication">https://github.com/cosmicjs/vue-authentication</a></pre><p>Use BitBucket or Gitlab instead?</p><p>If you prefer to use a different git provider you can just clone the repository and upload it to your desired remote.</p><h3>Install</h3><p>In your command line cd into the project root directory that you just cloned and run npm install to download and install all the required dependencies.</p><h3>Integrate Cosmic Bucket</h3><p>In your Cosmic account create a new bucket and call it whatever you want.</p><p>Download this bucket.json file and go to Import / Export Data page in your Cosmic bucket&#39;s Settings, select and upload the downloaded file. This will import all the Object Types and placeholder data.</p><p>Next you&#39;ll need to modify the cosmic.js file within your project directory to connect to the bucket you just created.</p><p>Here&#39;s what you&#39;ll need:</p><ul><li>Bucket slug</li><li>API Read Access Key</li><li>API Write Access Key</li></ul><p><strong>~/cosmic.js</strong></p><div class="fr-embedly    " data-original-embed="<a href='https://gist.github.com/availit/a7473e371e32250831f2a103100524e0.js' class='embedly-card'></a>"><a href="https://gist.github.com/availit/a7473e371e32250831f2a103100524e0.js" class="embedly-card"></a></div><h3>Integrate SendInBlue SMTP</h3><p>In order for email verification to work you&#39;ll need an SMTP server. For the sake of simplicity for this tutorial I will be using <a href="https://www.sendinblue.com/" rel="noopener noreferrer" target="_blank">SendInBlue</a> since they provide you with 300 free emails and use the Nodemailer npm package to integrate with.</p><p>After you create an account go to your SMTP &amp; API settings to generate an SMTP key to use in the <strong>CreateNewUser.js</strong> Lambda function, you can find it under the &quot;SMTP&quot; tab.</p><p><img src="https://cdn.cosmicjs.com/778d8fb0-7e6a-11e9-aae8-5592095532f4-sendinblue-smtp-key.png" style="width: 100%;" class="fr-fic fr-dib"></p><p>Then enter in your email and SMTP password to the following transporter object.</p><p><strong>~/functions/CreateNewUser.js</strong></p><div class="fr-embedly    " data-original-embed="<a href='https://gist.github.com/availit/d18c18c74ab0e042976885bba4579be0.js' class='embedly-card'></a>"><a href="https://gist.github.com/availit/d18c18c74ab0e042976885bba4579be0.js" class="embedly-card"></a></div><h3>Running your app locally</h3><p>In order for the AWS Lambda functions to run locally properly you&#39;ll need to run the following command:</p><pre>npm run start:lambda</pre><p>This will spin up a local function server using the netlify-functions library.</p><p>Next, you&#39;ll need to make sure you have a .env file in your root project directory to change the VUE_APP_API_HOST variable to point to the lambda server you just started running. Otherwise your app won&#39;t work. Mine started on port 9000 by default.</p><pre>VUE_APP_API_HOST=http://localhost:9000/</pre><p>After that you may open another console and finally start the Vue JS application with this command:</p><pre>npm run serve</pre><p>In order to test the API locally you may need to run Chrome with CORS disabled, you can find out how to do that depending on your OS with this helpful list:</p><p><strong>Windows:</strong></p><pre>&quot;C:\Program Files (x86)\Google\Chrome\Application\chrome.exe&quot; --disable-web-security --disable-gpu --user-data-dir=~/chromeTemp</pre><p><strong>OSX:</strong></p><pre>open -n -a /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --args --user-data-dir=&quot;/tmp/chrome_dev_test&quot; --disable-web-security</pre><p><strong>Linux:</strong></p><pre>google-chrome --disable-web-security</pre><p>Now you can navigate to http://localhost:8080 to open the application.</p><h3>Deployment with Netlify</h3><p>Go to your Netlify dashboard and click &quot;<a href="https://app.netlify.com/start" rel="noopener noreferrer" target="_blank">New site from Git</a>&quot;. Choose your git provider (I use GitHub).</p><p>After you authenticate you can see your list of repositories. Select the one you created for this project you created earlier and set the build command to &quot;npm run build&quot; and &nbsp;the publish directory to &quot;dist&quot;.</p><p><img src="https://cdn.cosmicjs.com/67111010-7e6c-11e9-9362-5314c3434f02-build-settings.png" style="width: 100%;" class="fr-fic fr-dib"></p><p>Next, you&#39;ll need to make sure you have set the environment variables and have the VUE_APP_API_HOST variable to point to the new site you just created in Netlify. Otherwise your app will not work.</p><pre>VUE_APP_API_HOST=https://yourNewSite.netlify.com/</pre><p><br></p><p><img src="https://cdn.cosmicjs.com/6b0c0b70-7e6c-11e9-9362-5314c3434f02-Netlify-Evars.png" style="width: 100%;" class="fr-fic fr-dib"></p><p>Next you want to set your functions directory to use &quot;lambda&quot; which will be the compiled version of the <strong>/functions</strong> folder.<img src="https://cdn.cosmicjs.com/6fa71760-7e6c-11e9-9362-5314c3434f02-netlify-functions.png" style="width: 100%;" class="fr-fic fr-dib"></p><h3>Conclusion</h3><p>I built this app for open source under MIT license so feel free to upgrade it, hack it, or break it.</p><p>This was built using Cosmic for the user database.. and the password-hash-and-salt library for hashing. Oh, and don&#39;t forget Vuetify, the amazing Vue JS component library by John Leider and over 200+ open source contributors.</p><p>The email verification is using SMTP server hosted with SendinBlue, they give you 300 free transnational emails. Then of course Vuex for state management.</p><p>If you have trouble or it&#39;s not working for you let me know in the comments and I&#39;ll do my best to help! Or reach out via twitter <a href="https://www.twitter.com/aaron_vail" rel="noopener noreferrer" target="_blank">@Aaron_Vail</a></p>

How to Build an Authentication App using Cosmic, Vue.js, and Lambda

<p>In this tutorial, I&#39;m going to show you how to create a minimalistic but awesome single page app blog using Vue, Vuex, Vuetify, Cosmic and deploy it to Netlify. Let&rsquo;s get started.</p><h3>TL;DR</h3><p><a href="https://cosmicjs.com/apps/vuetify-blog" rel="noopener noreferrer" target="_blank">Demo Link</a><br><a href="https://github.com/cosmicjs/vuetify-blog" rel="noopener noreferrer" target="_blank">View Code on Github</a></p><p><a href="https://app.netlify.com/start/deploy?repository=https://github.com/cosmicjs/vuetify-blog" rel="noopener noreferrer" target="_blank"><img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify" class="fr-fic fr-dii"></a></p><h3>Features</h3><ul><li>Netlify hosting (plus CDN, Prerendering, Minification, etc..)</li><li>Moderated commenting system (Un-moderated by default)</li><li>Social share buttons</li><li>SEO Meta tags with Vue-Meta</li><li>Integrated content management system via Cosmic</li></ul><h3>Needed improvements</h3><ul><li>Static page content connected to Cosmic</li><li>Post categories feature</li><li>Gravatar comment integration</li><li>Back/Forward buttons to trigger post view</li></ul><h3>Prerequisites</h3><p>You will be required to have Node JS and npm before starting. Make sure you already have them installed. If not you can find them here: <a href="https://nodejs.org">https://nodejs.org</a></p><p>Also in order to deploy it you can use Netlify account or Cosmic hosting.</p><h3>Project Structure</h3><p><strong>Important things to note:</strong><br><em>~/public/_redirects</em><br>This file is important since it points all your traffic to the index.html file in order for vue-router to handle the requests. To learn more about Netlify redirects <a href="https://www.netlify.com/docs/redirects/" rel="noopener noreferrer" target="_blank">visit their docs</a>. You don&#39;t need this file if you&#39;re deploying via Cosmic.<br><br><em>~/public/favicon.ico</em><br>If you want to customize your favicon you can change this file located within the public directory.</p><h3>Fork and Clone</h3><p>First we&#39;ll be forking the repository on GitHub. Afterwards open up command line or terminal and clone it to your project folder on your local machine with this command:</p><pre>git clone https://github.com/cosmicjs/vuetify-blog</pre><p>Use BitBucket or Gitlab instead?</p><p>If you prefer to use a different git provider you can just clone the repository and upload it to your desired remote.</p><h3>Install</h3><p>In your command line <code>cd</code> into the project root directory that you just cloned and run <code>npm install</code> to download and install all the required dependencies.</p><h3>Integrate Cosmic</h3><p>In your Cosmic account create a new bucket and call it whatever you want.</p><p>Download this <a href="https://raw.githubusercontent.com/availit/cosmicify/master/bucket.json" rel="noopener noreferrer" target="_blank">bucket.json</a> file. And in Settings -&gt; Import / Export Data, select and upload the downloaded file. This will import all the Object Types and placeholder data.</p><h3>Bucket Structure</h3><h4>Settings</h4><p>There are a couple settings Objects to allow you to change how your blog acts. The global Object has most of the overall options such as choosing whether your comments require you to approve and publish them. Your blog&#39;s logo in the navbar, or the
&quot;Read More&quot; button text.. Meanwhile the Social profiles Object is to set the social network icons in the footer.</p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/63956b30-19c1-11e9-b728-e7b45d8c7a5a-cosmicify-settings.jpg" style="width: 100%;" class="fr-fic fr-dib" alt="Cosmicify settings"></p><h4>Posts</h4><p>These Objects will be all your blog posts/articles.</p><h4>Profiles</h4><p>These Objects are for the author that will be posting on the blog. You can change your name, bio and profile picture.</p><h4>Comments</h4><p>The Comments Objects are exactly that; Comments, typically created via the site&#39;s new comment form. They collect Name, Email, and the Comment.</p><h3>Deployment with Netlify</h3><p>Go to your Netlify dashboard and click &quot;<a href="https://app.netlify.com/start" rel="noopener noreferrer" target="_blank">New site from Git</a>&quot;. Choose your git provider (I use GitHub). After you authenticate you can see your list of repositories.
Select the one you created for this project you created earlier.</p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/d2dab0c0-19a0-11e9-8580-4d6e3f092393-netlify-newsite.jpg" style="width: 100%;" class="fr-fic fr-dib" alt="Create new site from git"></p><p>Next it will make you choose a branch, then set some config options for it to run properly.</p><p>Set the deploy directory to <code>dist</code> and set the deploy command to <code>npm start</code></p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/3cad0880-19a2-11e9-ba91-2dc206c34b19-netlify-site-settings.jpg" style="width: 450px;" class="fr-fic fr-dib" alt="Netlify New Site Configuration"></p><p>Next you&#39;ll click &#39;Show advanced&#39; in order to set some environment variables.</p><p>Using the list below enter the key and values for your app. You need to enter your Bucket slug in the COSMIC_BUCKET variable. The variables with META in the name are used for the SEO tags on the site. The VUE_APP_DOMAIN is required for the article share
links to work properly. For the commenting system to work you need your COSMIC_READ_KEY and COSMIC_WRITE_KEY.</p><p>Required environment variables for the project:</p><pre>VUE_APP_TITLE
COSMIC_BUCKET
COSMIC_READ_KEY
COSMIC_WRITE_KEY
VUE_APP_DOMAIN
VUE_APP_META_TITLE
VUE_APP_META_LOGO
VUE_APP_META_DESC</pre><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/6c036930-19a2-11e9-bcf0-ab5ce7192564-netlify-env.jpg" style="width: 450px;" class="fr-fic fr-dib" alt="Netlify Environment Variables"></p><p>Once everything looks correct you can click &quot;Deploy site&quot; and it will install and build the app in a couple minutes then publish it live on the internet!</p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/5a1f8e30-19a0-11e9-ba91-2dc206c34b19-netlify-building.jpg" style="width: 100%;" class="fr-fic fr-dib" alt="Netlify build log"></p><h3>Netlify Post Processing</h3><p>Netlify offers post processing that runs after your site builds. This is optional but I highly recommend enabling post processing because it enhances your site&#39;s performance and prerendering in order for Googlebot to crawl your blog content.</p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/78bf2ff0-19a3-11e9-998c-93738aabc140-netlify-asset-optimization.jpg" style="width: 500px;" class="fr-fic fr-dib" alt="Netlify post processing"></p><h3>Conclusion</h3><p>I built this app for fun and decided to share it with everyone. It is open source under MIT license so feel free to hack it, modify it, or break it for all I care. Build using Vue, Vuex, and Cosmic. Oh, and don&#39;t forget Vuetify, the amazing material
component library by John Leider and over 200+ open source contributors.</p><p>If you have trouble or it&#39;s not working for you let me know in the comments and I&#39;ll do my best to help! Or reach out via twitter <a href="https://www.twitter.com/aaron_vail" rel="noopener noreferrer" target="_blank">@Aaron_Vail</a></p>

How to deploy a blog using Cosmic + Vuetify to Netlify

<h3>First, a little backstory</h3><p>When I began planning a new project for my portfolio slash blog website I knew I had several requirements. Some of which were server side rendering, ES6/ES7 transpilation, and a quick and non-complicated minifying process for builds. But lastly there
is also a need for a Content Management System (CMS) and I was tired of everyone suggesting WordPress.. So I went on a hunt to find my new favorite CMS. And the one requirement I had was for it to be code agnostic, meaning if I ever migrate my site to
a different technology or codebase I won&#39;t need to move all my content yet again.</p><h3><br></h3><h3>What is Cosmic?</h3><p><a href="https://cosmicjs.com/?ref=SJHUGTXvf" rel="noopener noreferrer" target="_blank">Cosmic&nbsp;</a>seemed to check all the boxes for me such as being code agnostic, while being cost friendly. You essentially pay for &quot;buckets&quot; which could
be compared to a single database. Afterwards you create object types within those buckets which can be compared to tables in a database. Your created object types then define the schema for all the objects inside, whether you need a Post object, Comment,
User, whatever you can come up with!</p><p>You design the schema of metadata they will hold and their relationship to other object types. This appealed to me very much and they have an awesome NodeJS API package which fit very nicely with my NuxtJS project.</p><h3><br></h3><h3>The Cosmic Interface</h3><p>One of the features that really makes Cosmic shine is their user interface to modify your content, objects, and object types. When building your object metadata schema you can do so within the interface very easily. However if you&#39;d prefer, you can
also do everything with the API instead. Below is a screenshot of a developer feature for adding metafields to an object type.</p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/e74ba850-b1f1-11e8-947c-331d4100aab6-cosmic-metafield.jpg" style="width: 300px;" class="fr-fic fr-dib"></p><p>The interface is non-developer friendly for content creators or editors. You can add multiple users to access your bucket and they have some great user role permission settings.</p><ul><li>Admin</li><li>Developer</li><li>Editor</li><li>Contributor</li></ul><p>These are very useful if you need to add additional developers, or simply someone that shouldn&#39;t see the developer features and only allowed to edit or create content. You basically get full access control over what&#39;s inside your bucket.</p><p>However, if your user does have access to the developer features they get to see a really cool toggle to switch between the different views for developer or editor.</p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/5e68a0b0-b1f1-11e8-8b38-214cff6444e1-cosmic-dev-toggle.jpg" style="width: 145px;" class="fr-fic fr-dib"></p><h3><br></h3><h3>Connecting your app to your data</h3><p>Cosmic makes accessing your data very simple which is a huge plus for me as it cuts down on development time and allows for more flexibility with how you integrate your data.</p><p>You have the option to make applications with dynamic routing which could build a webpage based on a &quot;pages&quot; object type, and different paths for a &quot;posts&quot; object type. You really have a lot of freedom to create whatever you can imagine. When you have a dynamic application, adding new content or modifying existing content becomes a breeze for both content creators and developers. Which is a common challenge in today&#39;s typical environment.</p><h4>Javascript API Example&nbsp;</h4><p>Here is a sample snippet for fetching a list of objects of a certain object type within your bucket.</p><pre>const Cosmic = require(&#39;cosmicjs&#39;)
const api = Cosmic()
// Specify your bucket
const bucket = api.bucket({
  slug: &#39;your-unique-bucket-id&#39;,
})

// Specify an Object Type
const data = (await bucket.getObjects({
  type: &#39;groomsmen&#39;,
  limit: 3
})).objects</pre><p>You can see more examples in the <a href="https://cosmicjs.com/docs?ref=SJHUGTXvf" rel="noopener noreferrer" target="_blank">Cosmic Documentation</a>.</p><h3><br></h3><h3>Ok, Here is the Developer Stand Point</h3><p>No software is perfect, I know. So what are the negatives to using something like Cosmic? What are the technical details surrounding Cosmic?</p><p>Well there is something called vendor lock-in which makes a customer dependent on a <strong>vendor</strong> for products and services, unable to use another <strong>vendor</strong> without substantial switching costs. While this is a factor it&#39;s minuscule compared to vendor lock-in with Microsoft&#39;s Azure, or Google cloud services (for example, because cosmic is much more than just a CMS).</p><p>I like the freedom cosmic gives you. You can pick and choose what services you want cosmic to provide you, since they do much more than allow you to just manage and store content. They can host and deploy your app, enhance your application with extensions,
and host cloud functions, such as AWS Lambda which is currently in beta.</p><h3><br></h3><h3>Why consider migrating your CMS?</h3><p>If you value any of the advantages I&#39;ve mentioned above I encourage you to create a <a href="https://cosmicjs.com/?ref=SJHUGTXvf" rel="noopener noreferrer" target="_blank">free trial with cosmicJS</a> and perhaps test out a proof of concept. From experience it&#39;s hard to find another CMS that compares with Cosmic for all that they provide. It&#39;s really a well-rounded service that has proven to work well with many technology stacks as being code-agnostic is very important for a content system in my opinion. So far I&#39;ve been really enjoying using Cosmic in my projects, and I&#39;ve said goodbye to WordPress a long time ago.</p><h3><br></h3><h3>Conclusion</h3><p>We welcome suggestions and submissions for new open-source projects. If you&#39;d like to contribute and join our Community, or 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 Aaron Vail

Start building today