Skip to content

Commit a2d07c6

Browse files
Merge pull request #988 from topcoder-platform/PM-464
PM- 464
2 parents d00715a + f2c3e97 commit a2d07c6

File tree

7 files changed

+359
-50
lines changed

7 files changed

+359
-50
lines changed

src/apps/dev-center/src/assets/i/index.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,10 @@ import { ReactComponent as ApiCornerIcon } from './api-corner-icon.svg'
22
import { ReactComponent as ApiIcon } from './api-icon.svg'
33
import { ReactComponent as CommunityAppCornerIcon } from './community-app-corner-icon.svg'
44
import { ReactComponent as CommunityAppIcon } from './community-app-icon.svg'
5+
import { ReactComponent as WorkManagerIcon } from './work-manager-icon.svg'
56

67
export { ApiCornerIcon }
78
export { ApiIcon }
89
export { CommunityAppCornerIcon }
910
export { CommunityAppIcon }
11+
export { WorkManagerIcon }
Loading

src/apps/dev-center/src/dev-center-pages/community-app/landing-page/dev-center-get-started/GetStartedCardsContainer/GetStartedCardsContainer.tsx

+76-50
Original file line numberDiff line numberDiff line change
@@ -3,62 +3,88 @@ import { FC } from 'react'
33
import { BookOpenIcon } from '@heroicons/react/outline'
44
import { LinkButton } from '~/libs/ui'
55

6-
import { ApiCornerIcon, ApiIcon, CommunityAppCornerIcon, CommunityAppIcon } from '../../../../../assets/i'
6+
import {
7+
ApiCornerIcon,
8+
ApiIcon,
9+
CommunityAppCornerIcon,
10+
CommunityAppIcon,
11+
WorkManagerIcon,
12+
} from '../../../../../assets/i'
713
import { DevCenterCard } from '../../dev-center-card'
814
import { rootRoute } from '../../../../../dev-center.routes'
915

1016
import styles from './GetStartedCardsContainer.module.scss'
1117

