User:Curb Safe Charmer/Refilldev

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.

* 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 In Azure, create a virtual server as follows: Windows Server 2019 Datacenter Edition select 'DS2s_v3' as the machine size (2 CPUs, 8GB memory) = 8p per hour (a lesser spec than v3 won't provide the ability to nest a VM inside the VM) select a username and strong password os disk type = standard SSD switch on automatic daily shutdown Wait about 15 minutes for the virtual machine to be created from the list of virtual machines, select the machine, click on connect, download RDP file Connect to the machine remotely - machine must have status = running On your Windows 10 PC, open Remote desktop Install Chrome Once logged in, open Internet Explorer, open https://www.google.com and accept security warnings Go into IE settings, security, select Internet zone, change settings to enable downloads Select to install Chrome Save and run chromesetup.exe Close IE In Chrome, browse to https://code.visualstudio.com/download Download and run the Windows installer. Select all the tickboxes.

Windows Subsystem for Linux

Windows 10 / 11 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: sudo apt update sudo apt full-upgrade sudo apt install -y python3-pip sudo apt install -y build-essential libssl-dev libffi-dev python3-dev sudo apt-get install -y nodejs pip install node pip install -U Celery curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash 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

• install https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-wsl (described at https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-wsl)
• in visual studio code, open a remote window using the green arrows in the bottom left hand corner
• install python extensions

Set up development environment

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

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

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 Reconnect to the virtual server 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 Run the following command in a Powershell window: Set-VMProcessor -VMName DockerDesktopVM -ExposeVirtualizationExtensions $true -Verbose In the task bar, right click on docker and switch to Linux containers In VS Code, select the Docker > Getting Started tab and click on 'Docker Images: Build Image' Open Docker Desktop and VS Code using the shortcuts on the desktop.

Troubleshooting

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\