Elucidate Winter 2022

Table of Contents

• Elucidate Winter 2022
  • Table of Contents
  • Technologies
  • Getting started
    • Setting environment variables
    • Installing Docker
      • Windows
      • Linux
    • Potential Errors While Running The Docker Container
    • Development environment setup
    • Development
  • Writing documentations
    • Using MkDocs
  • Development workflow

Technologies

Frontend

• Client
  • NuxtJS
  • VueJS
  • Tailwind CSS
  • Axios
• Testing
  • Jest
  • Cypress
• Linting
  • ESLint
• Formatting
  • Prettier

Backend

• Web server
  • Django
  • Django Rest Framework
  • Apache
• Database
  • PostgreSQL
  • psycopg2
• Linting
  • flake8
• Formatting
  • black

Other

• Documentation
  • MkDocs

Getting started

Setting environment variables

1. Create a copy of the .env.example file. (Do not delete or replace the original .env.example).
2. Rename the copy to .env.

Installing Docker

• Download and Install Docker Documentation + Links

Windows

• Once docker is installed, try running it. If docker-engine starts successfully, you can proceed.
• If your docker requires you to install WSL, you can easily do so by the following steps:
  • Open PowerShell with administrator privileges.
  • Type wsl --install.
  • Restart your computer and try running wsl in cmd. If you get no error, then you are all set.
• If you get an error about needing to update the kernel, you can do so by installing this package.
  • Then run wsl --set-default-version 2.
• If you are asked to enable Windows Virtualisation Platform, or Hyper-V then:
  • Run bcdedit /set hypervisorlaunchtype auto in an admin privilege PowerShell and restart your computer.
• Once docker-engine is running successfully, you can close the docker window, as it should continue running in the background.

Linux

• If you are running Linux, Docker compose will not be automatically installed. You will need to install it manually by following this guide.

Potential Errors While Running The Docker Container

• Windows : If the client and/or server containers fail to run due to runtime.sh not being found, then you need to change the line endings of the runtime.sh file (located in docker/client/ and docker/server) from CRLF to LF.

  • You can do this in VS Code by opening the runtime.sh file, and in the bottom-right corner, click on CRLF. A dialogue box pops up, click on LF and save the file.
    

    

• Mac :

• Linux :

Development environment setup

• Install the Docker and the Remote - Containers extensions.

• Navigate to the remote explorer tab.

• Click the Open Folder in Container button and open the client folder.

• The first time this is launched, it may take up to 5 minutes to install and configure everything.
• After you are shown the workspace, there should be a pop-up at the bottom right asking you to install recommended extensions. Click install.

• Afterwards, close out of the remote container.

• Navigate to the remote explorer extension tab again. If you see the below, then the frontend workspace has been successfully configured.

• Press the plus symbol.

• Click open folder in container.

• Select the server folder.

• Again, wait until the installation process completes, install the recommended extensions, and exit the container.
• If you now navigate to the remote explorer tab, you should see 3 containers; one for frontend, backend, and database.
• The installation process is now complete.

Development

• To start developing, navigate to the remote extensions tab. Hover over the frontend or backend container and click the folder icon.

• Note, for the backend, you may need to start the database container first. To do so, right-click on the database container and click Start Container.

Writing documentations

We will be using MkDocs to generate the documentations for this project. MkDocs is a documentation generator that is based on Markdown.

Using MkDocs

• Using the remote explorer extension tab, open the folder inside the documentation directory. This is the same process as setting up the workspace.
• Run mkdocs serve to launch a development server.

Development workflow

1. Decide as a team the issue/s you want to work on.
2. Assign yourselves to the relevant issue on GitHub.
3. A branch corresponding to the issue should be created (unless it is a point 5 issue).
4. Checkout the branch corresponding to the issue. It should be in the format of i<issue number>-<issue_name>.
5. Work on your changes.
6. Make commits and push them to the issue branch.
7. Open a pull request on GitHub.
8. Await for code reviews.
9. Your feature is merged!
10. Delete your local branch with git branch -d <branch_name>.