<?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: Kherin Bundhoo</title>
    <description>The latest articles on DEV Community by Kherin Bundhoo (@kherin).</description>
    <link>https://dev.to/kherin</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%2F126383%2F33a84851-4468-4f14-97ab-dd2683ab4ccd.png</url>
      <title>DEV Community: Kherin Bundhoo</title>
      <link>https://dev.to/kherin</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/kherin"/>
    <language>en</language>
    <item>
      <title>Running Postman Collections in Azure Pipelines</title>
      <dc:creator>Kherin Bundhoo</dc:creator>
      <pubDate>Sat, 18 Jun 2022 16:09:54 +0000</pubDate>
      <link>https://dev.to/kherin/running-postman-collections-in-azure-pipelines-4m20</link>
      <guid>https://dev.to/kherin/running-postman-collections-in-azure-pipelines-4m20</guid>
      <description>&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;Running a set of Postman collections within a dedicated Azure Pipeline provides the ability to automate API testing of Development, Testing and even Staging environments with minimal manual intervention. Furthermore, through the use of regular runs, it encourages the adoption of the &lt;code&gt;shift-left&lt;/code&gt; approach:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;test early and often&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Hence, teams can detect regressions and bugs early in the development lifecycle.&lt;/p&gt;

&lt;h3&gt;
  
  
  Create Postman Collection
&lt;/h3&gt;

&lt;p&gt;The first step is to gather your Postman API requests under the same Collection. In this example, the collection is named &lt;strong&gt;Post-Office&lt;/strong&gt;. Under the &lt;strong&gt;Tests&lt;/strong&gt; tab, there is a simple assertion which verifies the expected status code returned after the API call.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Note: The endpoint *-foo.com is only an illustrative example and you should replace it with your own in your current context.&lt;/em&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%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F62qw2x49guv7gd11dckq.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%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F62qw2x49guv7gd11dckq.png" alt="Sample Postman Collection"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Create environments + variables
&lt;/h3&gt;

&lt;p&gt;Ensure that you have created corresponding &lt;strong&gt;Postman Environments&lt;/strong&gt; for the different contexts in which your code is being deployed to. &lt;em&gt;Environments&lt;/em&gt; provide a way to organize variables which are only relevant for a specific context (API keys, external web-services, etc...).&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%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frye523j0b0vt9vr8w7zi.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%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frye523j0b0vt9vr8w7zi.png" alt="Postman Environments"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  Export the collection
&lt;/h4&gt;

&lt;p&gt;You can export the relevant Postman Collection by hovering over it on the sidebar and clicking on the "..." (View more actions). Finally click on &lt;strong&gt;Export&lt;/strong&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%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fs6i8o6yut2s6dmuysmpx.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%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fs6i8o6yut2s6dmuysmpx.png" alt="Export Postman Collection"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;A file with a default filename of &lt;code&gt;*.postman_collection.json&lt;/code&gt; (in this case Post-Office.postman_collection.json) will be downloaded&lt;/p&gt;

&lt;h4&gt;
  
  
  Export Postman Environment Variables
&lt;/h4&gt;

&lt;p&gt;Go to the &lt;strong&gt;Environments&lt;/strong&gt; tab on the side bar, then click on the "..." and finally select &lt;strong&gt;export&lt;/strong&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%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6gytbd0nse3bfy9v4n66.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%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6gytbd0nse3bfy9v4n66.png" alt="Export Postman Environment Variables"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Create a new Pipeline
&lt;/h3&gt;

&lt;p&gt;Once you have exported the collection and environment json files, ensure that you push them to the repository of your web app on Azure DevOps.&lt;/p&gt;

&lt;p&gt;Now it is time for some plumbing! The task is to create a new pipeline that will execute your Postman collection scripts automatically.&lt;/p&gt;

&lt;p&gt;Go to &lt;strong&gt;Pipelines&lt;/strong&gt; and click on &lt;strong&gt;New&lt;/strong&gt;. Select the classic editor.&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%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8o0gbvwf8tamgwhkumim.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%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8o0gbvwf8tamgwhkumim.png" alt="Pipeline Classic Editor"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Add Tasks
&lt;/h3&gt;

