Jump to content

User:Curb Safe Charmer/Refilldev

From Wikipedia, the free encyclopedia

Given the frequent outages of Refill I wanted to be able to debug the code. I have a software development background, but it was all using Windows rather than Linux and was prior to things like Docker so it is a bit of a learning curve.

This is how I went about setting up a development environment for Refill. The instructions assume a working knowledge of Windows and Azure.

Nota bene* For those who don't want to use Linux at all, the development environment can be set up on Windows - see Wikipedia:Refill/Windows.

Azure VM

Set up virtual server in Azure

[edit]
  1. In Azure, create a virtual server as follows:
  1. Wait about 15 minutes for the virtual machine to be created
  2. from the list of virtual machines, select the machine, click on connect, download RDP file
  3. Connect to the machine remotely - machine must have status = running
  4. On your Windows 10 PC, open Remote desktop

Install Chrome

[edit]
  1. Once logged in, open Internet Explorer, open https://www.google.com and accept security warnings
  2. Go into IE settings, security, select Internet zone, change settings to enable downloads
  3. Select to install Chrome
  4. Save and run chromesetup.exe
  5. Close IE
  6. In Chrome, browse to https://code.visualstudio.com/download
  7. Download and run the Windows installer. Select all the tickboxes.
Windows Subsystem for Linux

Windows 10 / 11

[edit]
  • On Windows 10 or 11, install Windows Subsystem for Linux (https://docs.microsoft.com/en-us/windows/wsl/install)
  • At the PowerShell command prompt, type wsl --install -d Ubuntu
  • choose a username and password
  • Run the following:
  • close and reopen Linux window
  • Run the following:
    • nvm install node
    • npm install flask
    • npm install flask_cors
    • npm install flask_restplus
    • npm install node-sass
    • npm install yarn
    • yarn install
    • npm install webpack
    • npm install webpack-cli
    • npm install virtualenv
    • npm install dateparser
    • npm install cross-env
    • npm install python
    • npm audit fix --force
    • cd ~

Setting up Docker with WSL Video introduction to Docker

Set up development environment

[edit]
  1. In Chrome, download and install https://www.python.org/downloads/ (check the box to add to the path)
  2. In Chrome, download and install node.js
  3. Open Visual Studio Code
  4. Select 'code in any language' -> browse language extensions
  5. Install the Python and Docker extensions
  6. Close the extensions start page tab
  7. Click 'source control' in left hand pane, click on 'install git', open using Chrome.
  8. At https://git-scm.com/downloads click Windows. In the installer, select all checkboxes. Change to 'Use Windows default console window'
  9. Close and reopen Visual Studio Code.
  10. Click on the Explorer in the left hand pane, then Clone Repository, Clone from Github. Allow. Continue. Log in to Github.
  11. Copy the token and paste into box in VS Code
  12. Download and install Docker Desktop (Windows will need to restart)

Set up ReFill

[edit]
  1. Click 'clone repository' again, enter https://github.com/zhaofengli/refill
  2. Select the 'documents' folder as the root for the repo, then open it
  3. In a command window, change directory to \web under the Refill folder and run the following
npm install flask
npm install node-sass
npm install yarn
yarn upgrade caniuse-lite browserslist
npm audit fix
npm run dev

Backend

[edit]
npm install celery
npm install webpack
npm install webpack-cli
npm install virtualenv
docker pull redis
pip install flask
pip install flask_cors
pip install flask_restplus
pip install Werkzeug==0.16.0
pip install dateparser
Docker

Set up Docker

[edit]
  1. Reconnect to the virtual server
  2. From the start menu, right click on powershell, run as administrator. Then at the command prompt type the following
& 'C:\Program Files\Docker\Docker\DockerCli.exe' -SwitchDaemon
  1. Run the following command in a Powershell window:
Set-VMProcessor -VMName DockerDesktopVM -ExposeVirtualizationExtensions $true -Verbose
  1. In the task bar, right click on docker and switch to Linux containers
  2. In VS Code, select the Docker > Getting Started tab and click on 'Docker Images: Build Image'
  3. Open Docker Desktop and VS Code using the shortcuts on the desktop.

Troubleshooting

[edit]

It is possible you may have to append a folder to the path. This is done as follows:

set PATH=%PATH%;C:\your\path\here\