Publishing react components to NPM — experiments with firenpm – Medium

  • Publishing react components to NPM – experiments with firenpm
  • Whenever you want to work on your react component in a separate package you need to face with the development setup.
  • run web – open the browser with running webpack
  • There is only firenpm and firenpm.web in your devDependencies .
  • Commands above, will install firenpm cli and runjs, generate some files, run tests and open your project within the browser.

Whenever you want to work on your react component in a separate package you need to face with the development setup. ES6/7/Babel, linting…

@pawelgalazka: Publishing react components to NPM – experiments with firenpm #reactjs #javascript #npm

Publishing react components to NPM — experiments with firenpm

Whenever you want to work on your react component in a separate package you need to face with the development setup. ES6/7/Babel, linting, testing, displaying the component in the browser (webpack/http-server/browserify), build workflow, directory structure, configuration… it’s a lot of stuff which you need to worry about. The whole process is repetitive and unnecessary time consuming.

Common ways of doing the setup:

Generators or boilerplates sounds like a good idea, this approach has some downsides though:

At some point we probably need some generation, but points 1 and 3 can be definitely improved.

Now… what the heck is firenpm ? Roughly speaking it’s a set of 3 npm modules: firenpm, firenpm.cli and firenpm.web which contains most of the development tools which you will need for your npm package development. These are the only modules which you will see in your devDependencies after project generation. Update of your development tools is so much easier in that case. Just replace versions with “*” in devDependencies and run:

npm update firenpm firenpm.web –save

Generating a project:

npm -g install firenpm.cli runjs

firenpm your-project –web

run test

run web

Commands above, will install firenpm cli and runjs, generate some files, run tests and open your project within the browser. Es7 compilation, linting, tests and with the “web” extension also webpack and all of its basic loaders will be already preconfigured and working out of the box.

runjs — a micro package, minimalistic building tool. Works quite similar to make/Makefile but it use run/runfile.js. More.

firenpm — Setup Babel, linting and tests for your NPM module without configuration. More.

Commands available in the generated directory:

Structure of generated project:

|- lib

|- src

| |- index.js

|- config

|- demo

| |- index.js

|- style.css

Compiled package will be stored in lib directory and entry point is by default lib/index.js .

Generated package.json:

“name”: “test-project”,

“version”: “1.0.0”,

“description”: “”,

“main”: “lib/index.js”,

“author”: “”,

“license”: “MIT”,

“scripts”: {

“test”: “run test”

“dependencies”: {

“devDependencies”: {

“firenpm”: “1.2.0-beta.4”,

“firenpm.web”: “1.2.0-beta.4”

“babel”: {

“presets”: [

“firenpm/babel-preset-es2015”,

“firenpm/babel-preset-react”,

“firenpm/babel-preset-stage-2”

“runjs”: {

“babel-register”: “./node_modules/firenpm/babel-register”

“eslintConfig”: {

“extends”: [

“./node_modules/firenpm/eslint-config-standard.js”,

“./node_modules/firenpm/eslint-config-standard-react.js”

“parser”: “./node_modules/firenpm/babel-eslint”

As you can notice, there is only firenpm and firenpm.web in your devDependencies.

So, we have firenpm with firenpm.web extension up and running, now we need React. firenpm.web provides only webpack setup for development, React will be part of our module, so we need to install it separately:

npm install react react-dom –save

then we have to do the rendering of our component in the webpack entry point (demo/index.js) and create container where React will do the render…

demo/index.html:

Demo

demo/index.js:

import React from ‘react’

import ReactDOM from ‘react-dom’

import MyComponent from ‘../src’

import ‘../style.css’

ReactDOM.render(

,

document.querySelector(‘#react-app’)

src/index.js:

import React from ‘react’

return (

Hello

then command:

run web

and you can play with your component!

run command call tasks from runfile.js, so remember that runfile.js has to be present in your current working directory when you’ll do the “run” command

run publish

Simple as that! It will run lint, build, tests and npm publish behind it.

Why use this ?

Firenpm is quite fresh, has stable version but the whole ecosystem is still an experiment. However it can save you a tone of time, making the development environment setup quick. It also makes maintaining / updating your npm dependencies much easier by keeping all of the dev tools out of your package.json devDependencies.

How’s firenpm is different than create react app project ?

First and foremost it focus only on npm package development, not an app. This can be noticed in the setup and the firenpm workflow. Without using firenpm.web extension you can also develop a typical npm module with it.

Publishing react components to NPM — experiments with firenpm – Medium