setting up for local frontend development#

This guide shows you how to run a Tinka website project on your own machine.

Access Tinka’s GitHub Organisation#

If you want to clone repositories into your machine, the easiest way is to use (GitHub CLI)[https://cli.github.com/]. It will guide you on setting authorisation up.

To get access to GitHub. You need Okta. Ask IT for enabling Okta and relevant integrations for you.

You also need a SSH key, it should be configured to use the Tinka SSO. Check (GitHub’s own documentation on this).

Setup Node.js and NPM#

There are too many Node.js versions and package managers. Existing projects rely on different Node version and maybe different package managers.

To make things worse, there are so many different ways to install Node and NPM and not all of them enable users to select the right version with ease.

Volta is recommended to solve these problem – install Node, NPM, and other package managers (e.g. Yarn). This tool can automatically switch to the right version as you switch between project directories.

Setup Access to Private NPM Registry#

You will need this to be able to pull Tinka private packages. Packages for Tinka UI are some of the private packages that are only accessible on our private JFrog registry.

  1. Go to https://tinka.jfrog.io/ui/admin/artifactory/user_profile and generate an API key

  2. Copy the following script, save it as a shell script file, and put it at a convenient location. Such as ~/generate-npmrc.sh

    #!/bin/bash
​
JFROG_USERNAME="your_account_here (such as: your.name@tinka.com)"
JFROG_APIKEY="your_api_key_here"
​
URL="https://tinka.jfrog.io/artifactory/api/npm/blaze-npm-releases/auth"
TOKEN=$JFROG_USERNAME:$JFROG_APIKEY
​
echo "" >> ~/.npmrc
echo "# Generated By generate-npmrc.sh"
echo "" >> ~/.npmrc
echo $(curl -u $TOKEN $URL/lacent) | tr [:space:] '\n' >> ~/.npmrc
echo $(curl -u $TOKEN $URL/tinka) | tr [:space:] '\n' >> ~/.npmrc
echo "legacy-peer-deps=true" >> ~/.npmrc

  3. Run the script like sh ~/generate-npmrc.sh It will create a file named as .npmrc. This file tells your package manager to fetch packages with namespace @lacent and @tinka from our private registry, with your personal API key.

Get Support#

Slack: #tech, #frontenders