Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: added typescript installation guide in INSTALLATION.md #1251

Merged
merged 4 commits into from
Dec 29, 2023
Merged
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 27 additions & 14 deletions INSTALLATION.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,12 @@ This document provides instructions on how to set up and start a running instanc
- [Clone This Repository](#clone-this-repository)
- [Change Directory into the Cloned Repo](#change-directory-into-the-cloned-repo)
- [Setting up NPM](#setting-up-npm)
- [Setting up Typescript](#setting-up-typescript)
- [Installing required packages/dependencies](#installing-required-packagesdependencies)
- [Configuration](#configuration)
- [Creating .env file](#creating-env-file)
- [Setting up REACT\_APP\_TALAWA\_URL in .env file](#setting-up-react_app_talawa_url-in-env-file)
- [Setting up REACT\_APP\_RECAPTCHA\_SITE\_KEY in .env file](#setting-up-react_app_recaptcha_site_key-in-env-file)
- [Setting up REACT_APP_TALAWA_URL in .env file](#setting-up-react_app_talawa_url-in-env-file)
- [Setting up REACT_APP_RECAPTCHA_SITE_KEY in .env file](#setting-up-react_app_recaptcha_site_key-in-env-file)
- [Post Configuration Steps](#post-configuration-steps)
- [Running Talawa-Admin](#running-talawa-admin)
- [Accessing Talawa-Admin](#accessing-talawa-admin)
Expand All @@ -26,8 +27,8 @@ This document provides instructions on how to set up and start a running instanc
- [Debugging tests](#debugging-tests)
- [Linting code files](#linting-code-files)
- [Husky for Git Hooks](#husky-for-git-hooks)
- [pre-commit hook](#pre-commit-hook)
- [post-merge hook](#post-merge-hook)
- [pre-commit hook](#pre-commit-hook)
- [post-merge hook](#post-merge-hook)

# Prerequisites for Developers

Expand All @@ -39,7 +40,9 @@ We recommend that you follow these steps before beginning development work on Ta
The INSTALLATION.md files in both repositories show you how. The Talawa-API INSTALLATION.md will also show you the Organization URL to use access Talawa Admin.

# Installation

You will need to have copies of your code on your local system. Here's how to do that.

## Clone This Repository

First you need a local copy of `talawa-admin`. Run the following command in the directory of choice on your local system.
Expand All @@ -62,7 +65,18 @@ cd talawa-admin

## Setting up NPM

If you've followed the previous steps you should have already set up node.js on your system. [Click here](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) for the official setup guide for npm.
Best way to install and manage `node.js` is making use of node version managers. Two most popular node version managers right now are [fnm](https://github.com/Schniz/fnm) and [nvm](https://github.com/nvm-sh/nvm). We'd recommend `fnm` because it's written in `rust` and is much faster than `nvm`. Install whichever one you want and follow their guide to set up `node.js` on your system.

## Setting up Typescript

As `talawa-admin` and `talawa-api` repositories are written using [Typescript](https://www.typescriptlang.org/), you will need to install typescript on your machine.
MahendraDani marked this conversation as resolved.
Show resolved Hide resolved
We recommend to install `Typescript` globally on your machine by running the following command in the terminal:

```
npm install -g typescript
```

For more details please refer to the installation guidelines provided in the [official docs](https://www.typescriptlang.org/download).

## Installing required packages/dependencies

Expand All @@ -71,8 +85,11 @@ Run the following command to install the packages and dependencies required by `
```
npm install --legacy-peer-deps
```

# Configuration

It's important to configure Talawa-Admin. Here's how to do it.

## Creating .env file

A file named .env is required in the root directory of talawa-admin for storing environment variables used at runtime. It is not a part of the repo and you will have to create it. For a sample of `.env` file there is a file named `.env.example` in the root directory. Create a new `.env` file by copying the contents of the `.env.example` into `.env` file. Use this command:
Expand All @@ -93,7 +110,7 @@ Follow the instructions from section [Setting up REACT_APP_TALAWA_URL in .env fi

## Setting up REACT_APP_TALAWA_URL in .env file

Add the endpoint for accessing talawa-api graphql service to the variable named `REACT_APP_TALAWA_URL` in the `.env` file.
Add the endpoint for accessing talawa-api graphql service to the variable named `REACT_APP_TALAWA_URL` in the `.env` file.

```
REACT_APP_TALAWA_URL="http://API-IP-ADRESS:4000/graphql/"
Expand Down Expand Up @@ -126,6 +143,7 @@ REACT_APP_RECAPTCHA_SITE_KEY="this_is_the_recaptcha_key"
```

# Post Configuration Steps

It's now time to start Talawa-Admin and get it running

## Running Talawa-Admin
Expand All @@ -148,12 +166,12 @@ http://localhost:3000/

The first time you navigate to the running talawa-admin's website you'll land at talawa-admin registration page. Sign up using whatever credentials you want and create the account. Make sure to remember the email and password you entered because they'll be used to sign you in later on.


## Talawa-Admin Login

Now sign in to talawa-admin using the `email` and `password` you used to sign up.

# Testing

It is important to test our code. If you are a contributor, please follow these steps.

## Running tests
Expand All @@ -177,7 +195,6 @@ You don't need to re-run the `npm run jest-preview` command each time, simply ru

![Debugging Test Demo](./public/images/jest-preview.webp)


## Linting code files

You can lint your code files using this command:
Expand All @@ -188,30 +205,26 @@ npm run lint:fix

## Husky for Git Hooks


We are using the package `Husky` to run git hooks that run according to different git workflows.

<br/>

#### pre-commit hook
We run a pre-commit hook which automatically runs code quality checks each time you make a commit and also fixes some of the issues. This way you don't have to run them manually each time.

We run a pre-commit hook which automatically runs code quality checks each time you make a commit and also fixes some of the issues. This way you don't have to run them manually each time.

If you don't want these pre-commit checks running on each commit, you can manually opt out of it using the `--no-verify` flag with your commit message as shown:-

git commit -m "commit message" --no-verify

<br/>


#### post-merge hook

We are also running a post-merge(post-pull) hook which will automatically run "npm install --legacy-peer-deps" only if there is any change made to pakage.json file so that the developer has all the required dependencies when pulling files from remote.


If you don't want this hook to run, you can manually opt out of this using the `no verify` flag while using the merge command(git pull):

git pull --no-verify
git pull --no-verify

<br/>