<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Jesus Gilbert</title>
    <description>The latest articles on DEV Community by Jesus Gilbert (@jgilbertcastro).</description>
    <link>https://dev.to/jgilbertcastro</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F261701%2Fdad27f2c-26ae-4a2f-954e-a8a5487e4e82.jpeg</url>
      <title>DEV Community: Jesus Gilbert</title>
      <link>https://dev.to/jgilbertcastro</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/jgilbertcastro"/>
    <language>en</language>
    <item>
      <title>🚀 One-Click Talos Omni Deployment: From Zero to Kubernetes in Minutes</title>
      <dc:creator>Jesus Gilbert</dc:creator>
      <pubDate>Tue, 23 Jun 2026 15:21:30 +0000</pubDate>
      <link>https://dev.to/jgilbertcastro/one-click-talos-omni-deployment-from-zero-to-kubernetes-in-minutes-fdc</link>
      <guid>https://dev.to/jgilbertcastro/one-click-talos-omni-deployment-from-zero-to-kubernetes-in-minutes-fdc</guid>
      <description>&lt;h1&gt;
  
  
  One-Click Self-Hosted Talos Omni Deployment with Automatic TLS Trust Configuration
&lt;/h1&gt;

&lt;p&gt;After spending several hours troubleshooting self-hosted Talos Omni deployments, TLS certificate chains, Dex configuration, Trusted Roots, and the dreaded:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;x509: certificate signed by unknown authority
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;I decided to automate the entire process into a single script.&lt;/p&gt;

&lt;p&gt;The script deploys a complete self-hosted Omni environment and automatically handles the certificate trust issues that many people encounter when onboarding Talos nodes.&lt;/p&gt;

&lt;h2&gt;
  
  
  What This Script Does
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Installs and configures Dex&lt;/li&gt;
&lt;li&gt;Deploys Omni&lt;/li&gt;
&lt;li&gt;Generates a self-signed internal CA&lt;/li&gt;
&lt;li&gt;Creates server certificates with the complete certificate chain&lt;/li&gt;
&lt;li&gt;Configures SideroLink&lt;/li&gt;
&lt;li&gt;Generates Trusted Roots configuration&lt;/li&gt;
&lt;li&gt;Creates the &lt;code&gt;talos.config.early&lt;/code&gt; kernel argument&lt;/li&gt;
&lt;li&gt;Produces everything needed for Talos Image Factory&lt;/li&gt;
&lt;li&gt;Works with Proxmox, VMware, bare metal, and cloud VMs&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Why This Exists
&lt;/h2&gt;

&lt;p&gt;Most self-hosted Omni installation guides require multiple manual steps:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Generate certificates&lt;/li&gt;
&lt;li&gt;Configure Dex&lt;/li&gt;
&lt;li&gt;Configure OIDC&lt;/li&gt;
&lt;li&gt;Fix certificate trust issues&lt;/li&gt;
&lt;li&gt;Create Trusted Roots&lt;/li&gt;
&lt;li&gt;Generate custom Talos boot media&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Missing any of these steps can prevent Talos nodes from connecting successfully.&lt;/p&gt;

&lt;p&gt;This script automates the entire workflow from start to finish.&lt;/p&gt;

&lt;h2&gt;
  
  
  Prerequisites
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Linux server&lt;/li&gt;
&lt;li&gt;Docker installed and running&lt;/li&gt;
&lt;li&gt;Internet access&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Required Ports
&lt;/h3&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Port&lt;/th&gt;
&lt;th&gt;Service&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;443&lt;/td&gt;
&lt;td&gt;Omni UI&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;5556&lt;/td&gt;
&lt;td&gt;Dex&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;8090&lt;/td&gt;
&lt;td&gt;SideroLink API&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;8091&lt;/td&gt;
&lt;td&gt;Event Sink&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;8100&lt;/td&gt;
&lt;td&gt;Kubernetes Proxy&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;50180/UDP&lt;/td&gt;
&lt;td&gt;WireGuard&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h2&gt;
  
  
  Quick Start
&lt;/h2&gt;

&lt;p&gt;Make the script executable:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;chmod&lt;/span&gt; +x install.sh
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;(Optional) Customize your environment:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;export &lt;/span&gt;&lt;span class="nv"&gt;OMNI_IP&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&amp;lt;YOUR_OMNI_SERVER_IP&amp;gt;
&lt;span class="nb"&gt;export &lt;/span&gt;&lt;span class="nv"&gt;ADMIN_EMAIL&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&amp;lt;YOUR_ADMIN_EMAIL&amp;gt;

