Building a Full Stack SMS-enabled Chat Application using Twilio, Node.js, GraphQL and Cosmic

Creating / updating our portfolios is a necessary evil these days. &nbsp;Places change, people change, and thus the cycle of content creation and management churns continuously. &nbsp;When you find yourself in need of &nbsp;a portfolio redesign, there are tons of tools and services to consider. &nbsp;One that should currently peak your interest is the Gatsby JS static site generator along with a headless CMS, like Cosmic. &nbsp;Today, with these two tools, we will create a working portfolio ready for continuous deployment, with the power to be rebuilt when content changes are made.<h3>TLDR:</h3><a href="https://cosmicjs.com/apps/gatsby-agency-portfolio" rel="noopener noreferrer" target="_blank">Gatsby Portfolio Site Demo</a><a href="https://github.com/cosmicjs/gatsby-agency-portfolio" rel="noopener noreferrer" target="_blank">Download the Codebase</a>&nbsp; <h2>0.0 Before We Start</h2>We are creating a portfolio site mostly with static data, but it would nice to be able to easily modify the content of our site without needing to modify a bunch of source code. &nbsp;So we are building a client that consumes content stored on a Content Management Service and programmatically displays it at whatever URL we choose.&nbsp;<h3>0.1 Tools We Are Using</h3><ul><li><a href="https://www.gatsbyjs.org/" rel="noopener noreferrer" target="_blank">Gatsby JS</a> - This is a static site generator that will automatically fetch new data and rebuild our site files when changes are made to our content. &nbsp;Comes bundled with data fetching wizardry GraphQL and the ever present React JS front end framework.</li></ul> <ul><li><a href="https://cosmicjs.com/" rel="noopener noreferrer" target="_blank">Cosmic</a> - Our Content Management Service that will store all the information we need about our site. &nbsp;Cosmic offers very flexible data model definition that will allow us to store all types of information, from iterables to simple text fields and HTML content. &nbsp; NOTE! - In order to follow along with this tutorial you will need to create a bucket on Cosmic and fill it with the appropriate data objects.</li></ul> <ul><li><a href="https://rsuitejs.com/en">RSuite</a> - A library of pre-styled components that works with react to give us pre-styled components. &nbsp;This will allow us to use components that look great out of the box, while also giving us flexibility to make adjustments as needed.</li></ul> <ul><li><a href="https://www.netlify.com/" rel="noopener noreferrer" target="_blank">Netlify</a> (Optional) - A deployment service that will let us hook directly into a git repository. &nbsp;Using this we can configure webooks for rebuilding static files as well as make automatic deploys when source code changes occur.</li></ul>Let&#39;s go ahead and begin configuring our setup.<h2>1.0 Installation and Setup</h2>We only have a few software requirements needed to start building. Mainly we need <a href="https://nodejs.org/en/">Node JS</a>, either npm or yarn, and we will be using <a href="https://git-scm.com/" rel="noopener noreferrer" target="_blank">git</a> to do some deployment things on Netlify if you so choose.<h3>1.1 Initializing our Project</h3>Once you get those installed, we can begin setting up our development environment. &nbsp;Gatsby uses a very handy dandy CLI to allow us to bootstrap our project with a project directory ready to build and serve from a Node environment.If you don&#39;t have the CLI you can install it with a simple npm terminal command:<pre>$npm install -g gatsby-cli</pre>This will take a moment to install but after a few seconds you will have access to gatsby terminal command which we can use to initialize our project:<pre>$gatsby new gatsby-portfolio</pre>Now we have a directory called gatsby-portfolio in the location you ran the gatsby command, change to that directory and list its contents:<pre>$cd gatsby-portfolio/ &amp;&amp; ls -la</pre>You should see a list of folders and files similar to this:<pre><code>.
├── node_modules
├── src
├── .gitignore
├── .prettierrc
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── LICENSE
├── package-lock.json
├── package.json
└── README.md</code></pre>open up package.json and we will see we have some terminal scripts that we can now use to build / serve our project. Try running the start script in your terminal:<pre>$npm start</pre>or&nbsp;<pre>$yarn start</pre>After a few seconds we should see a success message in our terminal and we should be able to view our initial project view on our <a href="http://localhost:8000" rel="noopener noreferrer" target="_blank">localhost</a>, your should see something like this:<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/1017d800-70f4-11e9-b4ca-010bf33e4f63-gatsby-start-screen.png" style="width: 410px;" class="fr-fic fr-dib">Great, now press ctrl + C within your terminal to stop the development server and we are now ready install our node libraries.<h3>1.2 Installing our Libraries</h3>We require a few plugins from Gatsby to allow our Graphql queries to run, as well as a few extras for environment configuration and our component library RSuite. &nbsp;From within your project directory, we need to run some terminal commands to get our js libraries:<pre>$yarn add rsuite dotenv gatsby-source-cosmicjs gatsby-plugin-sass gatsby-plugin-less node-sass less</pre>Let&#39;s go through these and talk about what we are adding to our project here:<ul><li>rsuite - our component library that I mentioned above. &nbsp;Installing this let&#39;s us import js classes and insert pre-styled React components.</li><li>dotenv - Allows us to configure our source code with sensitive api keys, token, whatever that may change between developers but should be present when the source code is built.</li><li>gatsby-source-cosmicjs - a gatsby plugin that will let us easily make graphql requests to the Cosmic graphql API.</li><li>gatsby-plugin-sass / gatsby-plugin-less / node-sass / less - Gatsby plugins and styling libraries that will let us use .scss and .less files. &nbsp;These will allow us to import rsuite styling specs and bundle them properly on build.</li></ul><h3>1.3 Configuring Gatsby</h3>In order for Gatsby to be able to build our html files, we need to fetch data from Cosmic and build each page using the data graphql retrieves. &nbsp;Let&#39;s go ahead and open gatsby-config.js and add our installed packages:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/JacobKnaack/04020f1404792702294814e65a1141e3' class='embedly-card'></a>"><a href="https://gist.github.com/JacobKnaack/04020f1404792702294814e65a1141e3" class="embedly-card"></a></div>We have added our plugins for sass and less, and also added our gatsby-source-cosmicjs plugin. &nbsp;You&#39;ll notice that we are using some environment variables to configure this plugin so we need to add a hidden file that will store these variables.<pre>$touch .env</pre>Now add your variables to this file and dotenv will take care of defining these using line 1 of our gatsby-config.js file. &nbsp;You can find the value to assign to these variables from within your Cosmic bucket: Bucket Name &gt; Dashboard &gt; Settings &gt; Basic Settings:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/JacobKnaack/3e971eeda0b866d05cee9f78a6e82491' class='embedly-card'></a>"><a href="https://gist.github.com/JacobKnaack/3e971eeda0b866d05cee9f78a6e82491" class="embedly-card"></a></div>Now we are ready to build!<h2>2.0 Building Our Components</h2>So what are we building exactly. &nbsp;Well, basically we will create one large Page component and create a series of display components to handle each section of our portfolio. &nbsp;Let&#39;s break this down:<pre>src/pages/index.js</pre><ul><li>This is our home page and where all of our components will be loaded and used to display portfolio info.</li></ul><pre>src/components/projects.js</pre><ul><li>This will be our projects section that will take project data and display information about each project. &nbsp;This will take a prop composed of our portfolio projects and iterate over them to display data when appropriate.</li></ul><pre>src/components/work.js</pre><ul><li>This will a section highlighting our skills and the types of services / work we offer to people that might peruse our portfolios.</li></ul><pre>src/components/about.js</pre><ul><li>This will be a section that talks about us, displaying any personal data we want to share.</li></ul><pre>src/components/contact.js</pre><ul><li>Finally we have a component that we will use for displaying a contact form that will let users email us if they have any inquires.</li></ul><h3>2.1 The Home Page</h3>This is our main component that act as our entry point for our portfolio. &nbsp;Its job is to make several Graphql API requests for our portfolio data from Cosmic and pass that data onto the different sections of our portfolio. &nbsp;Let&#39;s look at the component and talk about what&#39;s happening:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/JacobKnaack/ad7675d930faa86ca170ee16001dc0a9' class='embedly-card'></a>"><a href="https://gist.github.com/JacobKnaack/ad7675d930faa86ca170ee16001dc0a9" class="embedly-card"></a></div>The important parts of this The only display element that really lives here is the splash screen which gives us a little bit&nbsp; <h3>2.2 Modify the Header Component</h3>By default Gatsby gives us a Layout component that lets us wrap each page with a Header and Footer. &nbsp;We are going to add some navigation for our portfolio into the header so users can navigate to different sections of our Portfolio by clicking on a nav bar that we will import from rsuite:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/JacobKnaack/54a7f2a4ef7c3800f099b2dd1b25728f' class='embedly-card'></a>"><a href="https://gist.github.com/JacobKnaack/54a7f2a4ef7c3800f099b2dd1b25728f" class="embedly-card"></a></div>These links will scroll the home page down to each section via the name properties placed on each section on our home page.<h3>2.3 The Work Component</h3>This component takes in our data about any services we provide, specifically a names, a short summary,&nbsp;and a more in depth description, and let&#39;s us display that to our users:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/JacobKnaack/1b20f1c0fb1549364033d643c14efd19' class='embedly-card'></a>"><a href="https://gist.github.com/JacobKnaack/1b20f1c0fb1549364033d643c14efd19" class="embedly-card"></a></div>This iterates through our services objects. &nbsp;For every service that exists we add a new div to the work component section. Now we can modify and add data to our services on Cosmic and it will update accordingly.<h3>2.4 The Projects and About Components</h3>These sections will behave in essentially the &nbsp;same way, &nbsp;we display some information from our &quot;Home Page&quot;. &nbsp;Just a bit of text to give the user some context for each section, but after that we just iterating through our list objects we have saved to our Cosmic bucket:<div class="fr-embedly" data-original-embed="<a href='https://gist.github.com/JacobKnaack/48a21123f39244c52f53a992c4426b11' class='embedly-card'></a>"><a href="https://gist.github.com/JacobKnaack/48a21123f39244c52f53a992c4426b11" class="embedly-card"></a></div>And just like Project displays a heading and display images and data about projects, we can do the same with the individuals and data in the about section: <div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/JacobKnaack/0544a30590e0c20d4d29ee8416f0b6b8' class='embedly-card'></a>"><a href="https://gist.github.com/JacobKnaack/0544a30590e0c20d4d29ee8416f0b6b8" class="embedly-card"></a></div><h3>2.5 The Contact Component</h3>Lastly we have a component that will users to contact us at an email we specify. &nbsp;This will handle our contact form, and will be initialized with some state variables so we can control our user inputs, all the input and form components are handled by rsuite so we don&#39;t have to add too many styling properties to our form fields and feedback components:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/JacobKnaack/0c42b547d2b487b48c9c52e686d7fbad' class='embedly-card'></a>"><a href="https://gist.github.com/JacobKnaack/0c42b547d2b487b48c9c52e686d7fbad" class="embedly-card"></a></div>Essentially we Validate our form fields and check if all the form fields are present, then we a the mailto url to open an email client and populate it with our message.<h2>3.0 Deployment (optional)</h2>Now we are ready to deploy our app. &nbsp;The most important part of this process is making sure that our app rebuilds itself when we change any data on Cosmic. &nbsp;If we integrate continuous deployment using git Netlify will allow us to activate a buildhook in order to generate new static files using updated data fetched from the Cosmic API.<h3>3.1 Deploying from Git</h3>Go to <a href="https://www.netlify.com/" rel="noopener noreferrer" target="_blank">Netlify</a> and create an account if you don&#39;t aready have one. &nbsp;From the apps dashboard click New Site from Git at the app dahsboard. &nbsp;From there you will be walked through the process of authorizing Netflify to access a repository from a git service (github, gitlab, bitbucket).You will have to add you COSMIC_READ_KEY and your COSMIC_BUCKET_SLUG as environment variables. This can be found under the deploy settings once the app has been created on Netlify. &nbsp;In the same area you can create your buildhook to allow Cosmic to request a rebuild of your files once an update is made:<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/a01c7490-7353-11e9-9e31-110b00e15f97-Screen-Shot-2019-05-10-at-11.34.32-AM.png" style="width: 522px;" class="fr-fic fr-dib">Once the build hooks is created go over to Cosmic and add it to the webhooks tab under the settings for your bucket:<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/dbfe0b90-7353-11e9-808f-9fee33ce619d-Screen-Shot-2019-05-10-at-11.45.49-AM.png" style="width: 141px;" class="fr-fic fr-dib">Follow the instructions for webhooks to fire a post request to that url every time an object is updated and you should have a continuously deployed, super fast portfolio site ready to be updated.Thanks for following along with me and I&#39;ll see you next time I decide to build something cool :)&nbsp;

Building and Designing a Portfolio Site Using Gatsby JS and Cosmic

Hello stranger. &nbsp;Come with me on a short adventure as we build a fast, simple interface for publishing blog style articles. Something sensible. &nbsp;It should look clean and simple yet have the ability to perform powerful resource fetching with
some query magic. I&#39;m talking about Graphql, the query language built with web APIs in mind. And speaking of web APIs, &nbsp;we will also be using our handy Content Management Service: Cosmic, to Create and Store our Blog Data.<h3>TLDR:</h3><a href="https://cosmicjs.com/apps/apollo-blog" rel="noopener noreferrer" target="_blank">Progressive Apollo Blog</a> <a href="https://github.com/jacobknaack/apollo-blog" rel="noopener noreferrer" target="_blank">Progressive Apollo Blog Codebase</a>&nbsp; <h2>0.0 Before You Start</h2>Before you go any further make sure you have the required developer tools installed on your machine. &nbsp;Mainly you will need <a href="https://nodejs.org/" rel="noopener noreferrer" target="_blank">Node JS</a>,&nbsp;its accompanying package manager: npm,&nbsp;and <a href="https://git-scm.com/" rel="noopener noreferrer" target="_blank">git</a>. &nbsp;Git is semi optional and will only be used to code storage and deployment if that is your goal.Once you have those installed we can begin setting up our project and eventually start writing some Javascript.<h3>0.1 Libraries and packages</h3>Let&#39;s go over the main packages that we will use to create our blog platform.<ul><li><a href="https://facebook.github.io/create-react-app/" rel="noopener noreferrer" target="_blank">Create React App</a> - We will be leveraging the ever prevalent React library to build our UI components. &nbsp;To bootstrap our project we will also be using a handy command line tool create-reate-app so that we can spend as little time as possible on configuration and setup and just get to creating meaningful javascript.</li></ul> <ul><li><a href="https://react.semantic-ui.com/" rel="noopener noreferrer" target="_blank">Semantic UI</a>- This is a UI framework that will allow us to import fully styled UI components. &nbsp;No fussing around with tedious CSS specs to get something that looks nice right out
of the gate.&nbsp;</li></ul> <ul><li><a href="https://www.apollographql.com/" rel="noopener noreferrer" target="_blank">Apollo / Graphql</a> - These two packages go hand in hand. &nbsp;Apollo will be used as the Graphql client to make requests to our Graphql server endpoints. &nbsp; It&#39;s easy to configure and very straight forward to use. Again, allowing us to focus on writing less javascript and instead focusing on the high level composition of our application. &nbsp;Graphql of course will allow us to make requests that return only data we care about, letting us efficiently grab content from Cosmic.</li></ul>I believe with all that boring business out of the way, we can start slapping our keyboards!<h2>1.0 Setting Up Our Project</h2>Let&#39;s fire up our terminal and start bootstrapping our project source files. &nbsp;For those that don&#39;t have Create React App installed, we can do that with a simple npm command:<pre>$npm install -g create-react-app</pre>Once this finishes (or you have this package already installed), we can summon our initial project files by running the cli:<pre>$create-react-app apollo-blog</pre>You will notice a fair amount of wizardry occurring in your terminal as our app is bootstrapped with all sorts of powerful libraries and source code. &nbsp;Taking a look at our file system will show a directory titled `apollo-blog`. &nbsp;Changing directories
into this folder will show a structure similar to this:<pre>apollo-blog/
 README.md 
 node_modules/
 package.json
 public/
 index.html
 favicon.ico
 src/
 App.css
 App.js
 App.test.js
 index.css
 index.js
 logo.svg</pre> We should now be able to run:<pre>$npm start</pre>or&nbsp;<pre>$yarn start</pre>This will run the start script stored in our `package.json` file which is all bundled together with Webpack and build tools that will handle compiling all of our React source code and bundling that into files ready to be served to a browser.After the script runs you should see a simple message in your terminal, and your default browser should open to a tab with project running. &nbsp;You should see something like this:<h3>1.1 Installing Javascript Libraries</h3>The next step is installing some npm libraries so that will help quickly create a good looking App Interface as well as easily fetch data from the Cosmic graphql servers.In your terminal run the following command and let&#39;s talk about what each of these packages will be doing for us:<pre>$npm install --save apollo-boost react-apollo graphql dotenv semantic-ui-css semantic-ui-react react-router-dom</pre>apollo-boost / react-apollo / graphql - These guys are going to serve as the main solution for getting our data efficiently and scalably from Cosmic servers to our client side UI. &nbsp;They provide wrappers for our components to be able to configure queries &nbsp;and provide useful variables for data loading and error handling.dotenv - this package will allow is to configure semi sensitive keys so we don&#39;t have to store anything publicly for accessing our Cosmic Bucket.semantic-ui-css / semantic-ui-react&nbsp;- Our UI framework that will let us import pre-styled containers and components letting us focus on programming functionality, spending less time fidgeting with CSS and other styling considerations.react-router-dom - A react library that will allow us to configure url routing logic to control linking within our app and accessing URL parameters.with these installed we can begin writing some javascript!<h3>1.2 Configuring Environment Variables</h3>We are going to add a minimal security precaution so that we won&#39;t let just any request come through our bucket&#39;s API endpoint, &nbsp;feel free to skip this section but be warned that your components will behave a little differently and your bucket
