You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<b>A full configured and ready to go boilerplate/skeleton for an Aurelia app</b></br>
21
+
Heavily inspired by <ahref="https://github.com/aurelia/skeleton-navigation/tree/master/skeleton-typescript-webpack">Aurelia Skeleton</a>.<br>
22
+
<sub>Made with ❤️ by <ahref="https://github.com/w3tecch">w3tech</a>, <ahref="https://www.linkedin.com/in/david-weber-6a0819b7/">David Weber</a> and <ahref="https://github.com/w3tecch/template-gen/graphs/contributors">contributors</a></sub>
23
+
</p>
24
+
25
+
<br />
26
+
27
+
## ❯ Why
28
+
29
+
The skeletons provided by Aurelia are great but aren't ready for an enterprise grade app. This boilerplate provides a lot of features out of the box like i18n or an optin Cordova setup.
-[Cordova - Mobile development](#-cordova-mobile-development)
39
+
-[Docker](#-docker)
40
+
-[Additional features](#-additional-features)
41
+
42
+
43
+
## ❯ Getting started
7
44
8
45
Before you start, make sure you have a recent version of [NodeJS](http://nodejs.org/) environment *>=6.0* with NPM 3 or Yarn.
9
46
@@ -34,12 +71,12 @@ If you wish to try out the experimental Hot Module Reload, you may run your appl
34
71
npm start -- webpack.server.hmr
35
72
```
36
73
37
-
## Feature configuration
74
+
## ❯ Feature configuration
38
75
39
76
Most of the configuration will happen in the `webpack.config.js` file.
40
77
There, you may configure advanced loader features or add direct SASS or LESS loading support.
41
78
42
-
## Bundling
79
+
## ❯ Bundling
43
80
44
81
To build an optimized, minified production bundle (output to /dist) execute:
45
82
@@ -57,7 +94,7 @@ npm start -- serve
57
94
58
95
The production bundle includes all files that are required for deployment.
59
96
60
-
## Running The Tests
97
+
## ❯ Running tests
61
98
62
99
This skeleton provides three frameworks for running tests.
63
100
@@ -96,26 +133,6 @@ To run the Jest watcher (re-runs tests on changes), run:
96
133
npm start -- test.jest.watch
97
134
```
98
135
99
-
### Karma + Jasmine 2
100
-
101
-
Karma is also a powerful test runner, which by default runs in the browser. This means that whatever works in real browsers, should also work the same way in the unit tests. But it also means the framework is heavier to execute and not as lean to work with.
102
-
103
-
To ease transitioning between Jest and Karma, Jasmine 2 is configured with Jest's matchers.
104
-
105
-
To create new Karma tests, create files with the extension `.spec.ts`, either in the `src` directory or in the `test/unit` directory.
106
-
107
-
To run the Karma unit tests, run:
108
-
109
-
```shell
110
-
npm start -- test.karma
111
-
```
112
-
113
-
To run the Karma watcher (re-runs tests on changes), run:
114
-
115
-
```shell
116
-
npm start -- test.karma.watch
117
-
```
118
-
119
136
### Protractor (E2E / integration tests)
120
137
121
138
Integration tests can be performed with [Protractor](http://angular.github.io/protractor/#/).
@@ -128,23 +145,23 @@ Integration tests can be performed with [Protractor](http://angular.github.io/pr
128
145
npm start -- e2e
129
146
```
130
147
131
-
## Running all test suites
148
+
###Running all test suites
132
149
133
150
To run all the unit test suites and the E2E tests, you may simply run:
134
151
135
152
```shell
136
153
npm start -- test.all
137
154
```
138
155
139
-
## App confugration
140
-
There is an app configuration management in place. Two standart environments are already set (devlopment and production).
156
+
## ❯ App configuration
157
+
There is an app configuration management in place. Two standard environments are already set (development and production).
141
158
You can for example build the production with:
142
159
143
160
```shell
144
161
npm start -- webpack.build.production
145
162
```
146
163
147
-
If you like to add an additional configuaration you have to do the following two steps:
164
+
If you like to add an additional configuration you have to do the following two steps:
148
165
1. Add the configuration json to ```app/config```, example preprod.json
149
166
2. Add the corresponding command to ```package-script.js``` and pass the right argument like ```--env.config=preprod```
150
167
@@ -166,11 +183,11 @@ preprod: {
166
183
}
167
184
```
168
185
169
-
## HTML5 pushState routing
186
+
## ❯ HTML5 pushState routing
170
187
By default pushState, also known as html5 routing, is enabled. The Webpack server is already configured to handle this but many webserver need
171
-
extra confuration to enable this.
188
+
extra configuration to enable this.
172
189
173
-
## Cordova - Mobile Development
190
+
## ❯ Cordova - Mobile development
174
191
175
192
### Installation
176
193
Initiate cordova with the following commands:
@@ -181,15 +198,15 @@ npm start -- mobile.setup
181
198
182
199
### Run and build
183
200
Cordova takes the ```www``` folder source to create the Cordova app. This ```www``` folder is a symlink pointing to the ```dist``` folder.
184
-
So make sure you run for example ```npm start -- build``` first before runing/building a Cordova app.
201
+
So make sure you run for example ```npm start -- build``` first before running/building a Cordova app.
185
202
186
203
Sometimes the ```www``` symlink is removed (e.g. git clone). Run this command to fix this:
187
204
```shell
188
205
npm start -- mobile.link
189
206
```
190
207
191
-
## Docker
192
-
There is a ```Dockerfile```unsing the [nginx](https://hub.docker.com/_/nginx/) image to build the docker image.
208
+
## ❯ Docker
209
+
There is a ```Dockerfile```using the [nginx](https://hub.docker.com/_/nginx/) image to build the docker image.
193
210
194
211
### Getting started
195
212
First build your aurelia app with
@@ -213,22 +230,22 @@ If you like to update the source do this
This repo houses some additional features which provd to be very useful in projects.
233
+
## ❯ Additional features
234
+
This repository houses some additional features which prove to be very useful in projects.
218
235
219
-
## String polyfill
236
+
###String polyfill
220
237
The file `utils/polyfills.utils.ts` contains a string polyfills.
221
238
With this polyfill you can do this:
222
239
```
223
-
'Teststring'.isEmpty() => false
224
-
''.isEmpty() => true
225
-
undefined.isEmpty() => true
240
+
String.isEmpty('Teststring') => false
241
+
String.isEmpty('') => true
242
+
String.isEmpty(undefined) => true
226
243
```
227
244
228
-
## Validation
229
-
The file `utils/validation.utils.ts` contains some validatoin helper functions and regex patterns.
245
+
###Validation
246
+
The file `utils/validation.utils.ts` contains some validation helper functions and regex patterns.
230
247
231
-
The function `validateFilledFieldsWithValidationRules` us really useful as you can check a object which is already prefiled if it's valid and if not show errors.
248
+
The function `validateFilledFieldsWithValidationRules` us really useful as you can check a object which is already prefilled if it's valid and if not show errors.
232
249
233
250
The function `controllerValidByRules` will check if a validation controller is valid.
234
251
@@ -266,19 +283,19 @@ class FormExample {
266
283
.ensure((user: User) => user.email)
267
284
.displayName('USER.EMAIL')
268
285
.email()
269
-
.on(this.customerContact).rules;
286
+
.on(this.user).rules;
270
287
}
271
288
}
272
289
```
273
290
274
291
### i18n integration
275
-
You can pass a tranlation string into the `displayName('USER.LAST_NAME')` and it will be translated for you.
292
+
You can pass a translation string into the `displayName('USER.LAST_NAME')` and it will be translated for you.
276
293
277
-
Additionally you can translate methods like `.required()` in `src/local/*` as demostrated in the files.
294
+
Additionally you can translate methods like `.required()` in `src/local/*` as demonstrated in the files.
278
295
279
296
If you use the the method `withMessageKey('YOUR.TRANSLATION')` you can pass a translation string and it will be translated for you.
280
297
281
-
## Route generator service
298
+
###Route generator service
282
299
If you have router tree like this
283
300
```
284
301
root
@@ -287,7 +304,7 @@ left right
287
304
```
288
305
You can't navigate from `left` to `right` with `this.router.navigateToRoute(...)` as `right` is in a branch which `left` is unaware of. This is due to the injection of the router service.
289
306
290
-
One solution is to use `this.router.navigate(...)` but this is unsave as if the route configuration is changed the navigation is broken as it's hardcoded.
307
+
One solution is to use `this.router.navigate(...)` but this is unsafe as if the route configuration is changed the navigation is broken as it's hard coded.
291
308
292
309
The `route-generator.service.ts` will provide a type safe solution for save navigation.
We have included the [class transformer](https://github.com/typestack/class-transformer) which helps creating models (`src/app/models/*`). This transformation can be done
317
334
in both direction (rest to model, model to rest).
318
335
319
-
## Dialog service
320
-
There is a custom dialog implementation for simpler useage of elements in dialogs.
336
+
###Dialog service
337
+
There is a custom dialog implementation for simpler usage of elements in dialogs.
321
338
322
339
The Service is named `generic-dialog.service.ts` and an example can be found in `welcome.vm.ts`.
0 commit comments