./install.sh
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;export &lt;/span&gt;&lt;span class="nv"&gt;OMNI_IP&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;192.168.1.100
&lt;span class="nb"&gt;export &lt;/span&gt;&lt;span class="nv"&gt;ADMIN_EMAIL&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;admin@example.com

./install.sh
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Variables
&lt;/h2&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Variable&lt;/th&gt;
&lt;th&gt;Description&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;OMNI_IP&lt;/td&gt;
&lt;td&gt;IP address or hostname of the Omni server&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;ADMIN_EMAIL&lt;/td&gt;
&lt;td&gt;Administrator email used for Omni login&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;If not provided, the script uses built-in defaults.&lt;/p&gt;

&lt;h2&gt;
  
  
  Login Credentials
&lt;/h2&gt;

&lt;p&gt;The installer automatically creates an administrator account in Dex.&lt;/p&gt;

&lt;p&gt;Use the email configured in:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;export &lt;/span&gt;&lt;span class="nv"&gt;ADMIN_EMAIL&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&amp;lt;YOUR_ADMIN_EMAIL&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;to authenticate.&lt;/p&gt;

&lt;h3&gt;
  
  
  Default Password
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Admin123!
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Changing the Default Password
&lt;/h2&gt;

&lt;p&gt;If you prefer a different password, generate a new bcrypt hash before running the installer:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;docker run &lt;span class="nt"&gt;--rm&lt;/span&gt; &lt;span class="nt"&gt;-it&lt;/span&gt; httpd:2.4-alpine htpasswd &lt;span class="nt"&gt;-BnC&lt;/span&gt; 15 admin
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You will be prompted to enter the password twice.&lt;/p&gt;

&lt;p&gt;Example output:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;admin:$2y$15$XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Copy only the hash portion after:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;admin:
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Open the script and search for:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nv"&gt;DEX_PASSWORD_HASH&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Replace the existing hash with your newly generated one.&lt;/p&gt;

&lt;p&gt;In the current version of the script, this variable is located near the beginning of the file (around line 46).&lt;/p&gt;

&lt;h2&gt;
  
  
  What Happens After Installation?
&lt;/h2&gt;

&lt;p&gt;Once the installation completes:&lt;/p&gt;

&lt;p&gt;Open Omni:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;https://YOUR_OMNI_IP
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Log in using:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Email: ADMIN_EMAIL
Password: Admin123!
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;(or your custom password)&lt;/p&gt;

&lt;p&gt;Click:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Copy Kernel Parameters
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Open Talos Image Factory:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;https://factory.talos.dev
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Build a Talos ISO using:&lt;/p&gt;

&lt;h3&gt;
  
  
  Recommended Settings
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Platform&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Metal
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Architecture&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;amd64
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Extensions&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;siderolabs/qemu-guest-agent
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;(for Proxmox users)&lt;/p&gt;

&lt;p&gt;Paste the following into:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Extra kernel command line arguments
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;contents of talos-config-early.arg&amp;gt;
&amp;lt;Omni Kernel Parameters&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Download the ISO and boot your nodes.&lt;/p&gt;

&lt;h2&gt;
  
  
  Result
&lt;/h2&gt;

&lt;p&gt;After booting:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Nodes automatically join Omni&lt;/li&gt;
&lt;li&gt;SideroLink connects successfully&lt;/li&gt;
&lt;li&gt;No TLS trust errors&lt;/li&gt;
&lt;li&gt;No &lt;code&gt;x509: certificate signed by unknown authority&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Cluster creation works immediately&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Tested On
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Talos 1.13.x&lt;/li&gt;
&lt;li&gt;Omni Self-Hosted&lt;/li&gt;
&lt;li&gt;Ubuntu Server&lt;/li&gt;
&lt;li&gt;Docker&lt;/li&gt;
&lt;li&gt;Proxmox VE&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Download
&lt;/h2&gt;

&lt;p&gt;You can download the script here:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;a href="https://github.com/jgilbertcastro/talosomni/blob/main/install.sh" rel="noopener noreferrer"&gt;https://github.com/jgilbertcastro/talosomni/blob/main/install.sh&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Feedback
&lt;/h2&gt;

