@statisticsnorway/cra-template-dapla-js-lib v0.3.0

cra-template-dapla-js-lib

This little template repository can be used as a cra-template when creating new JavaScript libraries and/or React components. Basing a new project on a cra-template can be quite powerful and lets you skip the boring part of a new project setup. Following the official documentation on templates for React, this template offers a good start for any JavaScript Library built for Statistics Norway Data Platform (Dapla).

How to set it up

From npm

yarn create react-app [lib-name] --template @statisticsnorway/dapla-js-lib

E.g. yarn create react-app new-dapla-lib --template @statisticsnorway/dapla-js-lib

Locally

1. Clone this repository
2. Create your new library by running yarn create react-app [lib-name] --template file:[path-to-this-repository]

For example, if you want to start a new project called new-dapla-lib and you cloned this repository to /Users/me/Projects/react-templates/cra-template-dapla-js-lib the command would be yarn create react-app new-dapla-lib --template file:/Users/me/Projects/react-templates/cra-template-dapla-js-lib.

Things to remember

Even though this type of setup for a new project skips a lot of configuration and setup there are still some small things you have to change and/or add in your new project.

First, some important properties are still missing from the package.json-file in your newly created project, and should be added:

• A description
• Link to the repository through repository
• An author
• A license where you specify the one from the licenses array
• directories because they use that in the official documentation

These are all included in the template.json file found in this repository, but cra-templates for React is not quite at the level of copying every property from the template-json yet.

Secondly, some things need to be changed:

• In public/index.html change:
  • content in <meta name="description" />
  • <title>
• In public/manifest.json change short_name and name
• Rename npmignore to .npmignore
• Insert your library name (GitHub repository name) after sonar.projectKey=statisticsnorway_ in sonar-project.properties

Phew! Now you should be good to go!

Another thing you might want to consider is moving all Rollup, Babel and Testing Library dependencies from dependencies to devDependencies in your new project (in the package.json file). The template should have done this for you but at the moment cra-templates does not support declaring devDependencies in a template. This is a matter of subjective choice though, because when you build your application for production Rollup will not include these libraries anyway, even though they are listed as dependencies, not devDependencies, if you have declared them as external in rollup.config.js.

Publish cra-template library

To publish to npm you need a user and a membership in the statisticsnorway organization on npm. The user must also have 2FA authentication enabled. Steps to follow:

1. Login into your npm account in the terminal with npm login
2. Make sure all tests works (test components in the example application as well, if you made a new one)
3. Bump version in package.json
4. Dry run a release with npm pack
5. Publish with npm publish --access public --otp=<code> (<code> is your 2FA code, without <>)

Under the hood

So, what does this template actually give you?

• It pre-installs some dependencies, mainly:
  • Babel
  • Rollup
  • PrimeReact
  • React
• Configures Babel and Rollup correctly
• Sets up CI for JavaScript libraries with Azure Pipelines on BIP
  • Configures SonarCloud
• Sets up a skeleton for the library and its associated React example application