<p>For simple shopping websites, going with full-fledged solutions like Shopify or Woocommerce can be a total overkill. In this tutorial, we&#39;re going to build an e-commerce website using <a href="http://nuxtjs.org" rel="noopener noreferrer" target="_blank">Nuxt</a> and Cosmic. We&#39;ll also use <a href="http://buefy.github.io" rel="noopener noreferrer" target="_blank">Buefy</a>, which is a UI component library for Vue JS based on the much loved <a href="http://bulma.io" rel="noopener noreferrer" target="_blank">Bulma</a>.</p><h2>TL;DR</h2><p><a href="https://github.com/cosmicjs/vue-ecommerce" rel="noopener noreferrer" target="_blank">Download the GitHub repo</a><br><a href="https://cosmicjs.com/apps/vue-ecommerce-app" rel="noopener noreferrer" target="_blank">Check out the demo.</a></p><h2 data-usually-unique-id="381622010639830291586137">Pre-requisites</h2><p>You need to have node and npm installed in your machine already. If not, visit <a data-target-href="https://nodejs.org/en/" href="https://nodejs.org/en/" rel="noreferrer nofollow noopener" target="_blank">node js website</a> and install the latest stable version.</p><h2 data-usually-unique-id="711486294920629409065847">Getting Started</h2><p>For our project, it makes sense to build our backend models first.</p><p><strong>Setup Cosmic backend</strong></p><p>Login to your Cosmic dashboard and select &lsquo;Add new Bucket&rsquo;. In the next screen, provide a name for your Bucket and select &lsquo;Start from scratch&rsquo;.</p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/1a294bd0-13c1-11e8-80f1-f9514681b4e1-screenshot-cosmicjs.com-2018.02.17-14-30-08.png" class="fr-fic fr-dib"></p><p><strong>Import Bucket data</strong></p><p>Download the <a href="https://github.com/cosmicjs/vue-ecommerce/blob/master/bucket.json" rel="noopener noreferrer" target="_blank">bucket.json</a> file from the repository. Then go to Settings -&gt; Import/Export page from the dashboard and import the downloaded file. Now we&#39;ll have the objects and object types available in the dashboard.</p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/336dd7e0-13c2-11e8-8d55-d310f20ba934-screenshot-cosmicjs.com-2018.02.17-14-38-36.png" class="fr-fic fr-dib"></p><h2 data-usually-unique-id="920368855828110041387074"><br></h2><h2 data-usually-unique-id="920368855828110041387074">Setting up Stripe</h2><p data-usually-unique-id="920368855828110041387074">For any e-commerce website, we&#39;ll have to accept payment from the customer at one point or another. Setting up a payment processor used to be a difficult area, but luckily we now have a lot of convenient solutions.&nbsp;</p><p data-usually-unique-id="920368855828110041387074">For our website, we&#39;ll use Stripe. To start with, go to their <a href="http://stripe.com" rel="noopener noreferrer" target="_blank">website</a> and create an account. After you fill in details and everything&#39;s setup, go to the API section and grab your public and private keys.</p><p data-usually-unique-id="920368855828110041387074"><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/d71c6c60-1455-11e8-9786-21a6c4c0428d-screenshot-dashboard.stripe.com-2018.02.18-08-13-53.png" class="fr-fic fr-dib"></p><p data-usually-unique-id="920368855828110041387074">We&#39;ll need these keys to configure Stripe in our website, using the much convenient <a href="https://stripe.com/checkout" rel="noopener noreferrer" target="_blank">Stripe Checkout&nbsp;</a> element.&nbsp;</p><h2 data-usually-unique-id="920368855828110041387074">Installing the Demo</h2><p>Get the source code into your machine by either downloading or cloning the repo, which is located at <a href="https://github.com/cosmicjs/vue-ecommerce">https://github.com/cosmicjs/vue-ecommerce</a>. Then run,</p><pre>cd vue-ecommerce
npm install</pre><p>There is one more step left before running the app. Rename the <code>.env.sample</code> file to <code>.env</code> and file in the enviroment variables there.&nbsp;</p><div class="fr-embedly                          " data-original-embed="<a href='https://gist.github.com/althaffe/a99ee76b6b4231a5789de270f4d12d72' class='embedly-card'></a>"><a href="https://gist.github.com/althaffe/a99ee76b6b4231a5789de270f4d12d72" class="embedly-card"></a></div><p>Since the HOST variable for production needs to be 0.0.0.0, and NODE_ENV needs to be &#39;production&#39;, &nbsp;we&#39;ll set them both in <code>package.json</code> file, and is not needed in the <code>.env</code> file.</p><p>Now run <code>npm run dev</code> to run the app in development mode. If you want to build for production, run <code>npm run build</code> and start the app with <code>npm start</code></p><h2 data-usually-unique-id="899224646998346390850342">Understanding the Source Code</h2><p>One major perk of using Nuxt for building Vue.js applications is that Nuxt is opinionated. So one can jump into any Nuxt project and find a familiar structure there.</p><p>The most important file is the <code>nuxt.config.js</code>. You&#39;ll find three plugins imported from the <code>plugins/</code> folder for Buefy, Stripe and Cosmic.&nbsp;</p><div class="fr-embedly                  " data-original-embed="<a href='https://gist.github.com/althaffe/f9acd57f4cdc8e4a4d48f5eb910c188b' class='embedly-card'></a>"><a href="https://gist.github.com/althaffe/f9acd57f4cdc8e4a4d48f5eb910c188b" class="embedly-card"></a></div><p>We&#39;re using the <a href="https://www.npmjs.com/package/vue-stripe-checkout" rel="noopener noreferrer" target="_blank">vue-stripe-checkout</a> as a wrapper for the Stripe&#39;s checkout element. Visit <a href="https://stripe.com/docs/checkout#integration-simple-options" rel="noopener noreferrer" target="_blank">Stripe documentation</a> to learn about the available options.</p><p>Any environment variable that need to be used in the client side needs to be defined in the env section and we&#39;ll also have stripe script linked in the scripts section.&nbsp;</p><p>The <code>pages/</code> folder contains the home and cart pages. The checkout method int the cart page handles the stripe checkout. &nbsp;Basically what we&#39;re doing is sending the token generated by the checkout component and other identifying details to the app server. Checkout the <a href="https://www.npmjs.com/package/vue-stripe-checkout" rel="noopener noreferrer" target="_blank">vue-stripe-checkout</a> package to learn more about the usage.&nbsp;</p><p>For a simple Nuxt app, we can just use server only for SSR and have all the code shipped to client side. But in this case, we need to handle the stripe checkout separately in the server. Inside the <code>server/</code> folder, we have the Express server setup in <code>index.js</code> file and a single route handler in <code>api/index.js</code> file. We&#39;ll first create a customer in Stripe with <code>stripe.customers.create</code> function and then charge with <code>stripe.charges.create</code> function. Check out <a href="https://stripe.com/docs/checkout/express">https://stripe.com/docs/checkout/express</a> to learn more about the implementation.</p><p>Once the payment is successful, we&#39;ll add the order to our Cosmic Bucket under the &#39;Orders&#39; object type.</p><div class="fr-embedly            " data-original-embed="<a href='https://gist.github.com/althaffe/c24bf020e02c9d6c7979e41bb8a7699d' class='embedly-card'></a>"><a href="https://gist.github.com/althaffe/c24bf020e02c9d6c7979e41bb8a7699d" class="embedly-card"></a></div><h2 data-usually-unique-id="899224646998346390850342">Deploying the App &nbsp;</h2><p>Deploying the app with Cosmic is pretty easy. Just go to your Bucket and then navigate to Settings -&gt; Deploy to Web.</p><p>Provide your Github repository url and the branch to be deployed. Cosmic makes the Bucket slug, read key and write key environment variables available by default.&nbsp;</p><p>Choose the repository there and branch to deploy (which in most cases is master), and click &#39;Deploy to Web&#39;. That is all there is to it and you will get a confirmation mail once deployment is successfull. Once it succeeds, do not forget to supply the stripe keys and environment variables through the &#39;Set Environment Variables&#39; section in case you haven&#39;t setup <code>.env</code> file.</p><p>PS: Any e-commerce app needs to be secured with https. So do enable SSL in your app from deployment section when going live.</p>