&lt;h3&gt;
  
  
  Task 1: Install newman package
&lt;/h3&gt;

&lt;p&gt;For the first job, we will be using the newman package from npm to execute our postman collection.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Newman is a command-line Collection Runner for Postman. It enables you to run and test a Postman Collection directly from the command line. &lt;/p&gt;

&lt;p&gt;-- &lt;cite&gt;&lt;a href="https://learning.postman.com/docs/running-collections/using-newman-cli/command-line-integration-with-newman/" rel="noopener noreferrer"&gt;https://learning.postman.com/docs/running-collections/using-newman-cli/command-line-integration-with-newman/&lt;/a&gt;&lt;/cite&gt;&lt;/p&gt;
&lt;/blockquote&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%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvunf0ckqfxucx5lacryt.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%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvunf0ckqfxucx5lacryt.png" alt="Install newman package"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Task 2: Execute Postman Collection
&lt;/h3&gt;

&lt;p&gt;To execute the postman collection with newman, we will need to provide the following command:&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;
 newman run sample-collection.json -e env.postman_environment.json

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

&lt;/div&gt;

&lt;p&gt;The first argument of the &lt;code&gt;newman run&lt;/code&gt; is the file path of your postman collection. The option &lt;code&gt;-e&lt;/code&gt; take as input the file path of the Postman Environment file.&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%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fx6tu0td8avq5mwod5hgi.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%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fx6tu0td8avq5mwod5hgi.png" alt="Execute Collection Runner"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  Making use of Pipeline variables
&lt;/h4&gt;

&lt;p&gt;In the previous screenshot, we can see that we have hardcoded the environment filename for the option &lt;code&gt;-e&lt;/code&gt;:&lt;/p&gt;

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

newman run sample-collection.json -e env.postman_environment.json


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

&lt;/div&gt;

&lt;p&gt;Instead of specifying directly the environment filename within the command, we can leverage the use of Pipeline variables.&lt;br&gt;
We create a variable &lt;code&gt;CUSTOM.ENVIRONMENT_FILE&lt;/code&gt; to store the filename.&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%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fd8sibu27p3q2dz1iyn7j.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%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fd8sibu27p3q2dz1iyn7j.png" alt="Pipeline Variables"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;We can then reference the variable inside the command as follows:&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%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwqu2v53byw0eystrgnan.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%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwqu2v53byw0eystrgnan.png" alt="Reference Pipeline Variable"&gt;&lt;/a&gt;&lt;/p&gt;

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

# Navigate to postman directory
DESTINATION='$(System.DefaultWorkingDirectory)/postman'
cd $DESTINATION

# Absolute path for environment file
ENVIRONMENT_FILE='$(System.DefaultWorkingDirectory)/postman/environments/$(CUSTOM.ENVIRONMENT_FILE)'

newman run collections/Post-Office.postman_collection.json -e $ENVIRONMENT_FILE



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

&lt;/div&gt;

&lt;p&gt;After the execution of the Postman Collection, the results of all tests and requests can be exported into a custom file.&lt;br&gt;
This is made possible through the use of reporters. In our case, we will use a &lt;code&gt;JUNIT&lt;/code&gt; reporter to export the test results to a custom file.&lt;/p&gt;

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

newman run collections/Post-Office.postman_collection.json  -e $ENVIRONMENT_FILE --reporters cli,junit --reporter-junit-export test-results/outputfile.xml


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

&lt;/div&gt;

&lt;p&gt;&lt;code&gt;outputfile.xml&lt;/code&gt; represents the custom file where you want to collect the test results.&lt;/p&gt;

&lt;p&gt;View more about custom reporters here: &lt;a href="https://learning.postman.com/docs/running-collections/using-newman-cli/newman-custom-reporters/" rel="noopener noreferrer"&gt;Newman Custom Reporters&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Task 3: Publish Test Results
&lt;/h3&gt;

