updated README.md; updated COMPILE-UI.md files adding the SASS watcher and instructions to add new files

This commit is contained in:
Roberto Tonino 2020-06-18 20:32:03 +02:00
parent 04c127dd6c
commit 367c4db441
2 changed files with 34 additions and 18 deletions

View File

@ -1,26 +1,26 @@
**NOTE: THIS FILE IS NEEDED JUST FOR DEVELOPERS OF THIS PROJECT, IF YOU AREN'T YOU CAN IGNORE IT** **NOTE: THIS FILE IS NEEDED JUST FOR DEVELOPERS OF THIS PROJECT, IF YOU AREN'T YOU CAN IGNORE IT**
This file explains how to compile files for the UI. This file explains how to compile files for the WebUI.
# What you need to do just the first time # What you need to do just the first time
1. Download and install Node.js, you can download it [here](https://nodejs.org/en/download/) (also installs npm) 1. Download and install Node.js, you can download it [here](https://nodejs.org/en/download/) (also installs npm)
2. Once you have finished to install Node.js, check if everything is ok by running 2. Once you have finished to install Node.js, check if everything is ok by running in a terminal the commands
```console ```bash
$ node -v $ node -v
``` ```
and then and then
```console ```bash
$ npm -v $ npm -v
``` ```
If you see the corresponding versions of node and npm, you are ready to code! If you see the corresponding versions of node and npm, you are ready to code!
3. Go to the root of this project, open your favorite prompt and run 3. Go to the root of this project, open your favorite terminal and run
```console ```bash
$ npm i $ npm i
``` ```
@ -30,36 +30,53 @@ $ npm i
By simply running By simply running
```console ```bash
$ npm run dev $ npm run dev
``` ```
you will have 2 tasks running at the same time: you will have 3 tasks running at the same time:
- the Python server - the [Python](https://www.python.org/) server
- the [rollup](https://rollupjs.org/guide/en/) watcher pointing to the configured `.js` file and ready to re-bundle - the [rollup](https://rollupjs.org/guide/en/) watcher pointing to the configured `.js` file and ready to re-bundle
- the [SASS](https://sass-lang.com/) compiler watching for `.scss` files changes
**You can now go to http://127.0.0.1:9666 and see the app running.** Note that in development mode 2 more files, `bundle.js.map` and `style.css.map`, will be created in the public folder. These files will be deleted when runnin the build command, so you don't need to worrt about them.
You can edit `.css` and `.js` files and simply refresh the page to see your new and surely awesome code directly in the app 😉 **You can now go to http://127.0.0.1:6595 and see the app running.**
However, if you need to edit the `public/index.html` file you have to kill the terminal and re-run `npm run dev` to see your edits. ### Editing files
You can edit `.scss` and `.js` files and simply refresh the page to see your new and surely awesome code directly in the app 😉
However, if you need to edit the `public/index.html` file you'll have to kill the terminal and re-run `npm run dev` to see your edits.
### Adding files
If you want to add new super-awesome `.js` files, just add them. Deemix uses ES6 synthax, so you'll probably need to export some functions or variables from your new file. Files that will export and import nothing will be ignored by the bundler (rollup).
If you want to add new mega-awesome `.scss` (style) files, you need to import them in the main `style.scss` file. The `.scss` files **must** all start with an underscore _, except for the `style.scss` file.
## Building ## Building
If you want to deploy your application, you have to run When you want to deploy your application, you **must** run
```console ```bash
$ npm run build $ npm run build
``` ```
This is necessary to get a bundled `.js` file **minified**, helping to drop the final application size. This is necessary to get
- a bundled `.js` file **minified**
- the compiled `.css` compressed
- deleted the 2 `.map` files
in order to drop the final application size (we are talking about MBs, the maps are heavy).
# Other # Other
If you notice that another team member installed one or more new packages, just run If you notice that another team member installed or updated one or more new packages, just run
```bash ```bash
$ npm i $ npm i
``` ```
and you will be ok and you will be fine.

View File

@ -10,7 +10,6 @@ This is just the WebUI for deemix, it should be used with deemix-pyweb or someth
- Style checkboxes - Style checkboxes
- Search tab - Search tab
- Better placeholer before search - Better placeholer before search
- Better loading feedback fot the user (maybe with a loading circle)
- Link Analyzer - Link Analyzer
- Better placeholer before analyzing and error feedback - Better placeholer before analyzing and error feedback
- Settings tab - Settings tab