JPMorgan Chase Software Engineering Virtual Experience

Setting up your dev

environment for the
program!
Module 3 - Display data visually for traders
 Setting up your dev environment for the program!

We know your first time using

Python, or setting up a web
development environment at work,
might be daunting.

Or feel like it uses technologies you haven’t used before, or might

feel like it takes too long.
 Setting up your dev environment for the program!

So to help you out we’ve created this

step-by-step guide to setting up your
computer for this task.

A lot of the things you do here, you will also do when you set
yourself up at an in-office internship too. Look like an amazing hire
when you breeze through dev environment setup!

With this guide, the approximate time to get a development

environment working for you is 10 minutes.
 Setting up your dev environment for the program!

To start, choose the application environment based on

your device & current skill level

(Mac)
Setting up your dev environment for task
3

(Windows) (Linux)
Setting up your dev environment for task Setting up your dev environment for task
3 3
JPMorgan Chase Software Engineering Virtual Experience

Setting up your Mac for the

JPMorgan Chase program
Module 3 - Display data visually for traders
 Setting up your dev environment for the program!

Local Setup (Mac)

● If your machine is running on Mac, follow this setup guide to get started. This
setup is very much alike to the setup you’ve done previously in module 2, so if
you’ve done that, there’s just a few new things you need to do here.

● First you must have git installed in your system. Git is used by most
programmers to collaborate with code in software projects. To install, follow
this quick guide. You know you have installed successfully when you get a
version output on your terminal by typing `git --version`:
 Setting up your dev environment for the program!

Local Setup (Mac)

● Once you have git installed, you need a copy of the application code you’ll be
working with on your machine. To do this, you must execute the following
commands on your terminal:

git clone https://github.com/insidesherpa/JPMC-tech-task-3.git

git clone https://github.com/insidesherpa/JPMC-tech-task-3-PY3.git

● This command will download the code repositories from github to your
machine in the current working directory of the terminal you executed the
command in. Downloading the 2 repositories above will give you options later
 Setting up your dev environment for the program!

Local Setup (Mac)

● You’ll know you cloned successfully if you have the copy of the application
code on your machine:

note: the image here just does not contain the other repository but it
should if you did the previous slides and execute the ls command. `ls`
just lists the files/folders in the current directory
 Setting up your dev environment for the program!

Local Setup (Mac)

● To access the files inside from the terminal, just change directory by typing
the following commands:
cd JPMC-tech-task-3
ls

note: If you choose to work using python3 and your system has version
python3 as default instead of python2.7.x, then choose to go into the
other repository you downloaded instead. (otherwise, use the other repo
above); cd changes directory your terminal is in. For more info on how
to use cd, check this

cd JPMC-tech-task-3-py3
 Setting up your dev environment for the program!

Local Setup (Mac)

● To clarify, you’re only supposed to work on one of the repositories you cloned
/ downloaded into your system. It all depends on what Python version you
primarily use.

● Python is just a scripting / programming language we developers use quite

often in the field. This application you’ll be working on uses it.

● We’ll discuss checking / installing Python in your system in the following

slides
 Setting up your dev environment for the program!

Local Setup (Mac)

● Next, you’ll need to have Python 2.7 and/or Python 3 installed on your
machine. Follow the instructions here(python 2.7) and/or here (python 3) You
can verify this on your terminal if you get a result like:
Execute the command below to verify what version
you have:

python --version

Note: the image here is only of 2.7 but it should be

similar if you check for python3. If you install both
verisons, make sure python command in your
terminal at least maps to 2.7.x

(any python 2.7.x > = 2.7.16 should suffice

Sometimes your system might have it as
but the latest 2.7.x is recommended (2.7.17);
any python 3.x >= 3.6is fine, latest is recommended (3.8.0))python3 --version
 Setting up your dev environment for the program!

Local Setup (Mac)

● Once you have Python 2.7 and/or Python 3 installed, you can start the server
application in one terminal by just executing it:
(note: just choose to run one server; either the python 2 or python 3 version of server. Run the
commands below depending on your python version)

// If python --version = 2.7+, you must be in the JPMC-tech-task-3

// If python --version = 3+ , you must be in JPMC-tech-task-3-py3 directory
python datafeed/server.py

// If your system makes the distinction of python3 as `python3`,

// you must be in JPMC-tech-task-3-py3 directory
python3 datafeed/server3.py

If ever you encounter an error when starting the server application, see troubleshooting in this slide
 Setting up your dev environment for the program!

Local Setup (Mac)

● If you’ve done the previous slide, then you should get something similar to the
pic below when you ran the server.

● To be clear, the server application isn’t stuck. It’s behaving perfectly normal
here. The reason why it’s just like that for now is because it’s just listening for
requests

● For us to be able to make requests, we have to start the client application.

The following slides will help you do that.
 Setting up your dev environment for the program!

Local Setup (Mac)

