2020-05-08 16:57:15 +00:00
**NOTE: THIS FILE IS NEEDED JUST FOR DEVELOPERS OF THIS PROJECT, IF YOU AREN'T YOU CAN IGNORE IT**
2020-05-08 16:51:57 +00:00
2020-06-18 18:32:03 +00:00
This file explains how to compile files for the WebUI.
2020-05-07 19:34:28 +00:00
# What you need to do just the first time
2020-05-08 16:51:57 +00:00
1. Download and install Node.js, you can download it [here ](https://nodejs.org/en/download/ ) (also installs npm)
2020-05-07 19:34:28 +00:00
2020-06-18 18:32:03 +00:00
2. Once you have finished to install Node.js, check if everything is ok by running in a terminal the commands
2020-05-07 19:34:28 +00:00
2020-06-18 18:32:03 +00:00
```bash
2020-05-07 19:34:28 +00:00
$ node -v
```
and then
2020-06-18 18:32:03 +00:00
```bash
2020-05-07 19:34:28 +00:00
$ npm -v
```
2020-05-07 19:55:25 +00:00
If you see the corresponding versions of node and npm, you are ready to code!
2020-05-07 19:34:28 +00:00
2020-06-18 18:32:03 +00:00
3. Go to the root of this project, open your favorite terminal and run
2020-05-07 19:34:28 +00:00
2020-06-18 18:32:03 +00:00
```bash
2020-05-07 20:10:13 +00:00
$ npm i
2020-05-07 19:34:28 +00:00
```
# Scripts
2020-05-07 19:55:25 +00:00
## Development
2020-05-07 19:34:28 +00:00
By simply running
2020-06-18 18:32:03 +00:00
```bash
2020-05-07 19:34:28 +00:00
$ npm run dev
```
2020-09-22 19:59:18 +00:00
P.S.: You need to be inside the [deemix-pyweb ](https://codeberg.org/RemixDev/deemix-pyweb ) repo to have the server working correctly.
2020-06-18 18:32:03 +00:00
you will have 3 tasks running at the same time:
2020-09-22 16:27:18 +00:00
- the server
2020-05-07 19:34:28 +00:00
- the [rollup ](https://rollupjs.org/guide/en/ ) watcher pointing to the configured `.js` file and ready to re-bundle
2020-06-18 18:32:03 +00:00
- the [SASS ](https://sass-lang.com/ ) compiler watching for `.scss` files changes
2020-09-22 16:27:18 +00:00
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 running the build command, so you don't need to worry about them.
2020-06-18 18:32:03 +00:00
**You can now go to http://127.0.0.1:6595 and see the app running.**
2020-05-07 19:34:28 +00:00
2020-06-18 18:32:03 +00:00
### Editing files
2020-05-07 19:34:28 +00:00
2020-06-18 18:32:03 +00:00
You can edit `.scss` and `.js` files and simply refresh the page to see your new and surely awesome code directly in the app 😉
2020-05-07 19:34:28 +00:00
2020-06-18 18:32:03 +00:00
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
2020-09-22 16:27:18 +00:00
If you want to add new super-awesome `.js` or `.vue` 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).
2020-06-18 18:32:03 +00:00
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.
2020-05-07 19:34:28 +00:00
## Building
2020-06-18 18:32:03 +00:00
When you want to deploy your application, you **must** run
2020-05-07 19:34:28 +00:00
2020-06-18 18:32:03 +00:00
```bash
2020-05-07 19:34:28 +00:00
$ npm run build
```
2020-06-18 18:32:03 +00:00
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).
2020-05-07 20:10:13 +00:00
# Other
2020-06-18 18:32:03 +00:00
If you notice that another team member installed or updated one or more new packages, just run
2020-05-07 20:10:13 +00:00
```bash
$ npm i
2020-05-07 20:11:19 +00:00
```
2020-06-18 18:32:03 +00:00
and you will be fine.