How to build an e-commerce website with Nuxt and Cosmic

<p>Building curated collections of resources and tools is an easy way to gain visibility in your community. In this tutorial, we&rsquo;re going to build a simple content curation website powered by <a href="https://cosmicjs.com">Cosmic</a>. You&rsquo;ll see how easy it is to create
relational database models for our content with Cosmic and also how quick we can get from scratch to deployment.</p><p>We&rsquo;ll use Vue JS as our frontend-framework and the flexbox-powered Bulma to make everything look pretty. So let&rsquo;s get started.</p><h2 data-usually-unique-id="236954606944585291892423">TL;DR</h2><p><a data-target-href="https://github.com/althaffe/cosmic-stash-demo" href="https://github.com/cosmicjs/vue-content-curation-app" rel="noopener noreferrer" target="_blank">Download the code from Github Repo</a>
<a data-target-href="http://cosmic-stash.cosmicapp.co/" href="http://cosmic-stash.cosmicapp.co/" rel="noopener noreferrer" style="outline-width: 0px !important; user-select: text !important;" target="_blank"></a><br><a data-target-href="http://cosmic-stash.cosmicapp.co/" href="https://cosmicjs.com/apps/content-curation-website" rel="noopener noreferrer" style="outline-width: 0px !important; user-select: text !important;" target="_blank">Checkout the Demo</a></p><h2 data-usually-unique-id="381622010639830291586137">Pre-requisites</h2><p>You need to have node and npm installed in your machine already. If not, visit <a data-target-href="https://nodejs.org/en/" href="https://nodejs.org/en/" rel="noreferrer nofollow noopener" target="_blank">node js website</a> and install the latest stable version.</p><h2 data-usually-unique-id="711486294920629409065847">Getting Started</h2><p>For our project, it makes sense to build our backend models first.</p><p><strong>Setup Cosmic backend</strong></p><p>Login to your Cosmic dashboard and select&nbsp;&lsquo;Add new Bucket&rsquo;. In the next screen, provide a name for your bucket and select&nbsp;&lsquo;Start from scratch&rsquo;.</p><p>We now have our bucket setup and need to add our content. But first, we need to model how our content will be structured. We&rsquo;ll add two object types for this. Categories and Resources.</p><p>Click on&nbsp;&lsquo;Add object type&rsquo; from the menu.&nbsp;We don&rsquo;t need any metafields for categories, so just add the singular name as&nbsp;&lsquo;Category&rsquo; and save the object type.</p><p><span data-ace-gallery-json='{"items":[{"type":"image","url":"https://d2mxuefqeaa7sj.cloudfront.net/s_D02EFFEDFC25DD7845B7DAC12A7A5F5F9F81BDA2BBDC616DF4591A094AD2ACB0_1516642419527_Screenshot+from+2018-01-22+22.50.10.png","attachmentId":"attachment-079143495738627441178048","innerZones":{"captionZone":"caption077699619574882296543173"},"naturalWidth":1351,"naturalHeight":625,"serializedZonesForClipboard":{"captionZone":{"atext":{"text":"\n","attribs":"|1+1"},"pool":{"numToAttrib":{},"attribToNum":{},"nextNum":0,"dirty":false}}}}]}' data-ace-gallery-urls="https://d2mxuefqeaa7sj.cloudfront.net/s_D02EFFEDFC25DD7845B7DAC12A7A5F5F9F81BDA2BBDC616DF4591A094AD2ACB0_1516642419527_Screenshot+from+2018-01-22+22.50.10.png"><img src="https://d2mxuefqeaa7sj.cloudfront.net/s_D02EFFEDFC25DD7845B7DAC12A7A5F5F9F81BDA2BBDC616DF4591A094AD2ACB0_1516642419527_Screenshot+from+2018-01-22+22.50.10.png" data-action="zoom" class="fr-fic fr-dii"></span></p><p><br></p><p>Similarly, create an Object with singular name&nbsp;&lsquo;Resource&rsquo;.</p><p><span data-ace-gallery-json='{"items":[{"type":"image","url":"https://d2mxuefqeaa7sj.cloudfront.net/s_D02EFFEDFC25DD7845B7DAC12A7A5F5F9F81BDA2BBDC616DF4591A094AD2ACB0_1516642382913_Screenshot+from+2018-01-22+22.55.03.png","attachmentId":"attachment-023410300719863780849012","innerZones":{"captionZone":"caption084704443284698098258957"},"naturalWidth":1348,"naturalHeight":627,"serializedZonesForClipboard":{"captionZone":{"atext":{"text":"\n","attribs":"|1+1"},"pool":{"numToAttrib":{},"attribToNum":{},"nextNum":0,"dirty":false}}}}]}' data-ace-gallery-urls="https://d2mxuefqeaa7sj.cloudfront.net/s_D02EFFEDFC25DD7845B7DAC12A7A5F5F9F81BDA2BBDC616DF4591A094AD2ACB0_1516642382913_Screenshot+from+2018-01-22+22.55.03.png"><img src="https://d2mxuefqeaa7sj.cloudfront.net/s_D02EFFEDFC25DD7845B7DAC12A7A5F5F9F81BDA2BBDC616DF4591A094AD2ACB0_1516642382913_Screenshot+from+2018-01-22+22.55.03.png" data-action="zoom" class="fr-fic fr-dii"></span></p><p>We need to define a few metafields for each Resource. Click on Metafields and add the following fields.</p><ol start="1"><li>A Plain text field with title&nbsp;&lsquo;Link&rsquo; and value&nbsp;&lsquo;http://&rsquo;</li><li>An Image/File field with title&nbsp;&lsquo;Image&rsquo;</li><li>A Single Object Relationship with title &lsquo;Category&rsquo; and &lsquo;Category&rsquo; as the &nbsp;object type to choose from.</li></ol><p><span data-ace-gallery-json='{"items":[{"type":"image","url":"https://d2mxuefqeaa7sj.cloudfront.net/s_D02EFFEDFC25DD7845B7DAC12A7A5F5F9F81BDA2BBDC616DF4591A094AD2ACB0_1516642922473_Screenshot+from+2018-01-22+23.09.27.png","attachmentId":"attachment-030196820759082484991485","innerZones":{"captionZone":"caption173213843670626812675513"},"naturalWidth":1345,"naturalHeight":626,"serializedZonesForClipboard":{"captionZone":{"atext":{"text":"\n","attribs":"|1+1"},"pool":{"numToAttrib":{},"attribToNum":{},"nextNum":0,"dirty":false}}}}]}' data-ace-gallery-urls="https://d2mxuefqeaa7sj.cloudfront.net/s_D02EFFEDFC25DD7845B7DAC12A7A5F5F9F81BDA2BBDC616DF4591A094AD2ACB0_1516642922473_Screenshot+from+2018-01-22+23.09.27.png"><img src="https://d2mxuefqeaa7sj.cloudfront.net/s_D02EFFEDFC25DD7845B7DAC12A7A5F5F9F81BDA2BBDC616DF4591A094AD2ACB0_1516642922473_Screenshot+from+2018-01-22+23.09.27.png" data-action="zoom" class="fr-fic fr-dii"></span></p><p>We use the last field to assign a category to a resource. Now save the object type.</p><p>We now have the content structure in place. You can now add categories and resources from their appropriate tabs.</p><p><br></p><h2 data-usually-unique-id="920368855828110041387074">Installing the Demo</h2><p>Having the content in place, we can now focus on the source code of the application.&nbsp;</p><p>The source code of the project demo is located at <a href="https://github.com/althaffe/cosmic-stash-demo" rel="noreferrer nofollow noopener" target="_blank"></a><a href="https://github.com/cosmicjs/vue-content-curation-app">https://github.com/cosmicjs/vue-content-curation-app</a>. Get a copy in to your machine either by cloning the repository with <code>git clone</code> or by clicking the download button in the github page.</p><p>Once you have the repository, <code>cd</code> into the directory and install the project dependencies with <code>npm install</code> . There is one more step you need to do to get the app running. Copy and rename the <code>.env.sample</code>file in the root folder to <code>.env</code> and fill in the bucket configuration variables - which you can obtain from the Settings &rarr; Basic Settings tab in your cosmic dashboard. (you can skip write_key if you want as we are not writing anything yet to our Cosmic backend from the app)</p><div class="fr-embedly                          " data-original-embed="<a href='https://gist.github.com/althaffe/5f9b5dce8be22881bc51644e13296b07' class='embedly-card'></a>"><a href="https://gist.github.com/althaffe/5f9b5dce8be22881bc51644e13296b07" class="embedly-card"></a></div><p>Once this is done, you can start the app in development mode with <code>npm run dev</code> ,and you will be able to access it at <code>localhost:8080</code> by default, or at the port you defined in <code>.env</code> file.</p><p>To build the app for production, run <code>npm build</code>. The built app ready for serving will be generated in to the &lsquo;dist/&rsquo; folder. To serve the app, run <code>npm start</code>, which will start an Express server and serve our built files at <code>localhost:5000</code> by default, or at any other port you defined in the <code>.env</code> file.</p><h2 data-usually-unique-id="013442258595762541751451">Understanding the source code</h2><p>The project is scaffolded with vue-cli, which gives us a nice structure to work with. The only major addition to this is the <code>server.js</code> file, which was included for deployment within Cosmic.</p><div class="fr-embedly                          " data-original-embed="<a href='https://gist.github.com/althaffe/a34925a06f4309af99057a2163f590a8' class='embedly-card'></a>"><a href="https://gist.github.com/althaffe/a34925a06f4309af99057a2163f590a8" class="embedly-card"></a></div><p>As you can see, this will start an Express server and serve our <code>dist/</code> folder as static files. The <code>dist/</code> folder is where the production app will be built into, as mentioned before.&nbsp;</p><p>Inside the <code>src/</code> folder, there are four folders.</p><p>The <code>assets/</code> directory is for the static assets like images, stylesheets etc. We have a <code>main.scss</code> file inside the <code>assets/styles/</code> folder where you can define global styles, and also modify any Bulma variables as needed.</p><p>The <code>components/</code> folder contains two component files. A List component for category list and a Single component for each category page.</p><p>The <code>router/</code>&nbsp; folder contains the vue-router configurations and <code>resources/</code> folder contains a cosmic bucket initialization file, which we can import and use in components</p><h2 data-usually-unique-id="899224646998346390850342">Deploying the App &nbsp;</h2><p>Since Cosmic does the heavylifting in the backend side and there is no database to configure, deployment is a walk in the park. We&rsquo;ll look into deployment using Cosmic hosting.</p><p>Go to your bucket in your cosmic dashboard and navigate to Settings &rarr; Deploy Web App. Supply your Github repository url and the branch to be deployed. Cosmic makes the three enviroment variables we set early available automatically on every deployment,
so you don&rsquo;t need to enter it manually.&nbsp;</p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/30e6b050-01c5-11e8-989f-bf1b2f244861-download.png" data-action="zoom" class="fr-fic fr-dii"></p><p>There are other deployment options that you can explore, including setting custom enviroment variables, adding custom domain and ssl etc. After you are finished, just click on&nbsp;&lsquo;Deploy to Web&rsquo; and the site will be deployed. You&rsquo;ll
receive an email on successful deployment</p><h2 data-usually-unique-id="142243886846629893523089">Conclusion</h2><p>I hope you can see what&rsquo;s possible with CosmicJS with this short tutorial. By taking away the heavy-lifting in the backend, Cosmic essentially speeds up the process and reduces hassle in building content driven websites and apps. If you have any questions, feel free to reach out to us on <a data-target-href="https://twitter.com/cosmic_js" href="https://twitter.com/cosmic_js" rel="noreferrer nofollow noopener" target="_blank">Twitter</a> or join our <a data-target-href="https://cosmicjs.com/community" href="https://cosmicjs.com/community" rel="noreferrer nofollow noopener" target="_blank">Slack</a> community.</p>

Blogs by Muhammad Althaf

Start building today

Blogs by Muhammad Althaf

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

Start building today