1218
const GetStartedCardsContainer: FC = () => (
13-
<div className={styles.container}>
14-
<DevCenterCard
15-
cornerIcon={<CommunityAppCornerIcon />}
16-
icon={<CommunityAppIcon />}
17-
title='Community App'
18-
titleClass={styles.communityTitle}
19-
description='Learn about Topcoder Community App and run started code.'
20-
button={(
21-
<LinkButton
22-
primary
23-
size='lg'
24-
label='get started'
25-
className={styles.button}
26-
to={`${rootRoute}/getting-started`}
27-
/>
28-
)}
29-
/>
30-
<DevCenterCard
31-
cornerIcon={<ApiCornerIcon />}
32-
icon={<ApiIcon />}
33-
title='Platform UI'
34-
titleClass={styles.apiTitle}
35-
description='Check out instructions on how to get started with the Platform UI.'
36-
button={(
37-
<LinkButton
38-
primary
39-
size='lg'
40-
label='get started'
41-
className={styles.button}
42-
to={`${rootRoute}/platform-ui`}
43-
/>
44-
)}
45-
/>
46-
<DevCenterCard
47-
cornerIcon={<ApiCornerIcon />}
48-
icon={<BookOpenIcon className='icon-mx' />}
49-
title='Platform UI Storybook'
50-
titleClass=''
51-
description='Explore the Platform UI Storybook for UI development.'
52-
button={(
53-
<LinkButton
54-
primary
55-
size='lg'
56-
label='explore'
57-
className={styles.button}
58-
to={`${rootRoute}/storybook`}
59-
/>
60-
)}
61-
/>
19+
<div>
20+
<div className={styles.container}>
21+
<DevCenterCard
22+
cornerIcon={<CommunityAppCornerIcon />}
23+
icon={<CommunityAppIcon />}
24+
title='Community App'
25+
titleClass={styles.communityTitle}
26+
description='Learn about Topcoder Community App and run started code.'
27+
button={(
28+
<LinkButton
29+
primary
30+
size='lg'
31+
label='get started'
32+
className={styles.button}
33+
to={`${rootRoute}/getting-started`}
34+
/>
35+
)}
36+
/>
37+
<DevCenterCard
38+
cornerIcon={<ApiCornerIcon />}
39+
icon={<ApiIcon />}
40+
title='Platform UI'
41+
titleClass={styles.apiTitle}
42+
description='Check out instructions on how to get started with the Platform UI.'
43+
button={(
44+
<LinkButton
45+
primary
46+
size='lg'
47+
label='get started'
48+
className={styles.button}
49+
to={`${rootRoute}/platform-ui`}
50+
/>
51+
)}
52+
/>
53+
</div>
54+
<div className={styles.container}>
55+
<DevCenterCard
56+
cornerIcon={<ApiCornerIcon />}
57+
icon={<BookOpenIcon className='icon-mx' />}
58+
title='Platform UI Storybook'
59+
titleClass={styles.apiTitle}
60+
description='Explore the Platform UI Storybook for UI development.'
61+
button={(
62+
<LinkButton
63+
primary
64+
size='lg'
65+
label='explore'
66+
className={styles.button}
67+
to={`${rootRoute}/storybook`}
68+
/>
69+
)}
70+
/>
71+
<DevCenterCard
72+
cornerIcon={<ApiCornerIcon />}
73+
icon={<WorkManagerIcon className='icon-mx' />}
74+
title='Work Manager'
75+
titleClass={styles.communityTitle}
76+
description='Get familiar with the Work Manager and execute the starter code.'
77+
button={(
78+
<LinkButton
79+
primary
80+
size='lg'
81+
label='get started'
82+
className={styles.button}
83+
to={`${rootRoute}/work-manager-guide`}
84+
/>
85+
)}
86+
/>
87+
</div>
6288
</div>
6389
)
6490

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,231 @@
1+
# Work Manager Dev Guide
2+
3+
The Work Manager is a part of the Topcoder website for creating and managing challenges. This document covers the Windows 10, Linux and MacOS setup of the development environment in detail.
4+
5+
## Local setup for work manager
6+
7+
### Install VS Code
8+
9+
[https://code.visualstudio.com/Download](https://code.visualstudio.com/Download)
10+
11+
You can use the default options when installing VS Code.
12+
13+
14+
15+
### Install Git
16+
17+
Before you begin contributing to the project, you'll need to have Git installed on your local machine. It’s essential for working in the community and contributing to the repository.
18+
19+
Follow the installation guides below for your operating system:
20+
21+
#### For Windows:
22+
23+
1. **Download the Git Installer:**
24+
- Visit the [Windows Git Installation Guide](https://git-scm.com/downloads/win).
25+
- Click the link to download the Git installer.
26+
27+
2. **Run the Installer:**
28+
- Launch the downloaded installer and follow the installation wizard. You can usually accept the default settings, but make sure to select the option to add Git to your system PATH during installation. This makes Git accessible from any command prompt window.
29+
30+
3. **Verify the Installation:**
31+
- After installation is complete, open a command prompt or Git Bash and type the following command to check if Git was installed correctly:
32+
```
33+
git --version
34+
```
35+
- If Git is installed properly, you’ll see a version number displayed.
36+
37+
#### For Linux:
38+
39+
1. **Install Git via Package Manager:**
40+
- Most Linux distributions come with Git available in their package manager. You can install it by running one of the following commands based on your distribution:
41+
42+
**For Ubuntu/Debian-based systems:**
43+
```
44+
sudo apt update
45+
sudo apt install git
46+
```
47+
48+
**For Fedora:**
49+
```
50+
sudo dnf install git
51+
```
52+
53+
**For CentOS/RHEL:**
54+
```
55+
sudo yum install git
56+
```
57+
58+
2. **Verify the Installation:**
59+
- Once Git is installed, open a terminal and run the following command to verify the installation:
60+
```
61+
git --version
62+
```
63+
- You should see the Git version number displayed in the terminal.
64+
65+
Make sure to check your installation after following these steps to confirm everything is set up correctly.
66+
67+
### Install NVM
68+
69+
Use the node version manager [nvm](https://github.com/nvm-sh/nvm/blob/master/README.md) to easily and safely manage the required version of NodeJS (aka, node). Download and install it per the instructions for your development operating system. Installing a version of node via `nvm` will also install `npm`.
70+
71+
> **NOTE:** If the nvm command is not working it might be because the installation failed to update your paths variable properly. To try and fix this try installing nvm again using sudo.
72+
Once nvm is installed, run:
73+
74+
```sh
75+
nvm install <insert node version>
76+
```
77+
78+
See [the nvm Github README](https://github.com/nvm-sh/nvm/blob/master/README.md#nvmrc) for more information on setting this up.
79+
80+
To validate the nvm, node or npm versions, you can try this in terminal:
81+
82+
```terminal
83+
nvm --version
84+
```
85+
86+
The output should look like this:
87+
88+
```terminal
89+
copilot@DESKTOP-CEFAE6N MINGW64 ~
90+
$ nvm --version
91+
0.39.1
92+
93+
copilot@DESKTOP-CEFAE6N MINGW64 ~
94+
$
95+
```
96+
97+
### Hosts file update
98+
99+
For windows, open the file `C:\Windows\System32\drivers\etc\hosts` in VS Code. We will add these two lines to the end of the file:
100+
101+
```sh
102+
127.0.0.1 local.topcoder-dev.com
103+
127.0.0.1 local.topcoder.com
104+
```
105+
106+
You will need to save the file using admin privileges. The final file should look like this:
107+
108+
```sh
109+
# Copyright (c) 1993-2000 Microsoft Corp.
110+
#
111+
# This is a sample HOSTS file used by Microsoft TCP/IP for Windows
112+
#
113+
# This file contains the mappings of iP addresses to host names.
114+
# entry should be kept on an individual line. The IP address should
115+
# be placed in the first column followed by the corresponding hosts
116+
# The IP address and the host name should be separated by at least
117+
# space.
118+
#
119+
# Additionaly, comments (such as these) may be inserted on individual
120+
# lines or following the machine name denoted by a '#' symbol.
121+
#
122+
# For example:
123+
#
124+
# 102.54.94.97 rhino.acme.com # source server
125+
# 38.25.63.10 x.acme.com # x client host
126+
127+
# localhost name resolution is handled within DNS itself.
128+
# 127.0.0.1 localhost
129+
# ::1 localhost
130+
127.0.0.1 local.topcoder-dev.com
131+
127.0.0.1 local.topcoder.com
132+
```
133+
134+
For mac and linux, the hosts file is normally located at `/etc/hosts` and we add the same two lines to that file as well.
135+
136+
This is how it should like:
137+
138+
```sh
139+
##
140+
# Host Database
141+
#
142+
# localhost is used to configure the loopback interface
143+
# when the system is booting. Do not change this entry.
144+
##
145+
127.0.0.1 localhost
146+
255.255.255.255 broadcasthost
147+
::1 localhost
148+
127.0.0.1 local.topcoder-dev.com
149+
127.0.0.1 local.topcoder.com
150+
```
151+
152+
### Check out the code
153+
154+
Now that all dependencies are set up, we can check out the code. Note that this command will check out the work-manager source code into a directory named `work-manager`.
155+
156+
Run this command on the Git Bash command line:
157+
158+
```terminal
159+
git clone https://github.com/topcoder-platform/work-manager.git
160+
```
161+
162+
```terminal
163+
copilot@DESKTOP-CEFAE6N MINGW64
164+
$ git clone https://github.com/topcoder-platform/work-manager.git
165+
Cloning into 'work-manager'...
166+
remote: Enumerating objects: 9974, done.
167+
remote: Counting objects: 100% (1507/1507), done.
168+
remote: Compressing objects: 100% (507/507), done.
169+
remote: Total 9974 (delta 1162), reused 1027 (delta 1000), pack-reused 8467 (from 3)
170+
Receiving objects: 100% (9974/9974), 4.89 MiB | 2.82 MiB/s, done.
171+
Resolving deltas: 100% (6727/6727), done.
172+
173+
copilot@DESKTOP-CEFAE6N MINGW64 ~
174+
$
175+
```
176+
177+
### Build and run the code
178+
179+
Now that we have the code, we can build it on the VS code terminal.
180+
The first `cd community-app` command just changes us to the directory we created above, after the code was cloned.
181+
At the root of the project directory you'll notice a file called `.nvmrc` which specifies the node version used by the project. The command `nvm use` will use the version specified in the file if no version is supplied on the command line.
182+
183+
* `cd work-manager`
184+
* `nvm use` will warn you to install v12.17.0
185+
* `nvm install v12.17.0`
186+
187+
```terminal
188+
$nvm use
189+
Found '/c/Users/copilot/work-manager/.nvmrc' with version <12.17.0>
190+
Now using node v12.17.0 (npm v6.14.4)
191+
```
192+
193+
Once we have the proper Node version installed (12.17.0), we will install the dependencies:
194+
195+
```terminal
196+
npm i
197+
```
198+
Once the dependencies have installed we run the app:
199+
```terminal
200+
npm run dev
201+
```
202+
203+
204+
### Install the proxy and run it
205+
206+
We need to proxy `https` requests through a local proxy since we don't have a valid SSL key. To do this, we use the `local-ssl-proxy` package. You can install this using this command.
207+
208+
* `npm i -g local-ssl-proxy` You only have to run this once to install the package
209+
* `local-ssl-proxy -n local.topcoder-dev.com -s 443 -t 3000` Every time you want to run the proxy or work on the community app, you will need to run. You will need to grant the proxy admin access.
210+
211+
**NOTE** - You should run the proxy in a *separate* terminal window, to ensure it's always running.
212+
213+
```terminal
214+
$ npm i -g local-ss1-proxy
215+
npm WARN deprecated [email protected]: Package no longer supported. contact [email protected] for more info.
216+
npm WARN notice [SECURITY] underscore has the following vulnerability: 1 high. Go here for more details: https://github.com/advisories?query=underscore - Run `npm i npm@latest -g` to upgrade your pm version, and then `npm audit` to get more info.
217+
c:\users\copilot\.num\versions\node\v8.11.2\bin\local-ss1-proxy
218+
->
219+
C:\Users\copilot\.nvm\versions\node\v8.11.2\bin\node_modules\local-ssl-proxy\bin\local-ssl-proxy + [email protected]
220+
added 18 packages in 3.321s
221+
222+
copilot@DESKTOP-CEFAE6N MINGW64 ~
223+
$ local-ss1-proxy -n local.topcoder-dev.com -s 443 -t 3000
224+
Started proxy: https://local.topcoder-dev.com: 443 -> http://local.topcoder-dev.com:3000
225+
```
226+
227+
### Validation
228+
229+
To validate, we'll run Chrome without web security to avoid it complaining about the local proxy redirects. It will redirect you the login page where you can use the sample test user to login.
230+
231+
* Sample test user: `jcori` / `Appirio123`

src/apps/dev-center/src/dev-center-pages/work-manager/WorkManagerGuide.module.scss

Whitespace-only changes.

0 commit comments

Comments
 (0)