The virtual machine (hashicorp/precise32) will have the following (relevant) packages installed:
- node.js (Latest stable)
- browserify (watchify)
Make sure you have the following installed on your system:
git pull https://github.com/LokeCarlsson/QuizMaster.git) into your existing examination-2 repo. Make sure you are in the root of your repo.
Start the virtual machine using
vagrant up(May take 5-10 minutes this first time. (Ignore red command line statements and warnings.)
vagrant sshto connect to the machine.
In the vagrant terminal (after
- Make sure you are located in the folder
/vagrant/QuizMaster/at all times.
npm run debug. The following will happen:
- A process will start watching files in the folder
source/for changes. When a change is detected the file will be copied to the debug-folder as follows:
debug/image.jpeg, .jpg, .png, .gif, .svg are copied
debug/*.html.html-files are copied
debug/*.css.css-files are copied
- A webserver is started and if you browse to
http://localhost:4000you will see the html-page
In the Git-bash or terminal on your local computer
You should have multiple terminals open at the same time. One running the
npm run debug in the vagrant-terminal, and one terminal not ssh:ed to vagrant. In the terminal on your local machine you could to tasks like committing and pushing to GitHub.
- Start up your IDE (WebStorm) and open a new project pointing to the folder "examination"
- Start editing your site in the
source-folder. (NEVER EDIT FILES IN THE DEBUG FOLDER.) When you save a change look at the "vagrant terminal". You should see that the files are rebuilt.
- Refresh the webpage
localhost:4000and this should reflect your changes.
- When you debug your application you should to this in the browser, not in the IDE. A simple method is to write
debugger;in your js-source code where you want to stop the debugger and refresh the browser.