To allow vendors to deliver printers with their own ideas on what a frontend should contain and look like we publish
these original sources. You can modify and compile them. Copy the modified version into the shadow www directory at the
same place and your version will be used instead of the original. That way you can modify anything in the frontend.
Also this is possible you should be aware or one drawback of this concept. With every update from us there is the
possibility that we introduce new features or css rules that are required. So you should not deliver the original
server version to client but a encapsulated version. This encapsulated version installs first you adapted shadow
system data and then runs the original installer from our server. To achieve this add your custom config override script.
For linux this would be
for other os use the according storage directory. To change download info for updates, shadow directory and name it would
look like this:
<?xml version="1.0" encoding="UTF-8" standalone="yes"?> <server> <update-info-url>http://download.repetier-server.com/files/server/mac/updateinfo.txt</update-info-url> <branding> <shadow-www-directory>path-of-www-shadow</shadow-www-directory> <branded-name>Your Server Name</branded-name> </branding> </server>
The build system uses NodeJS 6.7 and npm to compile the sources. Make sure they are installed in reachable over your path
variable. Then download and unzip them.
The compile commands have two different target folders. For development everything is compiled into wwwdev. These
can even say in which source file the error is.
For production everything is compiled into wwwdist folder.
Both already have the exact structure for your shadow directory, so for testing point your local server isntace to use
one of these folders as shadow directory.
Compiling css files:
Compile for development:
> ./node_modules/grunt-cli/bin/grunt sass:dev
Compile for production:
> ./node_modules/grunt-cli/bin/grunt sass:prod
Compiling front application
decreases download immensely.
Compile for development (will store data in wwww):
> ./node_modules/webpack/bin/webpack.js --watch
Compile for production (will store data in wwwdist):
> NODE_ENV=production ./node_modules/webpack/bin/webpack.js
Understanding the code structure
All stylesheet files are in wwwsrc/modules/front2/style. The ui.scss file is the main file that includes all
other files. To modify the overall apperiance change “blocks/_variables.scss” to your liking. The other files
contain the css definitions required. Do not change names and only change if you know what you are doing.
The configs folder contains per resolution variables. Normally there is no need to change them but if you want
to tweak some sizes, that is the place for it.
Apart from some node libraries the application uses 2 self written packages. These are located in
binding – Main module for communication with the server. Implements a Redux storage that mimics the server state,
handles all communication and has many actions to change everything you need.
front-ui – Implements all ui elements used in the frontend.
The main application resides in wwwsrc/modules/front2/app
app.modules.ts is the module loader of the app and binds all used modules/components.
dashboard.components.ts is the main screen. Here you would add new screens or remove existing screens.
app.routes.ts declares all used routes of the frontend.
Most of the remaining files are the different screens.