Make it easier to develop Mendix themes, without the use of Scout or Koala
The following things need to be installed:
- Node.js Please ensure you install the LTS version, 8.x.x. This is important!! It will fail on older versions like Node 6.x.x
If you want to use Gulp (recommended):
- Gulp client (you can install this after installing Node using
npm install gulp-cli -g)
If you want to use Grunt:
- Grunt client (you can install this after installing Node using
npm install grunt-cli -g)
Note:
We have provided both Grunt and Gulp, but we recommend you use the Gulp version. The reason for this is that Gulp works with pipes, which makes it extremely fast. In a few tests we did, Gulp performed the tasks in 150ms, while Grunt took 4 seconds. Yet, because there are people that use Grunt (and the first version of ux-theming only had a Gruntfile), we include this one as well.
1.) Download the latest release (ZIP-file) here. Do NOT download the source files, but choose Gulp.zip or Grunt.zip
2.) Unzip in your project root folder
3.) Open a terminal and go to your project root folder.
If you do this on Windows and you encounter errors with installing the dependencies, open your CMD or Powershell as Administrator.
4.) Install dependencies using npm install
(If you use this for a Teamserver project, make sure you do not include node dependencies in you team-project: add the node_modules folder to your SVN ignore)
Based on your choice between Gulp or Grunt, you have the following options:
- default, run from commandline:
gulpor
grunt- dev, run from commandline:
gulp devor
grunt devThe default task will check your theme folder (check Gruntfile.js/Gulpfile.js for the location) and will:
- copy changed .css files to your deployment folder
- when there are changes detected in any
.scssfile, run sass and place them in the source folder (on which these files will be copied to deployment as well)
The dev task will do the same as default, but it will start your browser through a Browsersync proxy. Any changes that you make in the css files will be automatically injected in your browser. You do not have to manually refresh your browser.
There are a few parameters that you can change. Open your Gruntfile.js or Gulpfile.js, you can change these values at the top:
sourceStyleFolderdeploymentStyleFolderproxyAddress
Make sure proxyAddress is pointed to your local deployment.
Make sure you have the package.json and Gruntfile.js/Gulpfile.js in your root folder. Also, if there are errors installing (this can happen when you install the Gulp version), make sure you have administrator rights. See point 3 at Installation.
Have you pointed to the right local deployment address? Check the proxyAddress in your Gulp-/Gruntfile.js. This should correspond to the address of your local deployment.
This is a common problem when you are using this in new Mendix Projects where it is using Deeplinks (e.g. http://localhost:3000/link/page). The reason for this is that the paths to the styles are relative in your HTML. Please check the following:
- Open the 'index.html' (or the one that is used, for example 'index2.html')
- In the
<head>section you will find the links to stylesheets:
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css?{{cachebust}}">
<link rel="stylesheet" href="mxclientsystem/mxui/ui/mxui.css?{{cachebust}}">
<link rel="stylesheet" href="css/custom.css?{{cachebust}}">
<link rel="stylesheet" href="css/custom/custom.css?{{cachebust}}">- Make sure that any of these links to the stylesheets are prefixed with a
/, so it will always refer to the root:
<link rel="stylesheet" href="/lib/bootstrap/css/bootstrap.min.css?{{cachebust}}">
<link rel="stylesheet" href="/mxclientsystem/mxui/ui/mxui.css?{{cachebust}}">
<link rel="stylesheet" href="/css/custom.css?{{cachebust}}">
<link rel="stylesheet" href="/css/custom/custom.css?{{cachebust}}">This should fix your problem with missing stylesheets after a reload
If you do not want the theming files to be part of the project (you can safely commit them, as long as you will add node_modules to SVN Ignore), you can clean your project folder by deleting:
package.jsonGruntfile.jsorGulpfile.jsnode_modulesfolder
None
The MIT License (MIT) Copyright (c) 2018 Mendix
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.