&lt;p&gt;The final step is to publish the test results and view the results on the &lt;strong&gt;Tests&lt;/strong&gt; tab of the pipeline.&lt;/p&gt;

&lt;p&gt;Add the &lt;em&gt;Publish Test Results&lt;/em&gt; task.&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%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fcdqgd31wazhirs31f97g.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%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fcdqgd31wazhirs31f97g.png" alt="Publish Test Results"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;View the test results on the &lt;strong&gt;Tests&lt;/strong&gt; tab&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%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8q2chgdrn3y63k0fovks.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%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8q2chgdrn3y63k0fovks.png" alt="Test Results Tab"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;That's its folks! Thank you 😃&lt;/p&gt;

&lt;h2&gt;
  
  
  References
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://learning.postman.com/docs/running-collections/using-newman-cli/command-line-integration-with-newman/" rel="noopener noreferrer"&gt;https://learning.postman.com/docs/running-collections/using-newman-cli/command-line-integration-with-newman/&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://docs.microsoft.com/en-us/azure/devops/pipelines/get-started/what-is-azure-pipelines?view=azure-devops" rel="noopener noreferrer"&gt;https://docs.microsoft.com/en-us/azure/devops/pipelines/get-started/what-is-azure-pipelines?view=azure-devops&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>azure</category>
      <category>postman</category>
      <category>api</category>
      <category>testing</category>
    </item>
    <item>
      <title>Using Octave kernel in a Jupyter Notebook</title>
      <dc:creator>Kherin Bundhoo</dc:creator>
      <pubDate>Wed, 28 Apr 2021 08:01:01 +0000</pubDate>
      <link>https://dev.to/kherin/using-octave-kernel-in-a-jupyter-notebook-3im</link>
      <guid>https://dev.to/kherin/using-octave-kernel-in-a-jupyter-notebook-3im</guid>
      <description>&lt;p&gt;This is a lightning-quick 💫 tutorial on how to link the Octave kernel with a Jupyter Notebook.&lt;/p&gt;

&lt;p&gt;Requirements:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Python &amp;gt;= 3.5&lt;/li&gt;
&lt;li&gt;Anaconda 4.10.1&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Installation
&lt;/h2&gt;

&lt;p&gt;In your command line, navigate to your project folder and activate your Anaconda environment&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--nh9gylyz--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1vijdk7y2bkj59m9xhxj.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--nh9gylyz--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1vijdk7y2bkj59m9xhxj.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Install the &lt;code&gt;octave_kernel&lt;/code&gt; package using &lt;code&gt;conda install -c conda-forge octave_kernel&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--DGrtiT8K--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fgnh45avzmjj3a7rnfqb.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--DGrtiT8K--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fgnh45avzmjj3a7rnfqb.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Configuration
&lt;/h2&gt;

&lt;p&gt;Run Jupyter Notebook inside your workspace and open your browser. Within the file explorer page, on the right-hand-side, select &lt;code&gt;Octave&lt;/code&gt; from the &lt;em&gt;New&lt;/em&gt; dropdown.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--3QFzly6r--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hfffisv4wkip9qilwo07.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--3QFzly6r--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hfffisv4wkip9qilwo07.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This will create a new notebook which is linked to the &lt;code&gt;Octave&lt;/code&gt; kernel and which enables you to execute Octave syntax within the code cells.&lt;/p&gt;

&lt;h2&gt;
  
  
  Setting Graphics Toolkit
&lt;/h2&gt;

&lt;p&gt;To be able to display graph plots within the notebook, you will need to indicate which graphics toolkit you want the script to use before rendering the plots. (In this example, we are using the &lt;code&gt;gnuplot&lt;/code&gt; graphics toolkit)&lt;/p&gt;

