<?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>Forem: Vitor Monteiro</title>
    <description>The latest articles on Forem by Vitor Monteiro (@bitoiu).</description>
    <link>https://forem.com/bitoiu</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.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F165796%2F7e2e7edf-7b61-4ae1-ba12-ce389920cb2c.jpeg</url>
      <title>Forem: Vitor Monteiro</title>
      <link>https://forem.com/bitoiu</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/bitoiu"/>
    <language>en</language>
    <item>
      <title>Setup Graylog on Synology DSM 7.x with Docker for UniFi logs</title>
      <dc:creator>Vitor Monteiro</dc:creator>
      <pubDate>Fri, 20 Jan 2023 16:20:14 +0000</pubDate>
      <link>https://forem.com/bitoiu/setup-graylog-on-synology-dsm-7x-with-docker-for-unifi-logs-35h6</link>
      <guid>https://forem.com/bitoiu/setup-graylog-on-synology-dsm-7x-with-docker-for-unifi-logs-35h6</guid>
      <description>&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3ntfp5x76znn7ifln3fx.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3ntfp5x76znn7ifln3fx.jpg" alt="graylog-ui" width="800" height="350"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;If you're just looking for a functional &lt;code&gt;docker.compose.yml&lt;/code&gt; that works on Synology DSM 7, you can find it here.&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;I recently encountered some issues with my UniFi devices and attempted to review the logs for troubleshooting. However, I found that the UniFi OS lacks efficient log management capabilities. With this in mind, I recalled that &lt;a href="(https://www.youtube.com/@LAWRENCESYSTEMS)"&gt;Lawrence Systems&lt;/a&gt; utilizes &lt;a href="https://www.youtube.com/watch?v=rtfj6W5X0YA" rel="noopener noreferrer"&gt;Graylog for indexing and reading UniFi logs&lt;/a&gt;, so I set out to do the same myself.&lt;/p&gt;

&lt;p&gt;I run most of my shared services on my Synology NAS that's running DSM 7. To ensure reliability and ease of restoration in case of a data loss, I have invested time in running all my services via &lt;code&gt;docker-compose&lt;/code&gt; and regularly backup all my service configurations. While adding Graylog to my setup through this method should have been relatively simple, the particular context of DSM and my specific NAS created some complications.&lt;/p&gt;

&lt;p&gt;So how hard can it be to just add a few more lines to the &lt;code&gt;docker-compose.yml&lt;/code&gt; file and spin up Graylog for all my log ingestion needs? Not hard, but troublesome in the particular context of DSM and your particular NAS...&lt;/p&gt;

&lt;h1&gt;
  
  
  Setup Overview
&lt;/h1&gt;

&lt;p&gt;This is my target setup:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Run Graylog's most recent version as a shared service in my NAS&lt;/li&gt;
&lt;li&gt;Use &lt;code&gt;docker&lt;/code&gt; and &lt;code&gt;docker-compose&lt;/code&gt; to define all required services&lt;/li&gt;
&lt;li&gt;Forward logs from my UniFi controller to Graylog&lt;/li&gt;
&lt;li&gt;Consume those logs via any internal client in my network&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgoyc6n3gbrqo04mvxaw2.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgoyc6n3gbrqo04mvxaw2.jpg" alt="graylog-nas-docker-dsm7-setup-diagram" width="800" height="429"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  Issues running vanilla configuration on DSM 7
&lt;/h1&gt;

&lt;p&gt;When I was looking for official docs on the matter I found two links which give you slightly different instructions:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://go2docs.graylog.org/5-0/downloading_and_installing_graylog/docker_installation.htm#example-version-3" rel="noopener noreferrer"&gt;Official docs&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/Graylog2/docker-compose/blob/main/open-core/docker-compose.yml" rel="noopener noreferrer"&gt;Official GitHub repo&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;They differ in some aspects, but ultimately, as I tried to run and fix the provided &lt;code&gt;docker-compose.yml&lt;/code&gt; for DSM 7, I started encountering some issues 👇.&lt;/p&gt;

&lt;h2&gt;
  
  
  MongoDB 5 requires AVX Support on the NAS CPU
&lt;/h2&gt;



&lt;p&gt;&lt;code&gt;WARNING: MongoDB 5.0+ requires a CPU with AVX support, and your current system does not appear to have that!&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;So what exactly is AVX? 🤔&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;Advanced Vector Extensions (AVX) are extensions to the x86 instruction set architecture for microprocessors from Intel and Advanced Micro Devices (AMD). They were proposed by Intel in March 2008 and first supported by Intel with the Sandy Bridge[1] processor shipping in Q1 2011 and later by AMD with the Bulldozer[2] processor shipping in Q3 2011. AVX provides new features, new instructions and a new coding scheme. - &lt;a href="https://en.wikipedia.org/wiki/Advanced_Vector_Extensions" rel="noopener noreferrer"&gt;Wikipedia&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;It &lt;a href="https://www.reddit.com/r/synology/comments/t88cs7/avx_support/hzoivno/" rel="noopener noreferrer"&gt;seems&lt;/a&gt; this is not a thing in Celeron CPUs and as such support on Synology NAS will be reduced, especially for the home and semi-pro variants of their products. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;✅ Solution:&lt;/strong&gt; Downgrade MongoDB to latest 4.x which doesn't require AVX support.&lt;/p&gt;

&lt;h2&gt;
  
  
  Graylog 5 requires MongoDB 5
&lt;/h2&gt;



&lt;p&gt;&lt;code&gt;org.graylog2.bootstrap.preflight.PreflightCheckException: You're running MongoDB 4.4.18 but Graylog requires at least MongoDB 5.0.0. Please upgrade.&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;As an end-user who primarily wants to ingest logs into Graylog and be able to query them, I was not overly concerned with this downgrade.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;✅ Solution:&lt;/strong&gt; Downgrade Graylog to latest 4.x which doesn't require MongoDB 5.x&lt;/p&gt;

&lt;h2&gt;
  
  
  Incorrect mapping of elasticsearch folder
&lt;/h2&gt;

&lt;p&gt;This is the issue that really got me. When playing with &lt;code&gt;docker&lt;/code&gt; every time I have path access issues it's either the user I'm defining lacking permissions of the local folder I'm mapping simply doesn't exist. While troubleshooting this, I went nuts trying to find why docker didn't have access to the folder in question, to the point I gave up. After a day or so I picked up this project again, and then I found a Stackoverflow post suggesting to change the path on the docker image itself:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://stackoverflow.com/a/71487266/1174076" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frwz38bke5wa3slp3iwpm.jpg" alt="stackoverflow-post" width="763" height="286"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Solution ✅ :&lt;/strong&gt; Change the &lt;code&gt;elasticsearch&lt;/code&gt; internal path from &lt;code&gt;/usr/share/elasticsearch/data&lt;/code&gt; to &lt;code&gt;/var/lib/elasticsearch/data&lt;/code&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Graylog not able to write files in the mapped volume
&lt;/h2&gt;

&lt;p&gt;Unfortunately, this is an issue for which I do not have a solution on DSM. As it stands, &lt;code&gt;graylog&lt;/code&gt; doesn't use the &lt;code&gt;root&lt;/code&gt; user in the container, so it creates a &lt;code&gt;user:group&lt;/code&gt; &lt;code&gt;1100:1100&lt;/code&gt;. I've read plenty of solutions to just &lt;code&gt;chown&lt;/code&gt; the folder to that &lt;code&gt;user:group&lt;/code&gt; but this didn't solve it.&lt;/p&gt;

&lt;p&gt;I then tried to create a group and user on DSM with &lt;code&gt;addgroup&lt;/code&gt;, but then I found &lt;strong&gt;that DSM does not allow you to create users and groups with specific ids&lt;/strong&gt;. I went to the trouble of trying to create some of the files that graylog was trying to generate like the &lt;code&gt;graylog.conf&lt;/code&gt;, but as I was doing that I've figured this will be a non-ending problem.&lt;/p&gt;


&lt;div class="ltag_github-liquid-tag"&gt;
  &lt;h1&gt;
    &lt;a href="https://github.com/Graylog2/graylog2-server/issues/2155" rel="noopener noreferrer"&gt;
      &lt;img class="github-logo" alt="GitHub logo" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fassets.dev.to%2Fassets%2Fgithub-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg"&gt;
      &lt;span class="issue-title"&gt;
        ERROR: Unable to access file /usr/share/graylog/data/journal/graylog2-committed-read-offset: Permission denied
      &lt;/span&gt;
      &lt;span class="issue-number"&gt;#2155&lt;/span&gt;
    &lt;/a&gt;
  &lt;/h1&gt;
  &lt;div class="github-thread"&gt;
    &lt;div class="timeline-comment-header"&gt;
      &lt;a href="https://github.com/woody3549" rel="noopener noreferrer"&gt;
        &lt;img class="github-liquid-tag-img" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F7644129%3Fv%3D4" alt="woody3549 avatar"&gt;
      &lt;/a&gt;
      &lt;div class="timeline-comment-header-text"&gt;
        &lt;strong&gt;
          &lt;a href="https://github.com/woody3549" rel="noopener noreferrer"&gt;woody3549&lt;/a&gt;
        &lt;/strong&gt; posted on &lt;a href="https://github.com/Graylog2/graylog2-server/issues/2155" rel="noopener noreferrer"&gt;&lt;time&gt;Apr 28, 2016&lt;/time&gt;&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="ltag-github-body"&gt;
      &lt;h3&gt;
&lt;span class="octicon octicon-link"&gt;&lt;/span&gt;Problem description&lt;/h3&gt;
&lt;p&gt;ERROR: Unable to access file /usr/share/graylog/data/journal/graylog2-committed-read-offset: Permission denied&lt;/p&gt;
&lt;h3&gt;
&lt;span class="octicon octicon-link"&gt;&lt;/span&gt;Steps to reproduce the problem&lt;/h3&gt;
&lt;p&gt;While doing a docker-compose up
Graylog server is stopping with the above error&lt;/p&gt;
&lt;p&gt;Here is the docker-compose file&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;mongo:
  image: "mongo:3"
  volumes:
    - /graylog/data/mongo:/data/db
elasticsearch:
  image: "elasticsearch:2"
  command: "elasticsearch -Des.cluster.name='graylog'"
  volumes:
    - /graylog/data/elasticsearch:/usr/share/elasticsearch/data
graylog:
  image: graylog2/server:2.0.0-rc.1-1
  volumes:
    - /graylog/data/journal:/usr/share/graylog/data/journal
    - /graylog/config:/usr/share/graylog/data/config
  environment:
    GRAYLOG_PASSWORD_SECRET: somepasswordpepper
    GRAYLOG_ROOT_PASSWORD_SHA2: 8c6976e5b5410415bde908bd4dee15dfb167a9c873fc4bb8a81f6f2ab448a918
    GRAYLOG_REST_TRANSPORT_URI: http://127.0.0.1:12900

  links:
    - mongo:mongo
    - elasticsearch:elasticsearch
  ports:
    - "9000:9000"
    - "12900:12900"
&lt;/code&gt;&lt;/pre&gt;
&lt;h3&gt;
&lt;span class="octicon octicon-link"&gt;&lt;/span&gt;Environment&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;Graylog Version: 2&lt;/li&gt;
&lt;li&gt;Elasticsearch Version:2&lt;/li&gt;
&lt;li&gt;MongoDB Version: 3&lt;/li&gt;
&lt;li&gt;Operating System: CentOS 7&lt;/li&gt;
&lt;li&gt;Browser version:&lt;/li&gt;
&lt;/ul&gt;

    &lt;/div&gt;
    &lt;div class="gh-btn-container"&gt;&lt;a class="gh-btn" href="https://github.com/Graylog2/graylog2-server/issues/2155" rel="noopener noreferrer"&gt;View on GitHub&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;


&lt;h1&gt;
  
  
  Working docker file
&lt;/h1&gt;

&lt;p&gt;As it is, I've failed to setup a persistent configuration for graylog on DSM. If anyone has solved this please let me know in the comments. The docker file you see below will use volatile storage, so you'll loose your logs and configurations upon a single container stop.&lt;/p&gt;


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


&lt;h1&gt;
  
  
  Setting up a new input on Graylog
&lt;/h1&gt;

&lt;p&gt;After Graylog is running, and you login via &lt;code&gt;http://hostname:9000&lt;/code&gt;, you'll be alerted there are no inputs set. Navigate to &lt;code&gt;System -&amp;gt; Inputs&lt;/code&gt;:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvz0itnuyzx0071349ok0.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvz0itnuyzx0071349ok0.jpg" alt="system-inputs-menu" width="800" height="523"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;On the Inputs screen, find the dropdown with &lt;code&gt;Select Input&lt;/code&gt; and pick &lt;code&gt;Syslog UDP&lt;/code&gt;:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fo2r6iieup7s1ivw45vq4.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fo2r6iieup7s1ivw45vq4.jpg" alt="syslog-udp-input" width="800" height="353"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Give it whatever name you'd like. The input is pretty much ready to go, with the exception of the default port. Change it from &lt;code&gt;514&lt;/code&gt; to &lt;code&gt;1514&lt;/code&gt;:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzgijcj99x8jtmhrw2w2y.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzgijcj99x8jtmhrw2w2y.jpg" alt="Image description" width="610" height="1195"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This is it on the Graylog side, lets go to the Unifi controller to forward the logs.&lt;/p&gt;

&lt;h1&gt;
  
  
  Setting up log forwarding on UniFi controller
&lt;/h1&gt;

&lt;p&gt;When I say UniFi controller, I mean any of their controller products: CloudKey, UniFi Dream Router or UniFi Dream Machine. I'm personally a CloudKey user.&lt;/p&gt;

&lt;p&gt;Go into &lt;code&gt;Network -&amp;gt; Settings&lt;/code&gt; and expand support, until you see this block. Tick the &lt;code&gt;Syslog&lt;/code&gt; checkbox, and fill in your NAS hostname, as well as the port &lt;code&gt;1514&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2hvl9ewdiotfqwjn62hw.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2hvl9ewdiotfqwjn62hw.jpg" alt="unifi-log-fw" width="800" height="413"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  Checking our logs on Graylog
&lt;/h1&gt;

&lt;p&gt;If everything was configured properly you should see your UniFi logs on graylog. If you have any comments and improvements for the post, I'm always looking for advice and guidance 🙇&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3ntfp5x76znn7ifln3fx.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3ntfp5x76znn7ifln3fx.jpg" alt="graylog-ui" width="800" height="350"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>graylog</category>
      <category>docker</category>
      <category>synology</category>
      <category>unifi</category>
    </item>
    <item>
      <title>GitHub Codespaces: Developing and testing React Native apps just with Expo and Codespaces</title>
      <dc:creator>Vitor Monteiro</dc:creator>
      <pubDate>Thu, 13 Aug 2020 08:04:39 +0000</pubDate>
      <link>https://forem.com/github/github-codespaces-developing-and-testing-react-native-apps-just-with-expo-and-codespaces-39g</link>
      <guid>https://forem.com/github/github-codespaces-developing-and-testing-react-native-apps-just-with-expo-and-codespaces-39g</guid>
      <description>&lt;p&gt;I'm personally really excited about &lt;a href="https://github.com/features/codespaces" rel="noopener noreferrer"&gt;GitHub Codespaces&lt;/a&gt;. This is coming from someone who's always been passionate about their IDEs and local setup. This past weekend I was hacking some really amateurish React Native using Expo.io. I decided I was tired of locally setting up IDEs on &lt;em&gt;every&lt;/em&gt; new or formatted device. It's 2020, I should be able to get my dev environment completely setup in the cloud, so I can jump to action on any device, anywhere with the same user experience.&lt;/p&gt;

&lt;p&gt;What I'm about to show, especially for folks experienced with Expo and React Native, is nothing special or new. Expo is an amazing framework and and most of the magic of this tutorial is due to those tools. Having said that, I'm still blown away with the fact that to run a test or do an experiment on a native mobile app, I just need to launch a codespace, run expo and see the changes live on my phone &lt;strong&gt;without even cloning a repo&lt;/strong&gt;. &lt;/p&gt;

&lt;p&gt;This 30 sec video will explain what this guide is all about:&lt;/p&gt;

&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/BgBjy-w57l0"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;h2&gt;
  
  
  What do you need before you get started?
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;A &lt;a href="//www.github.com"&gt;GitHub&lt;/a&gt; account (I guess everyone has one of 
those), otherwise go create one;&lt;/li&gt;
&lt;li&gt;Access to the &lt;a href="https://github.com/features/codespaces/" rel="noopener noreferrer"&gt;GitHub Codespaces beta&lt;/a&gt;. If you don't have access to the GitHub Codespaces beta, you can &lt;a href="https://github.com/features/codespaces/" rel="noopener noreferrer"&gt;request early access&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;An &lt;a href="//www.expo.io"&gt;Expo.io&lt;/a&gt; account and &lt;a href="https://expo.io/tools" rel="noopener noreferrer"&gt;Expo installed on your mobile device&lt;/a&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;If you don't have access to the &lt;a href="https://github.com/features/codespaces/" rel="noopener noreferrer"&gt;GitHub Codespaces beta&lt;/a&gt;, I still think it's worthwhile checking the rest of the tutorial for when it becomes available.&lt;/p&gt;

&lt;h2&gt;
  
  
  1. Jumping straight into a Codespace 🚀
&lt;/h2&gt;

&lt;p&gt;Usually guides like this start with &lt;code&gt;Clone this repository&lt;/code&gt; or a screenshot of how to fork a project. But we're talking about Codespaces and with it, you can launch any project, not just yours, directly on a new codespace. Go straight to &lt;a href="https://github.com/bitoiu/expo-start-octocat" rel="noopener noreferrer"&gt;https://github.com/bitoiu/expo-start-octocat&lt;/a&gt; and click &lt;code&gt;Code -&amp;gt; Open with Codespaces&lt;/code&gt;:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fuser-images.githubusercontent.com%2F1192590%2F89733207-cd4d0280-da4b-11ea-8631-10d722f33dc9.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fuser-images.githubusercontent.com%2F1192590%2F89733207-cd4d0280-da4b-11ea-8631-10d722f33dc9.png" alt="open-with-codespaces"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Not long after you click that, you'll see your codespace ready for code:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fuser-images.githubusercontent.com%2F1192590%2F89734794-36d20e80-da56-11ea-97c3-a1841391c58f.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fuser-images.githubusercontent.com%2F1192590%2F89734794-36d20e80-da56-11ea-97c3-a1841391c58f.png" alt="codespace-ready"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  2. Installing the expo-cli
&lt;/h2&gt;

&lt;p&gt;The expo client is doing the heavy lifting in this demo, so we'll need to install it by getting a Codespaces terminal and up running first. Open a terminal with &lt;code&gt;^`&lt;/code&gt; or &lt;code&gt;View -&amp;gt; Terminal&lt;/code&gt;, then run:&lt;/p&gt;

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

npm install -g expo-cli


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;
&lt;h2&gt;
  
  
  3. Login to Expo
&lt;/h2&gt;

&lt;p&gt;At this point I'm assuming you have an &lt;a href="https://expo.io" rel="noopener noreferrer"&gt;Expo.io&lt;/a&gt; account, and you also downloaded the mobile client to your phone. Now let's ensure you're logged in both on your phone, and on our codespace. To login from the expo-cli in our codespace just run:&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;

expo login


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;
&lt;h2&gt;
  
  
  4. Start your app and check this out 😍
&lt;/h2&gt;

&lt;p&gt;Back in the terminal run:&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;

expo start --tunnel


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;If everything worked as expected you should be seeing a QR code. Scan the QR code with the Expo app (Android) or the Camera app (iOS). In any of the scenarios, you should be seeing the application loading and a status bar on the Codespace terminal. &lt;/p&gt;

&lt;p&gt;The first time loading the app could take a bit of time, and you might have to click &lt;code&gt;Reload JS&lt;/code&gt; if you get an error in slow connections. In fact, via this method, the codespace and your phone might disconnect with inactivity so if you see a &lt;code&gt;Disconnected from the Metro server&lt;/code&gt; just literally shake your phone to get the Expo devtool menu and click &lt;code&gt;Reload&lt;/code&gt;. When it all works you should see this screen:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fuser-images.githubusercontent.com%2F1192590%2F89735200-b8c33700-da58-11ea-9b46-45afb4cdb6fb.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fuser-images.githubusercontent.com%2F1192590%2F89735200-b8c33700-da58-11ea-9b46-45afb4cdb6fb.png" alt="starting-screen"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;For the grand finale, go into your codespace and locate what should be line &lt;code&gt;20&lt;/code&gt; where you have &lt;code&gt;backgroundColor&lt;/code&gt; and change it to &lt;code&gt;pink&lt;/code&gt; for example then save the file (⌘S). If the phone is still connected you should see it change color automatically. &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;ℹ️  &lt;em&gt;Remember if the device disconnected from our codespace, just shake it to bring up the Expo menu and click reload.&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  Exciting future
&lt;/h2&gt;

&lt;p&gt;I find it awesome that I could create or clone a fully fledged app, on a fully configured cloud IDE. Not only that, but I can easily test a small change or develop across the world in a minimum spec laptop I just borrowed.&lt;/p&gt;

&lt;p&gt;I think Codespaces have the potential to be a key catalyst in the years to come for:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Faster open source contributions;&lt;/li&gt;
&lt;li&gt;Faster ramp-up and time to productivity within companies;&lt;/li&gt;
&lt;li&gt;For those that prefer VS Code and Codespaces, the ability to have your settings and your IDE as you've customized it anywhere, anytime;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Improvements
&lt;/h2&gt;

&lt;p&gt;As I write this there are some things I still haven't completely figured out, but I plan to and will update the article accordingly. Those involve accessing the Expo Dev Tools on the codespace and ensuring the tunnel connection is more stable. &lt;/p&gt;

&lt;p&gt;Stay safe ;)&lt;/p&gt;

</description>
      <category>expo</category>
      <category>reactnative</category>
      <category>codespaces</category>
      <category>github</category>
    </item>
  </channel>
</rss>
