Skip to content

Commit

Permalink
Remove merge conflict remnants (hackclub#1520)
Browse files Browse the repository at this point in the history
  • Loading branch information
@quackduck
quackduck authored Dec 23, 2020
1 parent ecee2ef commit 3555190
Showing 1 changed file with 6 additions and 158 deletions.
164 changes: 6 additions & 158 deletions workshops/firstnpmpackage/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,8 @@ author: '@bajpai244'

In this workshop, we will be creating your first npm package and then we will be publishing it. This workshop will be a quick read and will be fun to do 🤠 So let’s get started!

<<<<<<< HEAD
![Demo GIF](img/showtime.gif)
=======
![Demo GIF](img/showtime.gif)
>>>>>>> upstream/main


## Prerequisites

Expand All @@ -27,22 +24,15 @@ The source code of this workshop is available at [https://github.com/bajpai244/n

## What will we make?

<<<<<<< HEAD
We will be making a calculator package, which will provide us with
=======
We will be making a calculator package, which will provide us with
>>>>>>> upstream/main

functions to do some basic arithmetic calculations!

## Setup

You need to have Node.js and npm installed in your system.

<<<<<<< HEAD
### Node.js
=======
### Node.js
>>>>>>> upstream/main

[Node.js](https://nodejs.org/en/) is an open-source cross-platform server environment. At the time of writing this workshop, we are using Node **version:- v12.18.3.**

Expand All @@ -54,8 +44,6 @@ To check Node.js is working fine type **node -v** in your terminal, if a version

![node check image](img/nodecheck.png)

<<<<<<< HEAD

## Creating your npm account

An npm account is required for publishing an npm package. So make sure you have an npm account before proceeding further.
Expand All @@ -64,24 +52,10 @@ Creating an npm account is very simple, just follow instructions from this
<a href="https://docs.npmjs.com/creating-a-new-npm-user-account" target="blank" >link</a> to create your npm account.

After that **login to your npm** via terminal using the following command:
```bash
npm login
```
=======
## Creating your npm account

An npm account is required for publishing an npm package. So make sure you have an npm account before proceeding further.

Creating an npm account is very simple, just follow instructions from this
<a href="https://docs.npmjs.com/creating-a-new-npm-user-account" target="blank" >link</a> to create your npm account.

After that **login to your npm** via terminal using the following command:

```bash
npm login
```

>>>>>>> upstream/main
You can also take help from this <a href="https://docs.npmjs.com/creating-a-new-npm-user-account#testing-your-new-account-with-npm-login)" target="blank" >link</a> to login into your npm account.

![that was easy gif](img/itwaseasy.gif)
Expand All @@ -92,21 +66,11 @@ Now, find a folder on your computer where you would like to keep your project. T

![calculatorfolder image](img/calculatorfolder.png)

<<<<<<< HEAD
Now, open this project inside a terminal and type the following command:
```bash
npm init -y
```
Then press the **Enter key** to run it.
=======
Now, open this project inside a terminal and type the following command:

```bash
npm init -y
```

Then press the **Enter key** to run it.
>>>>>>> upstream/main

![ npm init command ](img/npminitcommand.png)

Expand All @@ -118,11 +82,8 @@ Okay, so now we will discuss some questions that may arise from the above steps

### What is this command and what will it do?

<<<<<<< HEAD
The above command will create a **package.json** file for your project. You need to fill some meta information when you run this command like name,version and description etc.
=======
The above command will create a **package.json** file for your project. You need to fill some meta information when you run this command like name,version and description etc.
>>>>>>> upstream/main

The above command will create a **package.json** file for your project. You need to fill some meta information when you run this command like name, version and description etc.

The -y ( it is a command line flag ) **will autofill these fields** with the defualt values for them and write them to your package.json file!

Expand All @@ -146,11 +107,7 @@ Open your project folder inside an editor. I will be using [VSCode](https://code

### Change the name in package.json

<<<<<<< HEAD
Now, in the name field( this is going to be your package name ) of your package.json change it from whatever is the default value( here it is calculator ) to @username/calculator.
=======
Now, in the name field( this is going to be your package name ) of your package.json change it from whatever is the default value( here it is calculator ) to @username/calculator.
>>>>>>> upstream/main

Now, **here @username is your npm username with @ as a prefix.** My npm username is bajpai244 so I will name it as @bajpai244/calculator. Packages with names in this format are called **scoped packages.**

Expand Down Expand Up @@ -183,8 +140,6 @@ Now create a file index.js in your project folder.
Now, add the following code to it:

```js
<<<<<<< HEAD

function add(x, y) {
return x+y
}
Expand All @@ -207,52 +162,20 @@ module.exports = {
multiply: multiply,
divide: divide
}

=======
function add(x, y) {
return x + y
}

function subtract(x, y) {
return x - y
}

function multiply(x, y) {
return x * y
}

function divide(x, y) {
return x / y
}

module.exports = {
add: add,
subtract: subtract,
multiply: multiply,
divide: divide
}
>>>>>>> upstream/main
```

This is what the file will look like:

![ created index.js file ](img/indexjs1.png)

<<<<<<< HEAD

=======
>>>>>>> upstream/main
We declared four arithmetic functions that perform the addition, subtraction, multiplication, and division operation respectively.

### What is this module.exports?

In the Node.js module system, **each file is treated as a separate module**. Each module can export its properties and methods which can then be imported by some other modules ( This is how we import properties and methods from npm packages! ).

<<<<<<< HEAD

module.exports exports a default value from a Node.js module and here we are exporting an object with keys add, subtract, multiply and divide which are then mapped to their respective arithmetic functions.
=======
module.exports exports a default value from a Node.js module and here we are exporting an object with keys add, subtract, multiply and divide which are then mapped to their respective arithmetic functions.
>>>>>>> upstream/main

This will make sure that we can import our arithmetic functions in another node js file ( i.e module ).

Expand All @@ -265,10 +188,7 @@ Now, we will be publishing this npm package. Open your project folder inside the
```bash
npm publish --access public
```
<<<<<<< HEAD
=======

>>>>>>> upstream/main
After typing that press the **Enter key** to run this command.

This is what it will look like:
Expand All @@ -288,62 +208,35 @@ Scoped packages are by default published as private npm packages and hence to ma
Now, before we go ahead and test it out I want to show you something. Add the following code to your existing index.js code:

```js
<<<<<<< HEAD

function remainder(x,y){
return x%y
}

=======
function remainder(x, y) {
return x % y
return x % y
}
>>>>>>> upstream/main
```

Now in your module.exports add the remainder function.

```js
<<<<<<< HEAD

module.exports = {
add: add,
subtract: subtract,
multiply: multiply,
divide: divide,
remainder:remainder
}

=======
module.exports = {
add: add,
subtract: subtract,
multiply: multiply,
divide: divide,
remainder: remainder
}
>>>>>>> upstream/main
```

After making all these changes your file will look like this:

![indexjs2 image](img/indexjs2.png)

<<<<<<< HEAD
## Now publish this change
=======
## Now publish this change
>>>>>>> upstream/main

Now, open your project inside a terminal and type the following command to publish it:

```bash
npm publish
```
<<<<<<< HEAD
=======

>>>>>>> upstream/main
We are not adding **--access public** because during the first publish we made it clear that it is going to be a public package.

Now, press the **Enter key** and see what you get.
Expand Down Expand Up @@ -378,11 +271,7 @@ Now, open your package.json and there you will see a version number, change it f

![versionchange image](img/versionchange.png)

<<<<<<< HEAD
We have added new functionality and the code is still backward-compatible and hence we are **increasing the MINOR version to 1 from 0.**
=======
We have added new functionality and the code is still backward-compatible and hence we are **increasing the MINOR version to 1 from 0.**
>>>>>>> upstream/main

## Now try publishing it!

Expand All @@ -391,10 +280,7 @@ Open your project inside a terminal and type the following command:
```bash
npm publish
```
<<<<<<< HEAD
=======

>>>>>>> upstream/main
Press the **Enter key** to run the above command.

This is what it will look like:
Expand All @@ -418,10 +304,7 @@ Now, open this folder inside a terminal and type the following command.
```bash
npm init -y
```
<<<<<<< HEAD
=======

>>>>>>> upstream/main
Press **Enter key** to run it.

Now, in the next command, I am going to use my scope which is **@bajpai244 and you should change it to your scope i.e your @username.**
Expand All @@ -431,10 +314,7 @@ After that type the following command in the terminal:
```bash
npm -i @bajpai244/calculator
```
<<<<<<< HEAD
=======

>>>>>>> upstream/main
**You should use @username/calculator** where @username is your username with @ as prefix.

![testcommands image](img/testcommands.png)
Expand All @@ -448,13 +328,6 @@ The first command made our package.json file and second command installed our np
Now open this folder inside a code editor and make a new file **index.js** and type the following code inside it:

```js
<<<<<<< HEAD

const { add, subtract, multiply, divide, remainder } = require('@bajpai244/calculator')

function log(val) {
console.log(val)
=======
const {
add,
subtract,
Expand All @@ -465,7 +338,6 @@ const {

function log(val) {
console.log(val)
>>>>>>> upstream/main
}

log(add(1, 1))
Expand All @@ -477,10 +349,6 @@ log(multiply(3, 3))
log(divide(15, 3))

log(remainder(6, 3))
<<<<<<< HEAD

=======
>>>>>>> upstream/main
```

Now, here we have imported our package's functions and are testing them with the help of our function **log** which will log their result on a console.
Expand All @@ -489,21 +357,14 @@ This is what it will look like:

![testfile image](img/testfile.png)

<<<<<<< HEAD

=======
>>>>>>> upstream/main
## Running the test

Now, we will run this file via Node.js. Open this folder inside your terminal and type the following command:

```bash
node index.js
```
<<<<<<< HEAD
=======

>>>>>>> upstream/main
Press the **Enter key** to run this command.

This is what it will look like:
Expand All @@ -514,11 +375,7 @@ We will get the output of our file logged on the terminal.

## Done!

<<<<<<< HEAD
Congratulations! Now you are an npm ninja. You have created and published your first npm package!
=======
Congratulations! Now you are an npm ninja. You have created and published your first npm package!
>>>>>>> upstream/main

![crazy image](https://workshops.hackclub.com/content/workshops/hackide/img/awesome.gif)

Expand All @@ -528,17 +385,8 @@ You will still encounter more challenges in your journey as a package-manager an

## Next Steps!

<<<<<<< HEAD
I know it feels awesome to make it but don't stop here, Create whatever you can from this crazy trick and share it with us in the [```#ship```](https://app.slack.com/client/T0266FRGM/C0M8PUPU6) channel of [Hack Club's Slack](https://hackclub.com/slack/).


![nailed it gif](img/nailedit.gif)

I am available on Hack Club's Slack by the username **Harsh Bajpai**, If you have any doubt or query regarding this workshop then feel free to reach out to me!
=======
I know it feels awesome to make it but don't stop here, Create whatever you can from this crazy trick and share it with us in the [`#ship`](https://app.slack.com/client/T0266FRGM/C0M8PUPU6) channel of [Hack Club's Slack](https://hackclub.com/slack/).

![nailed it gif](img/nailedit.gif)

I am available on Hack Club's Slack by the username **Harsh Bajpai**, If you have any doubt or query regarding this workshop then feel free to reach out to me!
>>>>>>> upstream/main

0 comments on commit 3555190

Please sign in to comment.