Skip to content

Getting Started

Jump to bottom
Diana Issatayeva edited this page May 1, 2021 · 1 revision

Workspace setup

Installing Node.js

This is required to test the program. Just get the current version and install it.

Installing Git

This is required to edit the program remotely. Just get the current version and install it. The repository is hosted at GitHub.

Installing VS Code

This is NOT required, but recommended (by me). Just get the current version and install it.

Recommended VS Code extensions

  • ESLint
    • A helpful linter for your JavaScript.
  • stylelint
    • A helpful linter for you CSS.
  • Live Server
    • Let’s you host a local debug server.
  • Live Share
    • A pair programming extension for collaborative programming in real-time.

Getting GitHub repo

Open a command line or terminal and enter a directory to where to copy the project repository. This can be anywhere in your local file system (like your home directory). For example:

cd ~/
mkdir flapjs
cd flapjs
git clone https://github.com/flapjs/webapp.git
cd webapp

To ensure and verify the state of the repository enter the following command:

git status

Installing dependencies

Open a command line or terminal and enter into the project directory. This should be where you’ve copied the remote repository. Following the previous example:

cd ~/flapjs/webapp
npm install

This should automatically start installing the dependencies (as listed in package.json). After it finishes, it should create a directory called node_modules, which contains all required dependencies.

NOTE: The node_modules directory sometimes contains files unique to each platform so this directory SHOULD NOT be committed to the repository.

NOTE: If a package-lock.json is created, it should be committed to the repo. It should not be ignored.

After that, the project is ready to run.

Running the Program

After saving any changes to a file, open a command line or terminal and enter into the project directory.

Production Build

To “compile” the scripts for public distribution:

npm run build

NOTE: This will bundle all the resources and assets required into build. It will also “uglify” the code to reduce size and apply other optimizations.

Then, open index.html in your web browser. Either by just opening the file itself or running the command:

open index.html

Development Build

Another way to quickly run, or test, the program:

npm start

This will run all appropriate commands to bundle and build the program, then will run it in your default web browser. It is also hot loaded and in development mode, so changes will be reflected on save and debug messages are more human-readable.

Note: Running this way will start a local server on the machine at default port 3000, or what is defined in webpack.config.js. Therefore, only one instance of the server can be open at one time (but as many clients as you want).

Clone this wiki locally