Skip to content

Run ClassTranscribe Frontend (Frontend Only, No Docker)

Jump to bottom
Harsh Deep edited this page Jul 10, 2024 · 27 revisions

If you only want to work on the Frontend and have a low powered laptop (or don't want to use Docker), you can develop the frontend website just using Node.js and yarn.

Coding Environment

Visual Studio Code is highly recommended for beginners to write Javascript and execute git commands. (Working with Javascript, Working with Git) After downloading the VS Code, go to the Extension Tab on the sidebar. You can install many useful extensions for frontend development:

  • Docker - The Docker extension makes it easy to build, manage and deploy containerized applications from Visual Studio Code.
  • React/Redux/GraphQL/React-Native snippets - This extension provides you JavaScript and React/Redux snippets in ES7 with Babel plugin features for VS Code.
  • HTML Snippets - This extension adds rich language support for the HTML Markup to VS Code.
  • GitLens - GitLens supercharges the Git capabilities built into Visual Studio Code.

Installation

Please go through each of the following steps to set up the front-end locally.

  1. Clone FrontEnd to your machine, and enter the repo
$ git clone https://github.com/classtranscribe/FrontEnd.git && cd FrontEnd

  1. Install Node Version manager. Here's some instructions installation on Windows,Linux and OSX].

  2. The project has a .nvmrc file which contains the node version. Make sure you're in the FrontEnd/ folder and then run:

$ nvm install
$ nvm use
$ node -v

If you have lots of different node projects you can look into automatically switching to the .nvmrc version as you enter the directory.

  1. Install yarn.

  2. Use yarn to install Node.js dependencies.

$ yarn install
  1. Change the backend address (Optional). Type yarn backend -h for help.
$ yarn backend --dev
  1. Run the app at localhost:3000 This will take a while (a minute or so) initially but is much faster when you make a change
$ yarn start

  1. if you are getting the error "There might be a problem with the project dependency tree" follow the steps on this link

  2. Run the build process and local test cases to ensure everything works (if start worked, these will probably work too).

$ yarn test
$ yarn build

Next steps

Now as you edit the frontend code it will automatically rebuild and reload the app in your browser. In the development server you can use the test user to login.

For more details about the existing frontend structure and components, see Front-End Structure

Clone this wiki locally