&lt;p&gt;Feedback, bug reports, and pull requests are welcome.&lt;/p&gt;

&lt;p&gt;Hopefully this saves someone else from spending hours debugging TLS certificate chains, Trusted Roots, and Talos onboarding. 😅&lt;/p&gt;

</description>
      <category>tutorial</category>
      <category>homelab</category>
      <category>kubernetes</category>
      <category>linux</category>
    </item>
    <item>
      <title>Build a simple blog with GraphQL, Node.js, SQLite and (VUE, Angular Or ReactJS) - Part 2</title>
      <dc:creator>Jesus Gilbert</dc:creator>
      <pubDate>Fri, 15 Nov 2019 16:17:09 +0000</pubDate>
      <link>https://dev.to/jgilbertcastro/build-a-simple-blog-with-graphql-node-js-sqlite-and-vue-angular-or-reactjs-part-2-201j</link>
      <guid>https://dev.to/jgilbertcastro/build-a-simple-blog-with-graphql-node-js-sqlite-and-vue-angular-or-reactjs-part-2-201j</guid>
      <description>&lt;h2&gt;
  
  
  What we gonna do?
&lt;/h2&gt;

&lt;p&gt;In this tutorial, we will show you how to create a simple client with &lt;strong&gt;VUE&lt;/strong&gt;, to connect to graphql api we created in &lt;a href="https://dev.to/jgilbertcastro/build-a-simple-blog-with-graphql-node-js-sqlite-and-vue-angular-or-reactjs-3923"&gt;this previous tutorial&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Prerequisites&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Knowledge of JavaScript and Vue.&lt;/li&gt;
&lt;li&gt;You must have seen the previous tutorial: &lt;a href="https://dev.to/jgilbertcastro/build-a-simple-blog-with-graphql-node-js-sqlite-and-vue-angular-or-reactjs-3923"&gt;this previous tutorial&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Time to play the game! Hahaha
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Set up the project on previous directory created, run this on your favorite terminal:

&lt;ul&gt;
&lt;li&gt;&lt;code&gt;cd micro-blog&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;mkdir micro-blog-clients&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;cd micro-blog-clients&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;vue create vue-micro-blog-client&lt;br&gt;
&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;cd vue-micro-blog-client&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;li&gt;Install the following dependencies:

&lt;ul&gt;
&lt;li&gt;&lt;code&gt;npm install --save vue-apollo graphql apollo-boost moment&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Configurate Apollo Client&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Apollo Client&lt;/strong&gt; is a complete state management library for JavaScript apps. Simply write a GraphQL query, and Apollo Client will take care of requesting and caching your data, as well as updating your UI. &lt;a href="https://www.apollographql.com/docs/react/"&gt;Read More&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Config Apollo Client

&lt;ul&gt;
&lt;li&gt;Open &lt;code&gt;&lt;em&gt;src/main.js&lt;/em&gt;&lt;/code&gt; and paste this code:&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;
&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;em&gt;Here we define const apolloClient to set graphql api url and add vueApollo plugin to global method&lt;/em&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Consuming micro-blog API

&lt;ul&gt;
&lt;li&gt;Edit Home.vue in &lt;code&gt;src/views&lt;/code&gt; and paste this code:
&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;
&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;em&gt;In this file we write a code to get post like a select query but with gql query&lt;/em&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Add new File AddPost.vue in &lt;code&gt;src/views&lt;/code&gt; and paste this:
&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;em&gt;Then we create a method to call by save button to add new post and another to format the create date. As you can notice here we define the mutate to call mutation to create a post and finally the method to clean the model&lt;/em&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;Edit &lt;code&gt;src/router/index.js&lt;/code&gt; with this:&lt;br&gt;
&lt;/p&gt;
&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;edit &lt;code&gt;src/App.vue&lt;/code&gt; and edit router line with this:&lt;br&gt;
&lt;/p&gt;
&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Testing!
&lt;/h2&gt;

&lt;p&gt;&lt;a href="http://www.youtube.com/watch?v=f2lINRlc9DM&amp;amp;feature=youtu.be"&gt;see video&lt;/a&gt;&lt;/p&gt;

</description>
      <category>vue</category>
      <category>javascript</category>
      <category>node</category>
      <category>graphql</category>
    </item>
    <item>
      <title>Build a simple blog with GraphQL, Node.js, SQLite and (VUE, Angular Or ReactJS)</title>
      <dc:creator>Jesus Gilbert</dc:creator>
      <pubDate>Thu, 07 Nov 2019 17:27:08 +0000</pubDate>
      <link>https://dev.to/jgilbertcastro/build-a-simple-blog-with-graphql-node-js-sqlite-and-vue-angular-or-reactjs-3923</link>
      <guid>https://dev.to/jgilbertcastro/build-a-simple-blog-with-graphql-node-js-sqlite-and-vue-angular-or-reactjs-3923</guid>
      <description>&lt;h2&gt;
  
  
  What gonna we do?
&lt;/h2&gt;

&lt;p&gt;In this tutorial, we will show you how to create a simple and powerful &lt;strong&gt;Blog&lt;/strong&gt; with (&lt;strong&gt;VUE&lt;/strong&gt;, &lt;strong&gt;Angular&lt;/strong&gt; and &lt;strong&gt;React&lt;/strong&gt;), &lt;strong&gt;GraphQL&lt;/strong&gt;, &lt;strong&gt;Node.js&lt;/strong&gt; and &lt;strong&gt;SQLite&lt;/strong&gt;. &lt;/p&gt;

&lt;h4&gt;
  
  
  We will divide this tutorial as follows:
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;Part 1: Build a web api with GraphQL, Node.js and SQLite.&lt;/li&gt;
&lt;li&gt;Part 2: Build a Client in VUE.&lt;/li&gt;
&lt;li&gt;Part 3: Build a Client in Angular.&lt;/li&gt;
&lt;li&gt;Part 4: Build a Client in ReactJS.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Prerequisites
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Node.js and JavaScript knowledge&lt;/li&gt;
&lt;li&gt;NPM Command&lt;/li&gt;
&lt;li&gt;knowledge of VUE,Angular or ReactJS&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  What is GraphQL?
&lt;/h2&gt;

&lt;p&gt;According to &lt;a href="https://graphql.org/learn:" rel="noopener noreferrer"&gt;https://graphql.org/learn:&lt;/a&gt; &lt;em&gt;GraphQL is a query language for your API, and a server-side runtime for executing queries by using a type system you define for your data. GraphQL isn't tied to any specific database or storage engine and is instead backed by your existing code and data&lt;/em&gt;                          &lt;/p&gt;

&lt;h2&gt;
  
  
  Well let's start the game
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Set up the project, run this on your favorite terminal:

&lt;ul&gt;
&lt;li&gt;&lt;code&gt;mkdir micro-blog&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;mkdir micro-blog-api&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;cd micro-blog-api&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;npm init -y &lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;Install the following dependencies:

&lt;ul&gt;
&lt;li&gt;&lt;code&gt;npm install  graphql express --save&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;npm install  express-graphql --save&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;npm install  sqlite3  --save&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;Create an &lt;strong&gt;index.js&lt;/strong&gt; in the root to configurate GraphQL.&lt;/li&gt;

&lt;li&gt;Paste this code on &lt;strong&gt;index.js&lt;/strong&gt;:

&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;


&lt;/li&gt;

&lt;li&gt;Create a &lt;strong&gt;graphql&lt;/strong&gt; folder and then create a &lt;strong&gt;post&lt;/strong&gt; folder inside
-Create a post.js inside of &lt;strong&gt;post&lt;/strong&gt; folder.&lt;/li&gt;

&lt;li&gt;Paste this code on post.js

&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;


&lt;/li&gt;

&lt;li&gt;Update the package.json file to add de following script to start the api server

&lt;ul&gt;
&lt;li&gt;&lt;code&gt;"start": "node index.js"&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;Then on console or terminal run de server:

&lt;ul&gt;
&lt;li&gt;&lt;code&gt;npm run start&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;Then if all is correct open your browser and go to localhost:4000/graphql and you gonna see your graphql server run:
&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Ftxki3olyv9gf0i6ykoqa.PNG" alt="Alt Text"&gt;
&lt;/li&gt;

&lt;li&gt;If you want select all post run this

&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;


&lt;/li&gt;

&lt;li&gt;If you want to create

&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;


&lt;/li&gt;

&lt;li&gt;If you want to update

&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;


&lt;/li&gt;

&lt;li&gt;If you want to delete

&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;


&lt;/li&gt;

&lt;/ul&gt;

