Publishing an npm package to npm registry

2 min read

Relsell Global : Cross platform development using React Native

Besides above, In continuation of Part1 of the blog, where we created a sample react native app which was using other react native app as an npm dependency. Finally, we will be publishing an npm package to the public npm registry.

Before going further, to motivate you I would advise you to read below lines

Prologue

we came in this world with empty hands
we leave this world with empty hands.
In between and afterward it’s just learning and teaching that remains with us.

Beginning

In this blog, we will be updating, react-native dependency package that we created in Part1.

To elaborate it further have a look at the below file for our sample component

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React from 'react';
import {View, TextInput, Button,Text} from 'react-native';
import {Component} from 'react';
const app = require('rg-weather-app-node');

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      props: props,
      temperature:'00.00',
    };
    this.inputCity = '';
  }
  componentDidMount() {}

  render() {
    return (
      <View style={{flex: 1}}>
        <View
          style={{flex: 1, paddingLeft: 16, paddingRight: 16, paddingTop: 16}}>
          <TextInput
            style={{borderWidth: 1}}
            placeholder="Enter city name"
            editable
            onChangeText={text => this.inputCity = text}
            maxLength={40}
          />
          <View style={{marginTop: 16}}></View>
          <Button
            title="Fetch temperature"
            color="#f194ff"
            onPress={() => {
              var argvL = this.state.props.argv;
              argvL.a = this.inputCity;
              this.startProcessForTemp(argvL);
            }}
          />
        </View>         
         <View style={{flex: 1, borderWidth: 1,justifyContent:'center',alignItems:'center'}}>
          <Text>Temperature in input city is {this.state.temperature} Fahrenheit</Text>
        </View>
      </View>
    );
  }
  startProcessForTemp(argv) {
    // console.log('Test params');
    // console.log(argv);
    var p = app.getGeoCoding(argv);
    p
    .then((result)=>{
      return app.getWeather(argv,result);
    })
    .then((result)=>{
      this.setState({
            temperature:result.tempreture
          });
    })
    .catch((err)=>{
      console.log(err);
    })
    

    // app.startProcess(argv, result => {
    //   this.setState({
    //     temperature:10
    //   });
    // });
  }
}

In the above file, Please note we are making a call to another dependency for fetching temperature for the place or address we fed.

var argv = {
    a:"New Delhi", 
    gapi_key:localconfig.GMAP_KEY,
    dapi_key:localconfig.DARK_SKY_API_KEY
  };
app.startProcess(argv);

So the above code will show a screen, where the user can enter a city name and on pressing the button, he or she will get the current temperature of the city.

Adding a wrapper for our component

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React from 'react';
import {View, TextInput, Button,Text} from 'react-native';
import {Component} from 'react';
import App from 'publishdemolib';

export default class AppWrapper extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    var argv = {
      a: '',
      gapi_key: '<ADD GAPI KEY>',
      dapi_key: '<ADD DAPI KEY>',
    };
    return (
      <View style={{flex: 1}}>
       <App argv={argv} />
      </View>
    );
  }
}

Here we have added a new file that acts as a wrapper for our component.

Now let’s prepare our react-native app / npm package for publishing to the public npm registry. If we view package.json file we will find below code

{
  "name": "publishdemolib",
  "version": "0.0.7",
  "main": "App.js",
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "react": "16.9.0",
    "react-native": "0.61.5",
    "rg-weather-app-node": "^1.0.5"
  },
  "bundledDependencies":[
    "rg-weather-app-node"
  ],
  "devDependencies": {
    "@babel/core": "7.8.3",
    "@babel/runtime": "7.8.3",
    "@react-native-community/eslint-config": "0.0.5",
    "babel-jest": "24.9.0",
    "eslint": "6.8.0",
    "jest": "24.9.0",
    "metro-react-native-babel-preset": "0.58.0",
    "react-test-renderer": "16.9.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

As you know the package.json file is a JSON file. In the package.json file, you need to modify a few entries. remove private attribute altogether since we are going to contribute to an open-source repository.

Run below command first to check if the npm package can be prepared.

npm pack

I would emphasize a point here, to include node_modules in your package, you have to add bundle dependencies array before triggering npm pack command.

Once .tgz file is created locally, install it in some other react native app. and test its functioning,

Now I assume testing is done successfully, let’s proceed with publishing package to the npm registry. But before that, we need to update a few information in our package .json file, like open-source repo, path, etc. We are set to go. run

npm publish

and your package will be published in the public npm registry.

Conclusion

This brings us to the end of our tutorial blog, Source code for pertaining blogs is available at the link. Feel free to checkout.

Thanks for reading.

2 Replies to “Publishing an npm package to npm registry”

Leave a Reply

Your email address will not be published. Required fields are marked *