can be queried from anyone with the knowhow to make API Requests. &nbsp;So, you know... don&#39;t put any sensitive info in your buckets.We are going to require a read_key to be attached to every API request to our bucket. &nbsp;You&#39;ll have to generate one by heading to the settings tab for your Cosmic bucket and clicking on Basic Settings. Cosmic&nbsp;&gt; Your Bucket&nbsp;&gt; settings &gt; main.&nbsp;At the top there should be as section titled API Access&nbsp;&gt; API Read Access Key. &nbsp;Click on the button to Generate new key. &nbsp;Copy the key to your clipboard and let&#39;s configure our project
directory with our config file:<pre>$touch .env</pre>this file is going to be used to configure our project with our API Read Access Key so we don&#39;t have to hard code it in with our source code and commit it for the world / other prying eyes to see.simply add one line to your .env file:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/JacobKnaack/02ab245dadb205758d2632f8fac1eca2' class='embedly-card'></a>"><a href="https://gist.github.com/JacobKnaack/02ab245dadb205758d2632f8fac1eca2" class="embedly-card"></a></div>Make sure you prefix your variable name with REACT_APP! &nbsp;The build scripts that bundle our source code will look for this to make variables available in our compiled javascript. &nbsp;With that done, we are now ready to use this
key in our React project.<h2>2.0 Creating our Routes and Components</h2>Finally, we are ready to create our Components and set up our routes. &nbsp;In an effort to keep things as simple as possible we are just creating two routes and two main components:Routes<ul><li><pre>{protocol}://{host}/</pre><ul><li>The home route that will list our article</li></ul></li><li><pre>{protocol}://{host}/article/:articleName</pre><ul><li>The route that will display an article</li></ul></li></ul>Components<ul><li><pre>/views/home.js</pre><ul><li>This component will fetch all articles and display general article info.</li></ul></li><li><pre>/views/article.js</pre><ul><li>The component that will fetch a single article and display all article content.</li></ul></li></ul><h3>2.1 Configuring &nbsp;App.js</h3>Let&#39;s go ahead and open the App.js component in whatever text editor you prefer, and start to configure it with our routing logic and our Graphql client.&nbsp;We are going to import one component wrapper from react-apollo and one constructor function that will let the components within our component wrapper make requests to a specified Graphql server ( for us this will be the Cosmic&#39;s Graphql server). &nbsp;We also want to import our wrapping components for react-router-dom. This will allow us to us our browser url to systematically switch component views and access any url parameters.Lastly we are going to import a CSS file from Semantic UI so that we can leverage it&#39;s class selectors and give imported components their base stylings.Here&#39;s what our App.js should look like after everything is properly configured:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/JacobKnaack/51a7642e45bbe664557d29c6894fc29b' class='embedly-card'></a>"><a href="https://gist.github.com/JacobKnaack/51a7642e45bbe664557d29c6894fc29b" class="embedly-card"></a></div><h3>2.2 Creating The Home View</h3>Let&#39;s create a new file in a new directory&nbsp;<pre>src/views/home.js</pre>This folder will store all of our view layer React Components. &nbsp;Our Home View will just return some brief info about our site and a list of articles that have been published to our blog.The main parts of this component are a heading that display a title and a site description, and a list that will display Semantic UI components.We also will need to configure this view with some Graphql logic so that it can make requests to Cosmic<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/JacobKnaack/49084a81d0b090fef3bb77221f0b6b02' class='embedly-card'></a>"><a href="https://gist.github.com/JacobKnaack/49084a81d0b090fef3bb77221f0b6b02" class="embedly-card"></a></div> Now we have ye old React Component, &nbsp;that will fetch articles from our content manager (Cosmic) before the component renders and pass those as an array on component props.Apollo also gives us some handy properties from is data object, specifically an error object, and a loading boolean, which we use to conditionally render components, such as loading message when the request is fetching, and an error message when our error object returns a message.<h3>2.3 Creating The Article View</h3>With our list of articles displaying on our home page, we need to Create the view that will display the blog content contained in each article object.Let&#39;s create another file in our views directory:<pre>src/views/article.js</pre>Creating this component is similar to the Home View, but our query is going to include an article identifier from our URL stored on a prop: match which react-router-dom creates for us when we render a component at a Route.<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/JacobKnaack/e364c72020afa545546da9e2734351e5' class='embedly-card'></a>"><a href="https://gist.github.com/JacobKnaack/e364c72020afa545546da9e2734351e5" class="embedly-card"></a></div>This component is much simpler than our Home component, mostly due to the fact that we are just using the Query&nbsp;component wrapper instead of the turning our component into a higher level component using the Graphql component. &nbsp;This gives us direct access to our Graphql directly in our component logic but does not make it available on component props! So take note.For both components I have included some minimal styling objects in the source code, but feel free to use your creativity and change up the styling properties to create your own look and feel.And that&#39;s it! &nbsp;We have built two relatively simple and scalable React components that are configured to two separate url routes. We can control our views easily with react-router-dom and fetch our data sensibly with the power of Apollo / Graphql and Cosmic.<h2>3.0 Deployment</h2>create-react-app comes bundled with some handy deployment scripts if you feel so inclined to make your application available to the world. &nbsp;<h3>3.1 Running the Build Script</h3>If you take a look at the package.json file that we have a script called build. &nbsp;Running this will compile all your project files and bundle them into a static build directory that is ready to deploy to any hosting service.You&#39;ll also notice after the script finishes that you have an option to publish directly to github pages using the serve module. &nbsp;You just need to add a homepage value in package.json and make sure the serve package is installed with either npm or yarn.Follow the link at the end of the build message to learn more about deployment using this method.<h3>3.2 Deploying Using Netlify and Github</h3><a href="https://www.netlify.com/">Netlify</a> provides app building and deployment services and they will give you a free ( if not a little bit verbose ) URL for you to deploy client side code. &nbsp;The process is pretty easy and we can use a github repository to deploy our code continuously when we make changes to our source code.After you create and account / Log in to the Netlify dashboard, there should be a tab called sites.Clicking the sites tab will reveal a list of sites you have deployed on Netlify. From here you have two options:<ol><li>Deploy using your static build directory created using the build script.</li><li>Connect your Netlify account to a git repository and use continuous deployment. &nbsp;This step requires that you commit your code to a git repository.</li></ol>Deploying the static build directory is super simple but will require you to manually build and upload files to Netlify. &nbsp;Simply drag the build directory directly over the area at the bottom of the sites tab from the Netlify Dashboard. &nbsp;This will automatically deploy your site to a url that Netlify will generate. &nbsp;Simple but requires work every time you update your source code.&nbsp;On the far right side there will be a button that reads New site from Git.&nbsp;Selecting this option will walk you through the process of authorizing Netlify to access a code repository. &nbsp;After these steps are finished Netlify will build your site files from a build script you specify and deploy it automatically each time you make a commit &nbsp;to your repo!<h3>Conclusion</h3>Well that&#39;s it for me today. &nbsp;Happy hacking until we meet again :)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>.

