Skip to content

Latest commit

 

History

History
151 lines (88 loc) · 6.13 KB

GETTING_STARTED.md

File metadata and controls

151 lines (88 loc) · 6.13 KB

Getting Started

This guide will help you get started with your web application.

HighTechU Students: Please remember that we are available to help at every step of the process if you need it!

Mentors: Please ensure that you have correctly set up the repository and deployment before your team starts development: MENTORS_INFO.md

Table of Contents

  1. 🔨 Install development tools

  2. 🚀 Setup project in a development environment

  3. ⚙️ Development environment configuration

  4. 🌎 Deployment to Heroku

  5. 💡 Local deployment

🔨 Development Tools

Your development environment must have Git, Node.js, and npm installed. To download Git, visit "Git". Node.js installations come with npm. To download these, visit "Node.js, and npm".

You will need a text editor. Any text editor is fine, but we will be using VS Code. For more information about VS Code, visit Visual Studio.

Lastly, you will need access to a terminal or command prompt. VS Code provides an integrated terminal for development. For more information about the Integrated Terminal, visit Integrated Terminal.

Note: If you are using an online text editor / integrated development environment (Codespaces, Repl.it) you will most likely not need to download Git, Node.js, or npm.

Optional: You may want to install the Heroku CLI to manually deploy the project with Heroku. For more information, visit Heroku CLI.

🚀 Setup the Project in A Development Environment

You will need a GitHub account and read/write access to the repository.

Note: HighTechU Students working in a team will have read/write access to your team's project repository.

Note: You will also need admin access on the repository in order to set up automatic Heroku deployments.

For HighTechU students, your Team Mentor will be the admin on your repository and handle the deployment to Heroku.

Notes:

  • You may want to fork the repository first if you do not have read/write access to the repository. For more information, visit "Fork a repo".
  • You may want to create a new repository using the HighTechU repository as a template. For more information, visit "About Repository Templates".

Step 1: Open the terminal or command prompt and navigate to your development directory.

  # Example: Navigate to Your-Development-Folder
  # "cd" means Change Directory
  cd your-development-folder

Note: We recommend working from a development folder, development or from the desktop

Step 2: Clone the project locally. For more information, visit "Cloning a repository".

  # URL: Check which repository you are trying to clone. It may not be the one in the example below.
  git clone https://github.com/hightechu/techccelerator-2022.git

Step 3: Navigate to the project directory.

  # Project Directory: Check the name of your repository. It may not be the one in the example below.
  cd techccelerator-2022

Step 4: Switch to a new branch from main.

Note: It is important that developers do not work directly in the main branch. The main branch should remain stable.

  # Replace <branch_name> with the name of your new branch.
  # Example: git checkout -b really-awesome-feature
  git checkout -b branch_name

We recommend calling your branch your-name

Step 5: Install the npm dependencies.

  npm install

Step 6: Open the project in your preferred code editor.

  # Example: Open VS Code
  code .

⚙️ Setup Configuration

After cloning the repository, we should set up a local copy of the database to be able to test on before pushing to main. Create a file in the root folder called .env and add the following into it:

DATABASE_URL=postgresql://$(whoami)

Running npm start for the first time will create a new table with a username column and a password column.

🌎 Deployment to Heroku

The Techccelerator 2022 web app project comes with an automatic deploy to Heroku button.

For HighTechU students, this will already be set up by your Team Mentor. You can skip this section.

  • Set a Heroku Account. For more information, visit "Heroku".

  • Click on the Deploy to Heroku button and follow the prompts:

    Deploy to Heroku

  • Enable Automatic Deployments. For more information, visit "Automatic deploys".

Note: Your app will be re-deployed when the main branch of your repository is updated. Always test your changes locally before merging your working branch into main

💡 Local Deployment

This is the information on how to set up your local environment and run the project locally.

Test your app

What function should they check out to make sure it all works?

Template functions

The Techccelerator 2022 web app template comes with the following functions implemented:

  • Register user
  • Login

The following functions are written and ready for you to implement:

  • Read database
  • Write to database

All pre-written functions are commented in the code

Problems?

Do not worry if your application doesn't respond. Ask for help, and we can troubleshoot together to solve the problem.

🌟 Conclusion

You can now start developing. If you have any questions, feel free to ask. We want you to succeed!