<?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: maik pleines</title>
    <description>The latest articles on DEV Community by maik pleines (@maikcodes).</description>
    <link>https://dev.to/maikcodes</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%2F105756%2F18a840eb-bd61-462c-aec1-4c18fa383fc1.jpeg</url>
      <title>DEV Community: maik pleines</title>
      <link>https://dev.to/maikcodes</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/maikcodes"/>
    <language>en</language>
    <item>
      <title>I published a NPM package</title>
      <dc:creator>maik pleines</dc:creator>
      <pubDate>Sat, 02 May 2020 15:11:06 +0000</pubDate>
      <link>https://dev.to/maikcodes/i-published-a-npm-package-38hc</link>
      <guid>https://dev.to/maikcodes/i-published-a-npm-package-38hc</guid>
      <description>&lt;h1&gt;
  
  
  Introduction
&lt;/h1&gt;

&lt;p&gt;Hi Everyone! &lt;/p&gt;

&lt;p&gt;Before I get started with explaining how I made and published a npm package, I would like to introduce myself (since this is also my first Post here): &lt;/p&gt;

&lt;p&gt;I´m Maik, a 24-year-old developer from Germany. I like building Applications in Javascript, mostly React. If you want to reach out, you can find me on &lt;a href="https://github.com/mpleines"&gt;GitHub&lt;/a&gt; or &lt;a href="https://twitter.com/maikcodes"&gt;Twitter&lt;/a&gt;. If you like, you can also visit my &lt;a href="https://maikpleines.com"&gt;Portfolio&lt;/a&gt; for further information.&lt;/p&gt;

&lt;h1&gt;
  
  
  How I published a NPM package
&lt;/h1&gt;

&lt;p&gt;I always wanted to publish a NPM package, mainly because I was interested in how it works. I stumbled across &lt;a href="https://www.npmjs.com/package/create-react-library"&gt;create-react-library&lt;/a&gt;, which looked very promising to me. You can start writing your package like with create-react-app, and test it directly in another /example folder. All the building etc. is handled by create-react-library. &lt;/p&gt;

&lt;p&gt;I decided to make a small toast message package, which lets users create toast messages with a single function. So I wrote all the &lt;a href="https://github.com/mpleines/webtoasty"&gt;code&lt;/a&gt; for it and tested in directly in the /example folder:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;react&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;

&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;toasty&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;web-toasty&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;App&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;toasty&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;this is a toast message ✅&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;1000&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;div&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/div&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="nx"&gt;App&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;After testing it, I only had to publish it to NPM, which is very simple. You just have to run&lt;br&gt;
&lt;br&gt;
 &lt;code&gt;npm publish&lt;/code&gt;&lt;br&gt;
&lt;br&gt;
 in the root directory.&lt;/p&gt;

&lt;p&gt;So, here it is, my first NPM package: &lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.npmjs.com/package/webtoasty"&gt;webtoasty&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I highly appreciate any feedback! &lt;/p&gt;

</description>
      <category>npm</category>
      <category>javascript</category>
      <category>react</category>
      <category>web</category>
    </item>
  </channel>
</rss>
