Skip to content

Commit 8242a37

Browse files
committed
Update installation order
1 parent 5e40c53 commit 8242a37

1 file changed

Lines changed: 67 additions & 52 deletions

File tree

docs/getting-started/installation.md

Lines changed: 67 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,43 @@ ReVISit project is open-source – meaning anyone can see the entire codebase. M
44

55
For most users, the best place to start is the template repository (first option below). If you want all demos and tighter upstream parity, or are considering contributing to reVISit, we recommend you fork the repository instead.
66

7-
## Before you start
7+
## Installing Required Software
88

99
Install these tools before cloning and running a study locally:
1010

11+
- [Visual Studio Code](https://code.visualstudio.com/), or another editor with JSON support.
1112
- [Git](https://git-scm.com/downloads), so you can clone the template repository and share changes with collaborators.
12-
- [Visual Studio Code](https://code.visualstudio.com/), or another editor with JSON support.
13-
- The Active LTS version of [Node.js](https://nodejs.org/).
14-
- [Yarn](https://yarnpkg.com/), which reVISit uses to install dependencies and run the local server.
13+
- The Active LTS version of [Node.js](https://nodejs.org/), which also installs NPM.
1514

16-
You can check whether Git, Node, and Yarn are already installed with:
15+
:::info
16+
NPM is installed with Node.js. You usually do not need to install NPM separately: install Node.js first, then use NPM to install Yarn. If NPM is not installed for any reason, review the [NPM documentation](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) to get started.
17+
:::
18+
19+
You can check whether Git, Node.js, and NPM are already installed with:
1720

1821
```bash
1922
git --version
2023
node --version
24+
npm --version
25+
```
26+
27+
Yarn can be installed using NPM. Run the following command to install Yarn:
28+
29+
```bash
30+
npm i -g yarn
31+
```
32+
33+
:::note
34+
If your machine restricts global installs, run the command with administrator permissions:
35+
36+
```bash
37+
sudo npm i -g yarn
38+
```
39+
:::
40+
41+
After installing Yarn, check that it was installed correctly:
42+
43+
```bash
2144
yarn --version
2245
```
2346

@@ -59,86 +82,78 @@ cd your-repository-name
5982
If you have not configured GitHub authentication locally, you can use "Download ZIP".
6083
:::
6184

62-
## Forking Repository (Advanced Alternative to Template Repository)
63-
64-
Forking the repository is a more advanced option that allows you to have a copy of the entire `study` repository in your GitHub account. This means that you will have access to all the demo studies and that you can choose to follow the latest changes from the main repository (e.g., by following the `dev` branch). However, it also means that your repository will be linked to the upstream repository's fork network, which can make it more complex to manage.
65-
66-
To fork, start by navigating to the following GitHub repository: https://github.com/revisit-studies/study
85+
## Run the Local Server
6786

68-
You should see a "fork" button on the same row as the name of the repository. When you fork a repository, you are essentially creating your own copy of the repository in your GitHub account. This means that any changes you commit and push to this new repository will not affect the main source code.
69-
70-
![Fork button](./img/fork-repo.png)
87+
After cloning your repository, make sure you are inside the repository folder:
7188

72-
:::info
73-
GitHub only allows you to fork a repository once. If you have already forked the repository, you will need to clone the repository to your local machine, create a new repo on your account, and run `git remote set-url origin new.git.url/here` to allow you to have 2 versions of the repository in your account.
74-
:::
89+
```bash
90+
cd your-repository-name
91+
```
7592

76-
When forking the repository, you will be prompted for some basic information about this repository (such as the desired name). Once you've forked the repository into your own GitHub account, you can [clone the repository to your local computer](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository).
93+
Then install the packages that reVISit needs to run:
7794

78-
:::info
79-
You can rename the repository to suit your needs, but if you change the name, you also need to adjust the `VITE_BASE_PATH` in your [`.env`](https://github.com/revisit-studies/study/blob/main/.env) file to reflect that change.
80-
:::
95+
```bash
96+
yarn install
97+
```
8198

82-
After the repository is on your local machine, you will have the entire codebase for your personal use. Any changes that you make to this repository can be committed and then pushed to your forked repository for other users in your organization to see.
99+
Once this is finished, start the local server:
83100

84-
## Installing Required Software
101+
```bash
102+
yarn serve
103+
```
85104

86-
If you already have Git, Node.js, Yarn, and a code editor installed, you can go to Step 2 below.
105+
This will launch a local web server where you can view and interact with reVISit. By default, you can access it by visiting [http://localhost:8080/](http://localhost:8080/). Any change you make to the code will automatically update the website.
87106

88-
:::info
89-
Yarn requires that you have the package manager NPM installed. If you do not have NPM installed, please review the [NPM documentation](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) to get started. These docs will also direct you on how to install Node – a prerequisite of NPM.
107+
:::warning
108+
If `yarn install` or `yarn serve` says it cannot find `package.json`, you are probably not inside the repository folder. Run `cd your-repository-name` first, then try the command again.
90109
:::
91110

92-
**Step 1: Install Yarn on your local computer using NPM:**
93-
94-
```npm i -g yarn```
111+
When you visit the site, you'll see the studies registered in your local `public/global.json` file. You can interact with any of these studies to get some familiarity (and hopefully some inspiration) for how reVISit can help you quickly launch a crowd-sourced visualization study.
95112

96113
:::note
97-
If your machine restricts global installs, run the command with administrator permissions:
98-
99-
```bash
100-
sudo npm i -g yarn
101-
```
114+
If you started from the template repository, this will be a smaller set of starter tutorial studies.
102115
:::
103116

104-
**Step 2: Once Yarn is successfully installed, navigate to your local repository and run the following Yarn command:**
117+
:::warning
118+
We do not support using `npm` to run reVISit. Please use `yarn` for all package management and running commands.
119+
:::
105120

106-
```yarn install```
121+
## Forking Repository (Advanced Alternative to Template Repository)
107122

108-
This will install all the packages that the reVISit requires to run.
123+
Forking the repository is a more advanced option that allows you to have a copy of the entire `study` repository in your GitHub account. This means that you will have access to all the demo studies and that you can choose to follow the latest changes from the main repository (e.g., by following the `dev` branch). However, it also means that your repository will be linked to the upstream repository's fork network, which can make it more complex to manage.
109124

110-
**Step 3: Once this is finished, you can now start the program:**
125+
To fork, start by navigating to the following GitHub repository: https://github.com/revisit-studies/study
111126

112-
```yarn serve```
127+
You should see a "fork" button on the same row as the name of the repository. When you fork a repository, you are essentially creating your own copy of the repository in your GitHub account. This means that any changes you commit and push to this new repository will not affect the main source code.
113128

114-
This will launch a local web server which can be accessed to view and interact with reVISit. By default, you can access this by visiting [http://localhost:8080/](http://localhost:8080/). Any change you make to the code will automatically update the website.
129+
![Fork button](./img/fork-repo.png)
115130

116-
:::warning
117-
If `yarn install` or `yarn serve` says it cannot find `package.json`, you are probably not inside the repository folder. Run `cd your-repository-name` first, then try the command again.
131+
:::info
132+
GitHub only allows you to fork a repository once. If you have already forked the repository, you will need to clone the repository to your local machine, create a new repo on your account, and run `git remote set-url origin new.git.url/here` to allow you to have 2 versions of the repository in your account.
118133
:::
119134

120-
When you visit the site, you'll see a list of demo studies, identical to [the demo page](https://revisit.dev/study/). You can interact with any of these studies to get some familiarity (and hopefully some inspiration) for how reVISit can help you quickly launch a crowd-sourced visualization study.
135+
When forking the repository, you will be prompted for some basic information about this repository (such as the desired name). Once you've forked the repository into your own GitHub account, you can [clone the repository to your local computer](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository).
121136

122-
:::note
123-
If you started from the template repository, this will be a smaller set of starter tutorial studies.
137+
:::info
138+
You can rename the repository to suit your needs, but if you change the name, you also need to adjust the `VITE_BASE_PATH` in your [`.env`](https://github.com/revisit-studies/study/blob/main/.env) file to reflect that change.
124139
:::
125140

126-
:::warning
127-
We do not support using `npm` to run reVISit. Please use `yarn` for all package management and running commands.
128-
:::
141+
After the repository is on your local machine, you will have the entire codebase for your personal use. Any changes that you make to this repository can be committed and then pushed to your forked repository for other users in your organization to see.
129142

130143
<!-- Importing links -->
131144
import StructuredLinks from '@site/src/components/StructuredLinks/StructuredLinks.tsx';
132145

133146
<StructuredLinks
134-
referenceLinks={[
147+
codeLinks={[
135148
{name: "ReVISit Template Repository", url: "https://github.com/revisit-studies/template"},
136-
{name: "ReVISit Main Repository", url: "https://github.com/revisit-studies/study"},
149+
{name: "ReVISit Main Repository", url: "https://github.com/revisit-studies/study"}
150+
]}
151+
referenceLinks={[
137152
{name: "Cloning Repository", url: "https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository"},
138-
{name: "Git Installation", url: "https://git-scm.com/downloads"},
139153
{name: "Visual Studio Code Installation", url: "https://code.visualstudio.com/"},
154+
{name: "Git Installation", url: "https://git-scm.com/downloads"},
140155
{name: "Node.js Installation", url: "https://nodejs.org/en"},
141-
{name: "Yarn Installation", url: "https://yarnpkg.com/"},
142-
{name: "NPM Installation", url: "https://docs.npmjs.com/downloading-and-installing-node-js-and-npm"}
156+
{name: "NPM Installation", url: "https://docs.npmjs.com/downloading-and-installing-node-js-and-npm"},
157+
{name: "Yarn Installation", url: "https://yarnpkg.com/getting-started/install"}
143158
]}
144159
/>

0 commit comments

Comments
 (0)