Building a Progressive Blog App with Apollo and Cosmic

Documentation?... Documentation. &nbsp;Let&rsquo;s say for a second that you want to create a way to easily publish and read docs, err&hellip; documentation. &nbsp;By the end of this read you will be able to do just that, all with the power of Gatsby
(a static site generator) and Cosmic (an easy to setup and use Content Management System). &nbsp;Grab some coffee, find a comfy chair and let&rsquo;s build something cool.TL:DR<a href="https://cosmicjs.com/apps/gatsby-docs" rel="noopener noreferrer" target="_blank">Gatsby Documentation App Demo</a>&nbsp; <a href="https://github.com/cosmicjs/gatsby-docs-app" rel="noopener noreferrer" target="_blank">Check out the codebase</a>&nbsp; 1.0 - IntroductionWhat is <a href="https://www.gatsbyjs.org/" rel="noopener noreferrer" target="_blank">Gatsby</a>?Gatsby is an easy to use framework for generating static web site files. &nbsp;It comes bundled with all sorts of hotness, like React JS for building web components, and GraphQL for handling our component state without the need to configure something Redux
to handle external data. What about <a href="https://cosmicjs.com/" rel="noopener noreferrer" target="_blank">Cosmic</a>?Cosmic will handle our publishing and data storage. &nbsp;It&rsquo;s easy to set up and easy to implement for apps like this, yet scalable enough to handle more complex projects across larger teams. &nbsp;We will use this to create and store our documentation
content. &nbsp;This will us allowing us to focus on how our users interact with our app, and let Cosmic do all the heavy lifting. Is that all?Well no&hellip; we are going to convert our docs from markdown to html, &nbsp;since that&rsquo;s what web Browsers like. &nbsp;To do this we are going to use a package called <a href="https://play.pokemonshowdown.com/" rel="noopener noreferrer" target="_blank">Showdown</a>, that can handle parsing
and converting markdown to and from HTML. Any Requirements?Oh yeah, you will need to have access to a terminal, a Cosmic account with a<a href="https://cosmicjs.com/getting-started" rel="noopener noreferrer" target="_blank">bucket and a documentation object</a>, and a recent(ish) version of <a href="https://nodejs.org/en/" rel="noopener noreferrer" target="_blank">Node JS</a> installed on your machine in order to install the necessary software to make this app work. &nbsp;I&rsquo;m going to be using yarn to run my build scripts but you can npm if you like. &nbsp;Just remember to choose one(npm or yarn) and stick with it as things can get little hairy when it&rsquo;s time to deploy.Let&rsquo;s Build!! 1.1 - Setting up our Development EnvironmentTo get started we will want to install Gatsby and install our dependencies. &nbsp;Easy peasy. Gatsby uses a handy command line interface (CLI) to build our initial project files. &nbsp;First we will want to install the CLI by installing it globally with npm:<code>$ npm install -g gatsby-cli</code> This gives us access to the `gatsby` command and allows us to initialize our project. &nbsp;Run the following script to create a new directory filled with a project template:<code>$ gatsby new gatsby-docs</code> Wait a second to allow the script to complete and you will notice a new directory created called `gatsby-docs`. &nbsp; Let&rsquo;s see what&rsquo;s inside by changing directories:<code>$ cd gatsby-docs</code> you should see a directory structure similar to this:<pre><code>.
├── node_modules
├── src
├── .gitignore
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── LICENSE
├── package-lock.json
├── package.json
└── README.md</code></pre> Much of this will look familiar if are used to creating Node applications but some of this will be a little new. You should be able to get a development server up and running by executing the start script:<code>$ yarn start</code> After a second you should see a success prompt letting you know that everything has compiled properly and your app is live. Now you can open up your browser pointing to `localhost:8000` and see the compiled output. &nbsp;It should look something very similar to this: <img src="https://cdn-images-1.medium.com/max/1600/1*1B3nvdm2tPsiwQbtyGKseg.png" style="width: 777px;" class="fr-fic fr-dib">Congrats! You have set up a working Gatsby site. But before we dig into what is going on under the covers let&rsquo;s install the rest of our dependencies that will power our app:<code>$ yarn add cosmicjs showdown highlight.js dotenv node-sass gatsby-plugin-sass gatsby-source-graphql</code>Whoa... That&rsquo;s a lot of newly installed packages, but each of these are super useful I swear.<ul><li dir="ltr"><code>cosmicjs</code> will be used to add new content to our app.</li><li dir="ltr"><code>showdown</code> is the text parser I mentioned that will handle markdown and html conversion.</li><li dir="ltr"><code>highlight.js</code> is going to handle our syntax highlighting inside of our converted markdown text.</li><li dir="ltr"><code>dotenv</code> is an environment variable package that will make sure our sensitive tokens and/or runtime environment is configured from a `.env` file</li><li dir="ltr"><code>node-sass</code> and the <code>gatsby-plugin-sass</code> packages will allow to use <code>.scss</code> files to style our components.</li><li dir="ltr"><code>gatsby-source-graphql</code> will allow us to leverage GraphQL queries on external data (ie - use the Cosmic GraphQL api)</li></ul> With all of that business out of the way we can look at our directory and configure our Gatsby source code to run properly. 2.0 - Configuring GatsbyNow we can dig into our directory and make sure Gatsby is configured properly for using the technologies that will scalably and sensibly power our app. The first file we will want to look into is <code>gatsby-config.js</code>. &nbsp;This file is used to configure high level plugins that allow any source code we write to be bundled properly when our static files are built. &nbsp;It also contains a little
bit of metadata that describes our site site to users and can be queried in our React Components. Here we will add our newly installed plugins to the default configuration you see before you. &nbsp;First we just need to add <code>gatsby-plugin-sass</code> to the plugins list, allowing us to import sass files and leverage sass to write sensible styling specs for each component. Next up we will add an object to end of our plugins list for <code>gatsby-source-graphql</code>&nbsp; that will configure our external GraphQL API endpoint to allow us to fetch data from Cosmic. &nbsp;Here&rsquo;s how things should look:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/JacobKnaack/398ea713ec6fc0d23939220d98c0677d.js' class='embedly-card'></a>"><a href="https://gist.github.com/JacobKnaack/398ea713ec6fc0d23939220d98c0677d.js" class="embedly-card"></a></div><div class="fr-embedly " data-original-embed="<a href='' class='embedly-card'></a>"><a href="" class="embedly-card"></a></div> Now we are set to make GraphQL queries to the Cosmic GraphQL API! &nbsp;Next, Let&rsquo;s talk for a second about Gatsby and how things are going to break down. 2.1 Building our app with GatsbyI&rsquo;ve mentioned that Gatsby is a static site generator, but what does that mean? &nbsp;Gatsby takes all the fancy code we create and produces static files that are pre-configured using the config files we specify. &nbsp;By doing so we get increased
performance for sites that may have lots of images, data to be fetched, and other assets that can slow down web applications. Let&rsquo;s now get some source code created. &nbsp;Our site is going to use just two &lsquo;Pages&rsquo;, one that will serve a home page to list the documentation we&#39;ve created, and one for viewing a piece of documentation. &nbsp;But to fetch the content that we are going to display, we are going to use GraphQL, which we have recently configured. &nbsp;We will need to add some variables to our <code>gatsby-node.js</code> file in order to allow our static files to have the necessary parameters to make API calls. Create a .env file and add your Cosmic environment variablesIn your Cosmic Bucket &gt; Basic Settings menu you will see fields for a bucket-slug and read and write keys down at the bottom. &nbsp;Copy all three of these things and add them to a .env file.At your project root, type into your terminal:<code>$ touch .env</code> Now Create three lines:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/JacobKnaack/0ff388ede9da09a338f0e46ff742cb20.js' class='embedly-card'></a>"><a href="https://gist.github.com/JacobKnaack/0ff388ede9da09a338f0e46ff742cb20.js" class="embedly-card"></a></div> We will use these with our dotenv package to allow our src files to access these variables when necessary. Open up <code>gatsby-node.js</code> and add config variables to pagesWe are now going to use Gatsby&rsquo;s built in node API to give each page in our site access to the environment variable we just created. &nbsp;First we will import the variables from our <code>.env</code> file using dotenv, then we will explicitly set each variable in our page&rsquo;s context. Your file should look like this:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/JacobKnaack/e28314ce02035eb4f359c97a0d121d6a.js' class='embedly-card'></a>"><a href="https://gist.github.com/JacobKnaack/e28314ce02035eb4f359c97a0d121d6a.js" class="embedly-card"></a></div> Creating our first pageNow we are going to create our first page that will grab all of the documentation objects and display them at the root of our site, &nbsp;on <code>index.js</code>. &nbsp;First let&rsquo;s create our list by creating a folder in the components directory titled docs - <code>/src/components/docs/</code> and in that folder we will create a file titled <code>index.js</code>.This will be our module that is first displayed when we render our page after fetching our docs. &nbsp;Here is the source code:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/JacobKnaack/ad5e6c1d92a70d42cfe3817d1edc916a.js' class='embedly-card'></a>"><a href="https://gist.github.com/JacobKnaack/ad5e6c1d92a70d42cfe3817d1edc916a.js" class="embedly-card"></a></div> What&#39;s going on here:This page basically runs a big loop over our <code>docs</code>&nbsp; and returns some fancy jsx. &nbsp;We map through the docs array and produce a Link from Gatsby that contains the title, a date, and some content that uses a a description for the piece of
documentation that was published.Feel free to add any <code>.scss</code> files to this directory as well to get a styling that works for you for the given class names. Update the &#39;home&#39; page with our new componentsNow we can open up our home page file at <code>/pages/index.js</code> and import the components we just created and add them to our returned jsx.&nbsp;<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/JacobKnaack/258f38acc6d089ad6ee639dfae3fa87d.js' class='embedly-card'></a>"><a href="https://gist.github.com/JacobKnaack/258f38acc6d089ad6ee639dfae3fa87d.js" class="embedly-card"></a></div>Now any <code>docs</code> created on Cosmic, will appear here on the home page!Notice the exported query at the bottom of the file. &nbsp;It contains two string type variable that will be present because we set the context object in our gatsby-node configuration.With our newly created home page working, let&rsquo;s create our doc view that will display content from the documentation that we post. Creating our doc display pageInstead of adding a new file to the pages directory in Gatsby, we are going to create a `templates` directory and make a template page that we can configure on build, so that each time a doc is created, a new page can be created when we fetch our Docs
from Cosmic.Start by creating a `templates` directory at your project root, and then creating a <code>docPage.js</code> file within.&nbsp;<pre><code>.
├── _templates
|   ├── docPage.js</code></pre>&nbsp;Now add the page template complete with exported query that will fetch a singular doc from Cosmic.<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/JacobKnaack/c1b8fb47ec96989eb370ed1a92af180d.js' class='embedly-card'></a>"><a href="https://gist.github.com/JacobKnaack/c1b8fb47ec96989eb370ed1a92af180d.js" class="embedly-card"></a></div> Nothing will happen with this template until we tell Gatsby that it needs to create a page using this template. We do this so that Gatsby has a chance to fetch our Documentation from Cosmic before it builds the page using the necessary parameters for each GraphQL query at the bottom of <code>docPage.js</code>. &nbsp;We are using static site files after all. Update Gatsby Node to build template pagesLet&rsquo;s go ahead and add an export function to <code>gatsby-node.js</code> so that we are building docPage template from our GraphQL data:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/JacobKnaack/692d2e93d3892ca2f1cd827d2a966a94.js' class='embedly-card'></a>"><a href="https://gist.github.com/JacobKnaack/692d2e93d3892ca2f1cd827d2a966a94.js" class="embedly-card"></a></div> Now when Gatsby creates its pages, ie - the index page will fetch our docs and create a page for each doc that is retrieved and attach all the necessary params to the page Content of each page. &nbsp;This way our template component is rendered and our
GraphQL query should succeed! 3.0 DeploymentLastly we can talk about deployment and about how static sites work. &nbsp;Deploying this bad boy can be a little tricky since this site uses a static build that won&rsquo;t have the necessary pages of newly created docs until the deployment service has
a chance to rebuild. My recommendation is to use <a href="https://www.netlify.com/" rel="noopener noreferrer" target="_blank">netlify</a> and link your source from GitHub or wherever you store your code. &nbsp;From there you can trigger buildhooks in order to rebuild your site whenever certain events happen. &nbsp;Cosmic will allow a post request to be fired off at an endpoint when objects are created, deleted, edited, etc. &nbsp;So you can easily link the two together to make some magic happen. &nbsp;You can also modify the addDoc method on the createDoc component class to make a POST request to the buildhook whenever you successfully add a doc. Anyway, that&rsquo;s all for me folks! Happy hacking.

Blogs by Jacob Knaack

Start building today

Blogs by Jacob Knaack

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

Start building today