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 Refill/Windows.

Set up virtual server in Azure

 * 1) 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


 * 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

 * 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 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

Set up Docker

 * 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
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\