&lt;p&gt;Add the following line to top of your code:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;graphics_toolkit ("gnuplot");&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--qHbGGtU0--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/emaglrn93p3rw8vdemba.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--qHbGGtU0--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/emaglrn93p3rw8vdemba.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  References
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://anaconda.org/conda-forge/octave_kernel"&gt;https://anaconda.org/conda-forge/octave_kernel&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;Image Cover: &lt;a href="https://picsum.photos"&gt;https://picsum.photos&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>jupyter</category>
      <category>octave</category>
      <category>datascience</category>
      <category>beginners</category>
    </item>
    <item>
      <title>Import Project to CodeSanbox.io via GitHub Action</title>
      <dc:creator>Kherin Bundhoo</dc:creator>
      <pubDate>Sat, 27 Mar 2021 12:58:14 +0000</pubDate>
      <link>https://dev.to/kherin/import-project-to-codesanbox-io-via-github-action-13je</link>
      <guid>https://dev.to/kherin/import-project-to-codesanbox-io-via-github-action-13je</guid>
      <description>&lt;p&gt;Hello Everyone!&lt;/p&gt;

&lt;p&gt;In this post I am going to show you how I was able to generate a link to automatically import your current project to &lt;a href="https://codesandbox.io/"&gt;CodeSandbox&lt;/a&gt;.&lt;/p&gt;




&lt;h2&gt;
  
  
  📠 Import
&lt;/h2&gt;

&lt;p&gt;According to its documentation, CodeSandbox has a way to automatically import a project (&lt;a href="https://codesandbox.io/docs/templates"&gt;templates&lt;/a&gt;) from a GitHub repository to its online IDE by simply modifying the GitHub URL of the repository.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Using GitHubBox.com&lt;br&gt;
An easy way to import a repo to CodeSandbox via URL is with GitHubBox.com. Append 'box' to your github.com URL in between 'hub' and '.com' and it will redirect to CodeSandbox.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Here's an example:&lt;/p&gt;

&lt;p&gt;Change the GitHub URL: &lt;a href="https://github.com/reduxjs/redux/tree/master/examples/todomvc"&gt;https://github.com/reduxjs/redux/tree/master/examples/todomvc&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;To: &lt;a href="https://githubbox.com/reduxjs/redux/tree/master/examples/todomvc"&gt;https://githubbox.com/reduxjs/redux/tree/master/examples/todomvc&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;The result is we take the last part of the url (everything after github.com) and use it in our importer at codesandbox.io/s/github/, adding the repo to CodeSandbox. &lt;/p&gt;

&lt;h2&gt;
  
  
  Github Action
&lt;/h2&gt;

&lt;p&gt;Hence, I created a Github Action that will concatenate the GithubBox.com url to the path of the branch for each newly-created pull request. &lt;/p&gt;

&lt;h2&gt;
  
  
  📚 Reason
&lt;/h2&gt;

&lt;p&gt;Generating a url to an online playground for each pull request created can enhance the review process by:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;instantaneously generating a sandbox for each branch, therefore shortening the visual feedback loop&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;providing the ability to play around with the code and provide better code suggestions  &lt;/p&gt;
&lt;h2&gt;
  
  
  Workflow
&lt;/h2&gt;

&lt;p&gt;Here's the code of the workflow file you need to add to your project.&lt;br&gt;
&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight yaml"&gt;&lt;code&gt;&lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="s"&gt;on"&lt;/span&gt;&lt;span class="err"&gt;:&lt;/span&gt;
  &lt;span class="pi"&gt;-&lt;/span&gt; &lt;span class="s"&gt;pull_request&lt;/span&gt;
&lt;span class="na"&gt;jobs&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
  &lt;span class="na"&gt;annotate_pull_request&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
    &lt;span class="na"&gt;runs-on&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;ubuntu-latest&lt;/span&gt;
    &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;perform annotation&lt;/span&gt;
    &lt;span class="na"&gt;steps&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
      &lt;span class="pi"&gt;-&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;annotation action step&lt;/span&gt;
        &lt;span class="na"&gt;id&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;annotation&lt;/span&gt;
        &lt;span class="na"&gt;uses&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;kherin/pr-comment-action@v1.0.1&lt;/span&gt;
        &lt;span class="na"&gt;with&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
          &lt;span class="na"&gt;annotation-url&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="s"&gt;https://githubbox.com/"&lt;/span&gt;
          &lt;span class="na"&gt;token&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;${{ secrets.GITHUB_TOKEN }}&lt;/span&gt;

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