● In a separate terminal, let’s install the other remaining dependencies i.e. Node
and Npm. Node is a JavaScript runtime environment that executes JavaScript
code outside of a browser and Npm is node’s package manager that helps us
to install other libraries/dependencies we’ll be using in our web application
app.

● To install node and npm and be able to manage versions seamlessly we will
install NVM (node version manager). Once this is on your machine you can
basically install any version of node and npm and switch depending on a
project’s needs. Follow these instructions for to install nvm for mac.

note:you might need to have Xcode also installed in your system (https://github.com/nvm-sh/nvm#important-notes)
 Setting up your dev environment for the program!

Local Setup (Mac)

● You will know you’ve successfully installed nvm if you get a similar result
below when you type the command nvm --version:
 Setting up your dev environment for the program!

Local Setup (Mac)

● Now, we just need to install the right node version using nvm and that would
consequently get us the right npm version as well. We do this by executing
the commands:

nvm install v11.0.0

nvm use v11.0.0

● You should end up with a similar result in the next slide after doing the
commands above
 Setting up your dev environment for the program!

Local Setup (Mac)

To check your node version type and
enter:

node -v

To check your npm version type and

enter:

npm -v

Take note: If you open a new terminal after all this, make sure to recheck your node version and npm version. It
might be the case you’ve switched to a different version so just execute `nvm use v11.0.0` again if ever...
 Setting up your dev environment for the program!

Local Setup (Mac)

● Finally, to start the client application, all we have to do would be to run the
commands below

npm install Note: If npm install succeeded for you (i.e. no errors) you don’t have
to do it again… But it always has to be successful first before you
execute npm start
npm start

● If all goes well (and it should), you should end up with a similar result in the
next slide. See troubleshooting slides if you encounter any problems with
npm install
 Setting up your dev environment for the program!

Local Setup (Mac)

Note: This part assumes no errors came out of npm install. Some data should show if you click on the
“Start Streaming Data” button. If nothing is showing, check the terminal where you’re running the server
and see if anything printed out, like “Query received”. If there’s something like that and you’re not seeing
results, then try using a different browser (e.g. Chrome/Firefox) and checking localhost:3000. If no response
like “Query received” got printed in the terminal running the server, you might be experiencing this issue.
 Setting up your dev environment for the program!

Local Setup: Troubleshooting (Mac)

● If you did not encounter any issues, your setup is finished. From here on, you
can make changes to the code and eventually arrive at the desired output.

● If you did encounter issues, check if the commonly encountered issues listed
in the next few slides will solve your problem:

○ dateutil dependency
○ npm install or npm start errors
○ Socket unavailable
 Setting up your dev environment for the program!

Local Setup: Troubleshooting (Mac)

● In some cases, dependency issues might arise like when you run `server.py`:

In this case, you must install pip first. pip is python’s package manager for
installing python dependencies. Make sure you install pip for the right Python
version you’re working with in this project. You can check your pip version by
pip --version and it will tell which python version it maps too
 Setting up your dev environment for the program!

Local Setup: Troubleshooting (Mac)

● Installing pip nowadays usually involves downloading the get-pip.py script. If
you followed the instructions in the last slide, it usually involves using the
command:
curl https://bootstrap.pypa.io/get-pip.py -o get-pip.py

If you don’t have curl, just install it in your system. For mac, it’s this way
Then just run the script using python:
//if python --version = 2.7+ this will install pip for python2
//if python --version = 3+ this will install pip for python3
python get-pip.py

//if your system makes the distinction of python3 as `python3` then

//doing the command below will install pip for python3
python3 get-pip.py
 Setting up your dev environment for the program!

Local Setup: Troubleshooting (Mac)

● Then afterwards, you can run the following command on your terminal to
install the dependency:

pip install python-dateutil

Afterwards, you can rerun the server and then rerun the client

Note: For the command above, whatever python version your pip corresponds to (i.e. the output
of pip --version, that is the python version that will have the dependency installed). So if you’re
pip corresponds to python2.7.x then doing the command above will install python-dateutil for
python2.7.x
 Setting up your dev environment for the program!

Local Setup: Troubleshooting (Mac)

● In other cases, you might encounter problems after doing npm install. Errors
like the following might appear on your end:
CASE A:
 Setting up your dev environment for the program!

Local Setup: Troubleshooting (Mac)

● CASE A: If you’re having a problem similar to this situation, most likely, you
haven’t set python in npm to map to python2.7.x. Make sure you’ve installed
python 2.7.x first and make sure you map the python command npm uses to
python 2.7.x . Here’s a reference on how to do it.

● In our setup node-gyp is called by way of npm, so in order for you to avoid the
error, you have to explicitly tell npm what python version to use. Thus, you
have to set npm's 'python' config key to the appropriate value:

○ npm config set python /path/to/executable/python where /path/to/executable/python is the

directory where the python2.7.x binary is, for example in /usr/bin/python usually in linux/mac or
C:\\Python27 for Windows
 Setting up your dev environment for the program!

Local Setup: Troubleshooting (Mac)

● CASE A (continuation): Alternatively, you can set python in your system to
map to python2.7.x. Make sure you’ve installed python 2.7.x first and make
sure you map the python command to python 2.7.x (meaning python
--version should output 2.7.x). There’s a discussion in our github repo on how
to go about this. (while the link is in the task-2 repo, the proposed solution is pretty much the same)

● It could help that you also temporarily remap your python3.x to the command
python3 if you also have it in your system. This is also discussed in the
github thread mentioned in the earlier bullet point.
 Setting up your dev environment for the program!

Local Setup: Troubleshooting (Mac)

CASE B:

● CASE B: If you’re having a problem similar to this situation, most likely, you
aren’t running the server application alongside the client app. Make sure you
have another terminal open wherein you’re running the server app which is
run via python datafeed/server.py or python datafeed/server3.py

If running the server app errors out for you might be experiencing this other
problem (see linked slide)
 Setting up your dev environment for the program!

Local Setup: Troubleshooting (Mac)

● After trying the earlier suggestions for troubleshooting and npm install still
errors out for you, try downloading the node_modules here.

● Then replace the node_modules inside your copy of the repo with the one you
downloaded

● Afterwards, you can go ahead and just execute npm start (no need to run
npm install)
 Setting up your dev environment for the program!

Local Setup: Troubleshooting (Mac)

● In other cases, you might encounter problems running the server app
CASE A:

note: the example here is from windows but a similar error might appear for mac
This is most likely because you have a firewall open preventing you from accessing 8080. You can try the
following workarounds:
- Temporarily turn off your firewall
- Using any text editor, open the datafeed/server.py in the repository using your code editor and look for
the line where it says port = 8080. change that to port = 8085
- Similarly, open the src/DataStreamer.ts and change the line where it has 8080 to 8085
 Setting up your dev environment for the program!

Local Setup: Troubleshooting (Mac)

CASE B:

In this case make sure you're only running one instance of the server.py because it hooks itself to port 8080,
and once that port is used nothing else can use it. If you want to free that up, terminate the old server.py
you're running from one of your terminals by hitting cmd+c. Alternatively you can kill the process listening on
a port (i.e. in this case 8080) by following this guide
 Setting up your dev environment for the program!

Local Setup (Mac)

● If you did encounter any issues, please post your issue/inquiry here:
https://github.com/insidesherpa/JPMC-tech-task-3/issues or
https://github.com/insidesherpa/JPMC-tech-task-3-py3/issues depending on
what repository you chose to work in. When submitting a query, please don’t
forget to provide as much context as possible, i.e. your OS, what you’ve done,
what your errors is/are, etc (screenshots would help too)

● You can also submit your query in the module page’s support modal that pops
out when you click the floating element on the page (see image below)
JPMorgan Chase Software Engineering Virtual Experience

Setting up your Windows for the

JPMorgan Chase program
Module 3 - Display data visually for traders
 Setting up your dev environment for the program!

Local Setup (Windows)

● If your machine is running on Windows, follow this setup guide to get started
(the examples here are on Windows X but it should be relatively similar for other
versions). This setup is very much alike to the setup you’ve done previously in
module 2, so if you’ve done that, there’s just a few new things to do here.

● First you must have git installed in your system. Git is usually used by
programmers to collaborate with code in a software project.To do this, follow this
quick guide. You know you have installed successfully when you get this output
on your command line (cmd). (any git version should suffice but the latest is recommended)
 Setting up your dev environment for the program!

Local Setup (Windows)

● Once you have git installed, you need a copy of the application code you’ll be
working with on your machine. To do this, you must execute the following
commands on your terminal:

git clone https://github.com/insidesherpa/JPMC-tech-task-3.git

git clone https://github.com/insidesherpa/JPMC-tech-task-3-PY3.git

● This command will download the code repositories from github to your
machine in the current working directory of the terminal you executed the
command in. Downloading the 2 repositories above will give you options later
 Setting up your dev environment for the program!

Local Setup (Windows)

● You’ll know you cloned successfully if you have the copy of the application
code on your machine:

note: the image here just does not contain the other repository but it
should if you did the previous slides and execute the dir command. `dir`
just lists the files/folders in the current directory
 Setting up your dev environment for the program!

Local Setup (Windows)

● To access the files inside from the terminal, just change directory by typing:
cd JPMC-tech-task-3

note: If you choose to work using python3 and your system has version
python3 or above instead of python2.7.x, then choose to go into the other
repository you downloaded instead. (otherwise, use the other repo above);
cd changes directory your terminal is in. For more info on how to use cd,
check here

cd JPMC-tech-task-3-py3
 Setting up your dev environment for the program!

Local Setup (Windows)

● To clarify, you’re only supposed to work on one of the repositories you cloned
/ downloaded into your system. It all depends on what Python version you
primarily use

● Python is just a scripting / programming language we developers use quite

often in the field. This application you’ll be working on uses it.

● We’ll discuss checking / installing Python in your system in the following

slides
 Setting up your dev environment for the program!

Local Setup (Windows)

● Next, you’ll need to have Python 2.7 and/or Python 3+ installed on your
machine. Follow the instructions here (for python2), and/or here (for python3)
You can verify this on your command line (cmd) if you get a result like:
Execute the command below to verify what
version you have:

python --version

Note: the image here is only of 2.7 but it should be

similar if you check for python3. If you install both
versions, make sure the command python maps
to 2.7.x at least
(any python 2.7.x > = 2.7.16 should suffice
Sometimes your system might have it as
but the latest 2.7.x is recommended (2.7.17);
any python 3.x >= 3.6is fine, latest is recommended (3.8.0)) python3 --version
 Setting up your dev environment for the program!

Local Setup (Windows)

● If something went wrong with the output you got from the previous slide,
please check the Troubleshooting slides for Windows in this guide.
 Setting up your dev environment for the program!

Local Setup (Windows)

● Once you have python is installed, all you have to do get the server up and
running is to start the server in its own cmd. Ensure that the command line
wherein you run the server app is on Administrator mode:
 Setting up your dev environment for the program!

Local Setup (Windows)

● Once you have Python 2.7 and/or Python 3 installed, you can start the server
application in one terminal by just executing it:
(note: just choose to run one server; either the python 2 or python 3 version of server. Run the
commands below depending on your python version)

// If python --version = 2.7+, you must be in the JPMC-tech-task-3

// If python --version = 3+ , you must be in JPMC-tech-task-3-py3 directory
python datafeed/server.py

// If your system makes the distinction of python3 as `python3`,

// you must be in JPMC-tech-task-3-py3 directory
python3 datafeed/server3.py

If ever you encounter an error when starting the server application, see troubleshooting in this slide
 Setting up your dev environment for the program!

Local Setup (Windows)

● If you’ve done the previous slide, then you should get something similar to the
pic below when you ran the server.

● To be clear, the server application isn’t stuck. It’s behaving perfectly normal
here. The reason why it’s just like that for now is because it’s just listening for
requests

● For us to be able to make requests, we have to start the client application.

The following slides will help you do that.
 Setting up your dev environment for the program!

Local Setup (Windows)

● In a separate command line, let’s install the other remaining dependencies i.e.
Node and Npm. Node is a JavaScript runtime environment that executes
JavaScript code outside of a browser and Npm is node’s package manager
that helps us to install other libraries/dependencies we’ll be using in our web
application app.

● To install node and npm and be able to manage versions seamlessly we will
install NVM (node version manager). Once this is on your machine you can
basically install any version of node and npm and switch depending on a
project’s needs. Follow these instructions to install nvm for windows.
 Setting up your dev environment for the program!

Local Setup (Windows)

● You will know you’ve successfully installed nvm if you get a similar result
below when you type the command nvm -v
 Setting up your dev environment for the program!

Local Setup (Windows)

● Now, we just need to install the right node version using nvm and that would
consequently get us the right npm version as well. We do this by executing
the commands:

nvm install v11.0.0

nvm use v11.0.0

● You should end up with a similar result in the next slide after doing the
commands above
 Setting up your dev environment for the program!

Local Setup (Windows)

To check your node version type and
enter:

node -v

To check your npm version type and

enter:

npm -v

Take note: If you open a new terminal after all this, make sure to recheck your node version and npm version. It
might be the case you’ve switched to a different version so just execute `nvm use v11.0.0` again if ever...
 Setting up your dev environment for the program!

Local Setup (Windows)

● Because windows’ nvm isn’t exactly like mac’s or linux’s, there’s still a couple
more dependencies we have to install in order to get this whole application to
work.

● We have to install Visual C++ Build Environment via Visual Studio Build
Tools. Run the downloaded .exe file and make sure to have the basics
installed i.e "Visual C++ Build Tools on your machine. This is actually need
because of node-gyp. After installing, make sure to run in your command line:

npm config set msvs_version 2017

(see image in the next slide)

 Setting up your dev environment for the program!

Local Setup (Windows)

This is how installing
visual C++ build
environment would look
like when you run the .exe
file
 Setting up your dev environment for the program!

Local Setup (Windows)

● Finally, to start the client application, all we have to do would be to run the
commands below

npm install

npm start

● If all goes well , you should end up with a similar result in the next slide. If you
you encounter problems with npm install, particularly relating to node-gyp try
the other windows options of installing here. If there are other issues, please
refer to the Troubleshooting slides in this guide.
 Setting up your dev environment for the program!

Local Setup (Windows)

Note: This part assumes no errors came out of npm install. Some data should show if you click on the
“Start Streaming Data” button. If nothing is showing, check the command line where you’re running the
server and see if anything printed out, like “Query received”. If there’s something like that and you’re not
seeing results, then try using a different browser (e.g. Chrome/Firefox) and checking localhost:3000. If no
response like “Query received” got printed in the command line running the server, you might be
experiencing this issue.
 Setting up your dev environment for the program!

Local Setup: Troubleshooting (Windows)

● If you did not encounter any issues, your setup is finished. From here on, you
can make changes to the code and eventually arrive at the desired output.

● If you did encounter issues, check if the commonly encountered issues listed
in the next few slides will solve your problem:

○ python not recognized or not returning in your command line

○ dateutil dependency
○ npm install or npm start errors
○ Socket unavailable
 Setting up your dev environment for the program!

Local Setup: Troubleshooting (Windows)

● Click that and click “Environment Variables” in the
next window (image on left side)

● You should then come up with the image below:

You want to edit the Path

under System variables
 Setting up your dev environment for the program!

Local Setup: Troubleshooting (Windows)

● You should end up with a window like this after the steps from the previous slide:
You want to make sure the directory where the Python
executable/application you want to use is in is included
in the list of paths.

If you followed how to install Python2.7.x in the earlier

slides, you should have it in C:\\Python27. Make sure
to include that in your path.

Same goes for Python3.x if you want to enable it. But

make sure to remove your Python2.7.x path first .

If you installed python using other means, e.g.

anaconda, its python executable is located elsewhere
but same method of putting the path applies

Don’t forget to restart your command line after setting

a new path to reflect the changes...
 Setting up your dev environment for the program!

Local Setup: Troubleshooting (Windows)

● In some cases, dependency issues might arise like when you run `server.py`:

In this case, you must install pip first. pip is python’s package manager for
installing python dependencies. Make sure you install pip for the right Python
version you’re working with in this project. You can check your pip version by
pip --version and it will tell which python version it maps too
 Setting up your dev environment for the program!

Local Setup: Troubleshooting (Windows)

● Installing pip nowadays usually involves downloading the get-pip.py script. If
you followed the instructions in the last slide, it usually involves using the
command:
curl https://bootstrap.pypa.io/get-pip.py -o get-pip.py

If you don’t have curl, just copy a python file, rename it to get-pip.py and replace
all the contents of the python file to what’s in get-pip.py
//if python --version = 2.7+ this will install pip for python2
//if python --version = 3+ this will install pip for python3
python get-pip.py

//if your system makes the distinction of python3 as `python3` then

//doing the command below will install pip for python3
python3 get-pip.py
 Setting up your dev environment for the program!

Local Setup: Troubleshooting (Windows)

● After that, for pip to be a recognizable command in your terminal/command line,
you need to add it in your system’s path environment variable
○ On Windows, for Python2.7 it’s usually in C:\\Python27\Scripts. It would also be similar for
Python3.x if you followed the installation guide for Python earlier (e.g. C:\\Python3X\Scripts)

○ Make sure you open a new command line too and use that instead after doing this

● To edit your system path environment variable it’s similar to the slides here.
● Alternatively you can access it doing something like:
○ C:\\Python27\Scripts\pip.exe <parameters> (similar for python3x if it was installed in C:\\)
○ <parameters> could be something like C:\\Python27\Scripts\pip.exe install python-dateutil
○ Take note though, this assumes that you have your python installed in drive C:\\
 Setting up your dev environment for the program!

Local Setup: Troubleshooting (Windows)

● Then afterwards, you can run the following command on your terminal to
install the dependency:

pip install python-dateutil

Afterwards, you can rerun the server and then rerun the client

Note: For the command above, whatever python version your pip corresponds to (i.e. the output
of pip --version, that is the python version that will have the dependency installed). So if you’re
pip corresponds to python2.7.x then doing the command above will install python-dateutil for
python2.7.x
 Setting up your dev environment for the program!

Local Setup: Troubleshooting (Windows)

● In other cases, you might encounter problems after doing npm install. Errors
like the following might appear on your end
CASE A:
 Setting up your dev environment for the program!

Local Setup: Troubleshooting (Windows)

● CASE A: If you’re having a problem similar to this situation, most likely, you
haven’t set python in npm to map to python2.7.x. Make sure you’ve installed
python 2.7.x first and make sure you map the python command npm uses to
python 2.7.x . Here’s a reference on how to do it.

● In our setup node-gyp is called by way of npm, so in order for you to avoid the
error, you have to explicitly tell npm what python version to use. Thus, you
have to set npm's 'python' config key to the appropriate value:

○ npm config set python /path/to/executable/python where /path/to/executable/python is the

directory where the python2.7.x binary is, for example in /usr/bin/python usually in linux/mac or
C:\\Python27 for Windows
 Setting up your dev environment for the program!

Local Setup: Troubleshooting (Windows)

● CASE A (continuation): Alternatively, you can set python in your system to
map to python2.7.x. Make sure you’ve installed python 2.7.x first and make
sure you map the python command to python 2.7.x (meaning python
--version should output 2.7.x) Check the slides on how to set this via the
system environment path variable in the earlier slides.

● It could help that you also temporarily remove in that same path variable the
mapping to python3.x if you also have it in your system. Just place it back
after you npm install successfully and if you plan on using the py3 version of
the repository...
 Setting up your dev environment for the program!

Local Setup: Troubleshooting (Windows)

CASE B:

● CASE B: If you’re having a problem similar to this situation, most likely, you
aren’t running the server application alongside the client app. Make sure you
have another terminal open wherein you’re running the server app which is
run via python datafeed/server.py or python datafeed/server3.py

If running the server app errors out for you might be experiencing this other
problem (see linked slide)
 Setting up your dev environment for the program!

Local Setup: Troubleshooting (Windows)

CASE C:

Case C: This problem is most likely due to the fact that you’re in
C:\\Windows\System32. Do not clone the repo here as mentioned. Clone in
C:\\Users\<some_account>\ instead.
 Setting up your dev environment for the program!

Local Setup: Troubleshooting (Windows)

● After trying the earlier suggestions for troubleshooting and npm install still
errors out for you, try downloading the node_modules here.

● Then replace the node_modules inside your copy of the repo with the one you
downloaded (make sure the folder is still named node_modules in your repo)

● Afterwards, you can go ahead and just execute npm start (no need to run
npm install)
 Setting up your dev environment for the program!

Local Setup: Troubleshooting (Windows)

● In other cases, you might encounter problems running the server app
CASE A:

This is most likely because you have a firewall open preventing you from accessing 8080. You can try the
following workarounds:
- Temporarily turn off your firewall
- Using any text editor, open the datafeed/server.py in the repository using your code editor and look for
the line where it says port = 8080. change that to port = 8085
- Similarly, open the src/DataStreamer.ts and change the line where it has 8080 to 8085
 Setting up your dev environment for the program!

Local Setup: Troubleshooting (Windows)

CASE B:

In this case make sure you're only running one instance of the server.py because it hooks itself to port 8080,
and once that port is used nothing else can use it. If you want to free that up, terminate the old server.py
you're running from one of your terminals by hitting ctrl+c. Alternatively you can kill the process listening on a
port (i.e. in this case 8080) by following this guide
 Setting up your dev environment for the program!

Local Setup (Windows)

● If you did encounter any issues, please post your issue/inquiry here:
https://github.com/insidesherpa/JPMC-tech-task-3/issues or
https://github.com/insidesherpa/JPMC-tech-task-3-py3/issues depending on
what repository you chose to work in. When submitting a query, please don’t
forget to provide as much context as possible, i.e. your OS, what you’ve done,
what your errors is/are, etc (screenshots would help too)

● You can also submit your query in the module page’s support modal that pops
out when you click the floating element on the page (see image below)
JPMorgan Chase Software Engineering Virtual Experience

Setting up your Linux for the

JPMorgan Chase program
Module 3 - Display data visually for traders
 Setting up your dev environment for the program!

Local Setup (Linux)

● If your machine is running on any flavor of linux, follow this setup guide to get
started. This setup is very much alike to the setup you’ve done previously in
module 2, so if you’ve done that, there’s just a few new things to do here.

First you must have git installed in your system. Git is usually used by
programmers to collaborate with code in a software project. You can do install
git by simply running the command below in your terminal (ctrl+alt+t):

● You’ll know you have git if you get a similar result on your terminal:
 Setting up your dev environment for the program!

Local Setup (Linux)

● Once you have git installed, you need a copy of the application code you’ll be
working with on your machine. To do this, you must execute the following
commands on your terminal:

git clone https://github.com/insidesherpa/JPMC-tech-task-3.git

git clone https://github.com/insidesherpa/JPMC-tech-task-3-PY3.git

● This command will download the code repositories from github to your
machine in the current working directory of the terminal you executed the
command in. Downloading the 2 repositories above will give you options later
 Setting up your dev environment for the program!

Local Setup (Linux)

● You’ll know you cloned successfully if you have the copy of the application
code on your machine:

● To access the files inside from the terminal, just change directory by typing:
cd JPMC-tech-task-3
note: If you choose to work using python3 and your system has
version python3 or above instead of python2.7.x, then choose to
go into the other repository you downloaded instead. (otherwise,
use the other repo above); cd changes directory your terminal is
in. Check this for more info on how to use cd

cd JPMC-tech-task-3-py3
 Setting up your dev environment for the program!

Local Setup (Linux)

● To clarify, you’re only supposed to work on one of the repositories you cloned
/ downloaded into your system. It all depends on what Python version you
priimarily use

● Python is just a scripting / programming language we developers use quite

often in the field. This application you’ll be working on uses it.

● We’ll discuss checking / installing Python in your system in the following

slides
 Setting up your dev environment for the program!

Local Setup (Linux)

● Next, you’ll need to have Python 2.7 and/or Python 3 installed on your
machine. Follow the instructions here. (python2) and/or here (python3) For
most cases, Linux environments already have Python 2.7. You can verify this
on your :terminal if you get a result like:
Execute the command below to verify what version
you have:

python --version

Note: the image here is only of 2.7 but it should be

similar if you check for python3. If you installed
both versions, make sure the command python
maps to 2.7.x at least
(any python 2.7.x > = 2.7.16 should suffice
Sometimes your system might have it as
but the latest 2.7.x is recommended (2.7.17);
any python 3.x >= 3.6is fine, latest is recommended (3.8.0)) python3 --version
 Setting up your dev environment for the program!

Local Setup (Linux)

● Once you have Python installed, all you have to do get the application up and
running is to start the server script in a separate terminal (see next slide). If
ever you encounter an error when starting the server application, see
troubleshooting in this slide
 Setting up your dev environment for the program!

Local Setup (Linux)

● Once you have Python 2.7 and/or Python 3 installed, you can start the server
application in one terminal by just executing it:
(note: just choose to run one server; either the python 2 or python 3 version of server. Run the
commands below depending on your python version)

// If python --version = 2.7+, you must be in the JPMC-tech-task-2

// If python --version = 3+ , you must be in JPMC-tech-task-3-py3 directory
python datafeed/server.py

// If your system makes the distinction of python3 as `python3`,

// you must be in JPMC-tech-task-3-py3 directory
python3 datafeed/server3.py

If ever you encounter an error when starting the server application, see troubleshooting in this slide
 Setting up your dev environment for the program!

Local Setup (Linux)

● If you’ve done the previous slide, then you should get something similar to the
pic below when you ran the server.

● To be clear, the server application isn’t stuck. It’s behaving perfectly normal
here. The reason why it’s just like that for now is because it’s just listening for
requests

● For us to be able to make requests, we have to start the client application.

The following slides will help you do that.
 Setting up your dev environment for the program!

Local Setup (Linux)

● In a separate terminal, let’s install the other remaining dependencies i.e. Node
and Npm. Node is a JavaScript runtime environment that executes JavaScript
code outside of a browser and Npm is node’s package manager that helps us
to install other libraries/dependencies we’ll be using in our web application
app.

● To install node and npm and be able to manage versions seamlessly we will
install NVM (node version manager). Once this is on your machine you can
basically install any version of node and npm and switch depending on a
project’s needs. Follow these instructions to install nvm for linux.
 Setting up your dev environment for the program!

Local Setup (Linux)

● You will know you’ve successfully installed nvm if you get a similar result
below when you type the command nvm --version
 Setting up your dev environment for the program!

Local Setup (Linux)

● Now, we just need to install the right node version using nvm and that would
consequently get us the right npm version as well. We do this by executing
the commands:

nvm install v11.0.0

nvm use v11.0.0

● You should end up with a similar result in the next slide after doing the
commands above
 Setting up your dev environment for the program!

Local Setup (Linux)

To check your node version type and
enter:

node -v

To check your npm version type and

enter:

npm -v

Take note: If you open a new terminal after all this, make sure to recheck your node version and npm version. It
might be the case you’ve switched to a different version so just execute `nvm use v11.0.0` again if ever...
 Setting up your dev environment for the program!

Local Setup (Linux)

● Finally, to start the client application, all we have to do would be to run the
commands below

npm install

npm start

● If all goes well (and it should), you should end up with a similar result in the
next slide. If there are other issues, please refer to the Troubleshooting slides
in this guide.
 Setting up your dev environment for the program!

Local Setup (Linux)

Note: This part assumes no errors came out of npm install. Some data should show if you click on the
“Start Streaming Data” button. If nothing is showing, check the command line where you’re running the
server and see if anything printed out, like “Query received”. If there’s something like that and you’re not
seeing results, then try using a different browser (e.g. Chrome/Firefox) and checking localhost:3000. If no
response like “Query received” got printed in the command line running the server, you might be
experiencing this issue.
 Setting up your dev environment for the program!

Local Setup: Troubleshooting (Linux)

● If you did not encounter any issues, your setup is finished. From here on, you
can make changes to the code and eventually arrive at the desired output.

● If you did encounter issues, check if the commonly encountered issues listed
in the next few slides will solve your problem:

○ dateutil dependency
○ npm install or npm start errors
○ Socket unavailable
 Setting up your dev environment for the program!

Local Setup: Troubleshooting (Linux)

● In some cases, dependency issues might arise like when you run `server.py`:

In this case, you must install pip first. pip is python’s package manager for
installing python dependencies. Make sure you install pip for the right Python
version you’re working with in this project. You can check your pip version by
pip --version and it will tell which python version it maps too
 Setting up your dev environment for the program!

Local Setup: Troubleshooting (Linux)

● Installing pip nowadays usually involves downloading the get-pip.py script. If
you followed the instructions in the last slide, it usually involves using the
command:
curl https://bootstrap.pypa.io/get-pip.py -o get-pip.py

If you don’t have curl, just install it in your system. For linux, it’s this way
Then just run the script using python:
//if python --version = 2.7+ this will install pip for python2
//if python --version = 3+ this will install pip for python3
python get-pip.py

//if your system makes the distinction of python3 as `python3` then

//doing the command below will install pip for python3
python3 get-pip.py
 Setting up your dev environment for the program!

Local Setup: Troubleshooting (Linux)

● Then afterwards, you can run the following command on your terminal to
install the dependency:

pip install python-dateutil

Afterwards, you can rerun the server and then rerun the client

Note: For the command above, whatever python version your pip corresponds to (i.e. the output
of pip --version, that is the python version that will have the dependency installed). So if you’re
pip corresponds to python2.7.x then doing the command above will install python-dateutil for
python2.7.x
 Setting up your dev environment for the program!

Local Setup: Troubleshooting (Linux)

● In other cases, you might encounter problems after doing npm install. Errors
like the following might appear on your end:
CASE A: note: the example here is from mac but a similar error might appear for linux
 Setting up your dev environment for the program!

Local Setup: Troubleshooting (Linux)

● CASE A: If you’re having a problem similar to this situation, most likely, you
haven’t set python in npm to map to python2.7.x. Make sure you’ve installed
python 2.7.x first and make sure you map the python command npm uses to
python 2.7.x . Here’s a reference on how to do it.

● In our setup node-gyp is called by way of npm, so in order for you to avoid the
error, you have to explicitly tell npm what python version to use. Thus, you
have to set npm's 'python' config key to the appropriate value:

○ npm config set python /path/to/executable/python where /path/to/executable/python is the

directory where the python2.7.x binary is, for example in /usr/bin/python usually in linux/mac or
C:\\Python27 for Windows
 Setting up your dev environment for the program!

Local Setup: Troubleshooting (Linux)

● CASE A (continuation): Atlernatively, you can set python in your system to
map to python2.7.x. Make sure you’ve installed python 2.7.x first and make
sure you map the python command to python 2.7.x (meaning python
--version should output 2.7.x). There’s a discussion in our github repo on how
to go about this. (mac solution is similar for linux)

● It could help that you also temporarily remap your python3.x to the command
python3 if you also have it in your system. This is also discussed in the github
thread mentioned in the earlier bullet point.
 Setting up your dev environment for the program!

Local Setup: Troubleshooting (Linux)

CASE B:

● CASE B: If you’re having a problem similar to this situation, most likely, you
aren’t running the server application alongside the client app. Make sure you
have another terminal open wherein you’re running the server app which is
run via python datafeed/server.py or python datafeed/server3.py

If running the server app errors out for you might be experiencing this other
problem (see linked slide)
 Setting up your dev environment for the program!

Local Setup: Troubleshooting (Linux)

● After trying the earlier suggestions for troubleshooting and npm install still
errors out for you, try downloading the node_modules here.

● Then replace the node_modules inside your copy of the repo with the one you
downloaded

● Afterwards, you can go ahead and just execute npm start (no need to run
npm install)
 Setting up your dev environment for the program!

Local Setup: Troubleshooting (Linux)

● In other cases, you might encounter problems running the server app
CASE A:

note: the example here is from windows but a similar error might appear for linux
This is most likely because you have a firewall open preventing you from accessing 8080. You can try the
following workarounds:
- Temporarily turn off your firewall
- Using any text editor, open the datafeed/server.py in the repository using your code editor and look for
the line where it says port = 8080. change that to port = 8085
- Similarly, open the src/DataStreamer.ts and change the line where it has 8080 to 8085
 Setting up your dev environment for the program!

Local Setup: Troubleshooting (Linux)

CASE B:

In this case make sure you're only running one instance of the server.py because it hooks itself to port 8080,
and once that port is used nothing else can use it. If you want to free that up, terminate the old server.py
you're running from one of your terminals by hitting ctrl+c. Alternatively you can kill the process listening on a
port (i.e. in this case 8080) by following this guide
 Setting up your dev environment for the program!

Local Setup (Linux)

● If you did encounter any issues, please post your issue/inquiry here:
https://github.com/insidesherpa/JPMC-tech-task-3/issues or
https://github.com/insidesherpa/JPMC-tech-task-3-py3/issues depending on
what repository you chose to work in. When submitting a query, please don’t
forget to provide as much context as possible, i.e. your OS, what you’ve done,
what your errors is/are, etc (screenshots would help too)

● You can also submit your query in the module page’s support modal that pops
out when you click the floating element on the page (see image below)