&lt;p&gt;&lt;em&gt;This is all, if you want to clone this project go to github:&lt;/em&gt; &lt;a href="https://github.com/jgilbertcastro/micro-blog" rel="noopener noreferrer"&gt;https://github.com/jgilbertcastro/micro-blog&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;In the &lt;strong&gt;part 2&lt;/strong&gt; i'm gonna show you how to build a client for consume this API.&lt;/p&gt;

</description>
      <category>graphql</category>
      <category>node</category>
      <category>javascript</category>
      <category>sql</category>
    </item>
    <item>
      <title>Deploying an exiting VUE App on Netlify</title>
      <dc:creator>Jesus Gilbert</dc:creator>
      <pubDate>Fri, 01 Nov 2019 01:56:53 +0000</pubDate>
      <link>https://dev.to/jgilbertcastro/deploying-an-exiting-vue-app-on-netlify-2c64</link>
      <guid>https://dev.to/jgilbertcastro/deploying-an-exiting-vue-app-on-netlify-2c64</guid>
      <description>&lt;p&gt;&lt;em&gt;In this tutorial I will show you how to make a deployment of your VUE app in Netifly so you can test or share it.&lt;/em&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  &lt;strong&gt;Step 1: Create a VUE app&lt;/strong&gt;
&lt;/h1&gt;

&lt;p&gt;You must have knowledge of how to use &lt;strong&gt;NPM&lt;/strong&gt; or &lt;strong&gt;YARN&lt;/strong&gt; since we will use the build and &lt;strong&gt;DIST&lt;/strong&gt; folder to configure Netifly. I will assume that you already have an app created.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--IAIX9Rll--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/51iv5zxqm90vktchzlul.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--IAIX9Rll--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/51iv5zxqm90vktchzlul.png" alt="Alt Text" width="212" height="300"&gt;&lt;/a&gt;&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--wCuZ3vwh--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/egu4mgdy9z9eelxyeird.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--wCuZ3vwh--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/egu4mgdy9z9eelxyeird.png" alt="Alt Text" width="295" height="92"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  &lt;strong&gt;Step 2: Push your app to GitHub, GitLab Or Bitbucket&lt;/strong&gt;
&lt;/h1&gt;

&lt;p&gt;For this example I will use GitHub&lt;/p&gt;

&lt;p&gt;Create an account or authenticate with GitHub on Netlify.&lt;br&gt;
 Click on “New site from Git on Netifly”.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--OlNZwmvu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/7yn2df5khzprq9h70x3y.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--OlNZwmvu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/7yn2df5khzprq9h70x3y.png" alt="Alt Text" width="880" height="230"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Select GitHub or your favorite.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--QEcwUHNE--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/q5byv0yro8sqyvxjxyvw.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--QEcwUHNE--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/q5byv0yro8sqyvxjxyvw.png" alt="Alt Text" width="880" height="409"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Then you will have to choose the repository (s) so that they have &lt;br&gt;
 permission to be visible on Netifly.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--J5bsJe3N--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/ndlaxscn1bqv7wwusvjt.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--J5bsJe3N--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/ndlaxscn1bqv7wwusvjt.png" alt="Alt Text" width="880" height="422"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Next you will have to choose the branch you want to publish and define &lt;br&gt;
 the command to build and the publication folder as specified in the &lt;br&gt;
 first step and click on “Deploy Site”.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--h09HBdTC--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/bpu7mbk5r2k5vvhynyrb.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--h09HBdTC--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/bpu7mbk5r2k5vvhynyrb.png" alt="Alt Text" width="596" height="649"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Also, you will see the first step is running “Deploying site”, if you &lt;br&gt;
 want to see the terminal click on it.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--pk1iD79p--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/0w0b358wmfgwdjkgh8vn.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--pk1iD79p--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/0w0b358wmfgwdjkgh8vn.png" alt="Alt Text" width="880" height="402"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;When this finish the next step is “set up a custom domain” if you want!.&lt;br&gt;
 Finally, you can see at the top the self-generated name of your app and &lt;br&gt;
 the site for testing.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--t_upKqIV--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/u68tkveopuxfg553cycf.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--t_upKqIV--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/u68tkveopuxfg553cycf.png" alt="Alt Text" width="880" height="481"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Ready your app is flying on Netifly&lt;/em&gt;&lt;/p&gt;

</description>
      <category>vue</category>
      <category>javascript</category>
      <category>npm</category>
      <category>node</category>
    </item>
  </channel>
</rss>