&lt;/div&gt;

&lt;h2&gt;
  
  
  💼 Usage
&lt;/h2&gt;
&lt;h3&gt;
  
  
  PR Comment
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--3KpN4CYY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zjqiw5gsr2n2145eiorq.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--3KpN4CYY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zjqiw5gsr2n2145eiorq.png" alt="Pull Request Comment" width="880" height="156"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h3&gt;
  
  
  Online Playground
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--XhBx7EWT--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2cd6mtl64lfuyghnz9di.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--XhBx7EWT--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2cd6mtl64lfuyghnz9di.png" alt="Online Playground" width="880" height="309"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  ✨ GitHub Action
&lt;/h2&gt;

&lt;p&gt;The source code can be found here:&lt;br&gt;
&lt;/p&gt;
&lt;div class="ltag-github-readme-tag"&gt;
  &lt;div class="readme-overview"&gt;
    &lt;h2&gt;
      &lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--566lAguM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev.to/assets/github-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"&gt;
      &lt;a href="https://github.com/kherin"&gt;
        kherin
      &lt;/a&gt; / &lt;a href="https://github.com/kherin/pr-comment-action"&gt;
        pr-comment-action
      &lt;/a&gt;
    &lt;/h2&gt;
    &lt;h3&gt;
      This action annotates the description section of a newly-created pull request with a comment
    &lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="ltag-github-body"&gt;
    
&lt;div id="readme" class="md"&gt;
&lt;h1&gt;
Review App Action&lt;/h1&gt;
&lt;p&gt;This action adds a new comment to a newly-created pull request when it is created for the firs time.&lt;/p&gt;
&lt;h3&gt;
Type:&lt;/h3&gt;
&lt;p&gt;&lt;code&gt;JavaScript&lt;/code&gt; &lt;code&gt;Action&lt;/code&gt;&lt;/p&gt;
&lt;h3&gt;
&lt;code&gt;annotation-url&lt;/code&gt;
&lt;/h3&gt;
&lt;p&gt;The URL of the review app which is linked to the code branch of the newly-created pull request&lt;/p&gt;
&lt;h2&gt;
Purpose&lt;/h2&gt;
&lt;h3&gt;
Integration with CodeSanbox&lt;/h3&gt;
&lt;p&gt;You can easily import a new pull request for an Angular/React/Vue project to CodeSanbox&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;An easy way to import a repo to CodeSandbox via URL is with GitHubBox.com. Append 'box' to your github.com URL in between 'hub' and '.com' and it will redirect to CodeSandbox. &lt;a href="https://codesandbox.io/docs/importing" rel="nofollow"&gt;CodeSanbox Documentation&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2&gt;
Example usage&lt;/h2&gt;
&lt;p&gt;uses: actions/pr-comment-action@v1
with:
annotation-url: '&lt;a href="https://location-of-demo-app.com" rel="nofollow"&gt;https://location-of-demo-app.com&lt;/a&gt;'&lt;/p&gt;
&lt;/div&gt;

  &lt;/div&gt;
  &lt;div class="gh-btn-container"&gt;&lt;a class="gh-btn" href="https://github.com/kherin/pr-comment-action"&gt;View on GitHub&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;



&lt;h3&gt;
  
  
  👋 Goodbye World
&lt;/h3&gt;

&lt;h2&gt;
  
  
  References
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://codesandbox.io/docs/importing"&gt;https://codesandbox.io/docs/importing&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://docs.github.com/en/actions/creating-actions/creating-a-javascript-action"&gt;https://docs.github.com/en/actions/creating-actions/creating-a-javascript-action&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>codesandboxio</category>
      <category>angular</category>
      <category>github</category>
      <category>pullrequest</category>
    </item>
  </channel>
</rss>
