Skip to main content

Web Engineer Setup Guide

Welcome to the Cloud Engineer Setup Guide for m00m world! This guide will help you configure your cloud development environment, set up necessary tools, and get you ready to contribute to our cloud infrastructure.

Prerequisites​

  • Git: Ensure you have Git installed on your machine. You can download it from git-scm.com.
    • We recommend using Git 2.39 or higher.
    • 🍎 Mac users can use brew install git to install Git via Homebrew.
  • Docker: Install Docker Desktop from docker.com to manage containerized applications.
  • Node.js: Install Node.js from nodejs.org for running JavaScript applications.
    • We recommend using Node Version Manager
    • 🍎 Mac users can use brew install nvm to install Node Version Manager via Homebrew.
    • After installing NVM, you can install the latest LTS version of Node.js by running: nvm install --lts
  • WebStorm: Download and install WebStorm for cloud development.

Step 1: Clone the Web Project Repository​

  1. Open a terminal or command prompt.
  2. Ensure you have Git installed and configured. You can check by running git --version.
  3. Ensure you have proper SSH credentials set up for GitHub on your machine. Follow GitHub's guide if needed.
  4. Navigate to the directory where you want to clone the repository, e.g., ~/m00m/.
> git clone git@github.com:m00m-world/m00m-web.git Web
> cd Web
> npm install
  1. This will clone the Web repository and install the necessary dependencies.
  2. Open the cloned project in WebStorm.

Step 2: Configure WebStorm​

  1. Create a runtime configuration for the project.
  2. Open Run > Edit Configurations.
  3. Click on the + icon and select Attach to Node.js Process.
  4. Set the name to Start Development Server.
  5. Set the host to localhost
  6. Set the port to 5173
  7. Set the before launch task to npm run dev.
  8. Click OK to save the configuration.
  9. You can now run the development server by selecting the configuration and clicking the Run button.

Step 3: Make & Test Changes​

  1. Make your changes in the codebase.
  2. Run the development server by selecting the Start Development Server configuration and clicking the Run button.
  3. Open your web browser and navigate to http://localhost:5173 to see your changes in action.
  4. You can also use tools like Postman or cURL to test your API endpoints locally.

Step 4: Deploy [This step will eventually improve]​

  1. To deploy your changes, run: npm run build
  2. This will build the production-ready version of your web application.
  3. You can then deploy the built files via FTP. If you have to ask for these credentials, ask someone else to deploy for you.

Conclusion​

Congratulations! You have successfully set up your web development environment for m00m world. You can now start contributing to the web project and collaborate with other developers. If you have any questions or need assistance, feel free to reach out to the team.

Further Resources: