Skip to content

Commit a9a4274

Browse files
committed
feat(skeleton-webpack): use @easy-webpack; break apart into two skeletons
1 parent ac9e149 commit a9a4274

File tree

369 files changed

+582
-34498
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

369 files changed

+582
-34498
lines changed

.gitignore

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
node_modules
2+
.DS_STORE
3+
npm-debug.log*
4+
/dist
5+
/build
6+
/typings
7+
/.awcache
8+
/electron.js*
9+
/release
10+
/test/coverage
File renamed without changes.

CONTRIBUTING.md

-3
This file was deleted.

LICENSE

-121
This file was deleted.

README.md

+187-13
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,193 @@
1-
# aurelia-skeleton-navigation
1+
# aurelia-skeleton-webpack
22

3-
[![ZenHub](https://raw.githubusercontent.com/ZenHubIO/support/master/zenhub-badge.png)](https://zenhub.io)
4-
[![Join the chat at https://gitter.im/aurelia/discuss](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/aurelia/discuss?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
5-
[![CircleCI](https://circleci.com/gh/aurelia/skeleton-navigation.svg?style=shield)](https://circleci.com/gh/aurelia/skeleton-navigation)
3+
## Getting started
64

7-
This library is part of the [Aurelia](http://www.aurelia.io/) platform and provides production quality skeletons for people ready to build apps. There are various skeleton options available, depending on your platform and tooling choices.
5+
Before you start, make sure you have a recent version of [NodeJS](http://nodejs.org/) environment *>=4.0* with NPM 3.
86

9-
> To keep up to date on [Aurelia](http://www.aurelia.io/), please visit and subscribe to [the official blog](http://blog.durandal.io/) and [our email list](http://durandal.us10.list-manage1.com/subscribe?u=dae7661a3872ee02b519f6f29&id=3de6801ccc). We also invite you to [follow us on twitter](https://twitter.com/aureliaeffect). If you have questions, please [join our community on Gitter](https://gitter.im/aurelia/discuss). If you would like to have deeper insight into our development process, please install the [ZenHub](https://zenhub.io) Chrome or Firefox Extension and visit any of our repository's boards. You can get an overview of all Aurelia work by visiting [the framework board](https://github.com/aurelia/framework#boards).
7+
From the project folder, execute the following commands:
108

11-
## Available Skeletons
9+
```shell
10+
npm install
11+
```
1212

13-
Please see the individual readme file within each skeleton for an explanation of how to get setup.
13+
This will install all required dependencies, including a local version of Webpack that is going to
14+
build and bundle the app. There is no need to install Webpack globally.
1415

15-
* **skeleton-webpack** - This project is configured to use either the Babel (ESNext) or the TypeScript transpiler so that you can write your application using either language. It should work well with any standard text editor. This skeleton uses NPM for package management and Webpack for bundling.
16-
* **skeleton-esnext** - This project is configured to use the Babel transpiler so that you can write your application with ESNext code. It should work well with any standard text editor. This skeleton uses JSPM for package management and SystemJS for loading and bundling.
17-
* **skeleton-typescript** - This project is configured to use the TypeScript transpiler so that you can write your application using TypeScript. It should work well with any standard text editor, however it has been specially configured to work well with VSCode and Atom, including full TypeScript intellisense for app, unit test and e2e test code. This skeleton uses JSPM for package management and SystemJS for loading and bundling.
18-
* **skeleton-typescript-aspnetcore** - This is an ASP.NET Core web project configured for building a .NET backend and an Aurelia front-end. It is configured for full TypeScript support, similar to the standard skeleton-typescript option. This skeleton uses JSPM for package management and SystemJS for loading and bundling.
19-
* **skeleton-esnext-aspnetcore** - This is an ASP.NET Core web project pre-configured for building a .NET backend and an Aurelia front-end. It is configured for full ES Next support with Babel, similar to the standard skeleton-esnext option. This skeleton uses JSPM for package management and SystemJS for loading and bundling.
16+
To run the app execute the following command:
17+
18+
```shell
19+
npm start
20+
```
21+
22+
This command starts the webpack development server that serves the build bundles.
23+
You can now browse the skeleton app at http://localhost:9000. Changes in the code
24+
will automatically build and reload the app.
25+
26+
## Feature configuration
27+
28+
Most of the configuration will happen in the `webpack.config.js` file.
29+
There, you may configure advanced loader features or add direct SASS or LESS loading support.
30+
31+
## Bundling
32+
33+
To build a development bundle (output to /dist) execute:
34+
35+
```shell
36+
npm run build
37+
```
38+
39+
To build an optimized, minified production bundle (output to /dist) execute:
40+
41+
```shell
42+
npm run build:prod
43+
```
44+
45+
To test either the development or production build execute:
46+
47+
```shell
48+
npm run server:prod
49+
```
50+
51+
The production bundle includes all files that are required for deployment.
52+
53+
## Resource and bundling configuration
54+
55+
You may want to separate out parts of your code to other files.
56+
This can be done by specifying a build resource object inside `package.json`.
57+
58+
For example, if you wanted to lazy-load the /users path of the skeleton you could define it as follows:
59+
60+
```js
61+
// (package.json)
62+
"aurelia": {
63+
"build": {
64+
"resources": [
65+
{
66+
"path": "users",
67+
"bundle": "users",
68+
"lazy": true
69+
}
70+
]
71+
}
72+
},
73+
```
74+
75+
The "path" field can be either a string or an array of strings.
76+
The string should be a path, relative to the src or in case of an external resource, as a require path (e.g. `aurelia-plugin/some-resource.html`).
77+
`.js`, `.ts` and `.html` extensions are optional and will be resolved automatically.
78+
The bundle setting is recursive, therefore any files required by the specified path will also be contained by the bundle, unless they are also contained by another one (iteration is done from first to last resource).
79+
80+
Resources must also be specified in case Aurelia is supposed to load an external file or an external module that was not defined as a resource by any of the dependencies.
81+
Since the syntax is still relatively new, most Aurelia plugins don't define their resources.
82+
There might also be reasons not to declare those resources, in case the plugin is to be consumed only partially.
83+
If you'd like to use external resources, you should declare them yourself, like so:
84+
85+
```js
86+
// (package.json)
87+
"aurelia": {
88+
"build": {
89+
"resources": [
90+
"aurelia-some-ui-plugin/dropdown",
91+
"aurelia-some-ui-plugin/checkbox"
92+
]
93+
}
94+
},
95+
```
96+
97+
You can also combine both features to separate out plugins or resources for lazy-loading:
98+
99+
```js
100+
// (package.json)
101+
"aurelia": {
102+
"build": {
103+
"resources": [
104+
{
105+
"path": "aurelia-animator-css",
106+
"bundle": "animator",
107+
"lazy": true
108+
},
109+
{
110+
"path": [
111+
// lets say we only use the checkbox from within subpage1
112+
// we want those to be bundled together in a bundle called: "subpage1"
113+
"aurelia-some-ui-plugin/checkbox",
114+
"./items/subpage1"
115+
],
116+
"bundle": "subpage1",
117+
"lazy": true
118+
},
119+
"aurelia-some-ui-plugin/dropdown"
120+
]
121+
}
122+
},
123+
```
124+
125+
Please see https://github.com/aurelia/webpack-plugin for more information.
126+
127+
## Running The Unit Tests
128+
129+
To run the unit tests:
130+
131+
```shell
132+
npm run test
133+
```
134+
135+
## Running The E2E Tests
136+
Integration tests are performed with [Protractor](http://angular.github.io/protractor/#/).
137+
138+
1. Place your E2E-Tests into the folder ```test/e2e/src```
139+
140+
2. Run the tests by invoking
141+
142+
```shell
143+
npm run e2e
144+
```
145+
146+
### Running e2e tests manually
147+
148+
1. Make sure your app runs and is accessible
149+
150+
```shell
151+
WEBPACK_PORT=19876 npm start
152+
```
153+
154+
3. Once bundle is ready, run the E2E-Tests in another console
155+
156+
```shell
157+
npm run e2e:start
158+
```
159+
160+
## Electron (coming soon)
161+
162+
To add Electron support to the skeleton, first run:
163+
164+
```shell
165+
npm run electron:setup
166+
```
167+
168+
Once the packages are installed, you may either view your app in Electron or build application packages for production:
169+
170+
```shell
171+
# developing on Electron with live-reload
172+
npm run electron:start
173+
174+
# creates packages for the current operating system
175+
npm run electron:package
176+
177+
# creates packages for all operating systems
178+
npm run electron:package:all
179+
```
180+
181+
The entry-file for Electron can be found in `config/electron.entry.development.ts`.
182+
183+
Building or creating the Electron package will create a file `electron.js` in the root directory of the skeleton.
184+
185+
### Loading native packages in Electron
186+
187+
If you have packages that cannot work in the Electron Renderer process (e.g. native packages), or wish to use the package in the renderer process as if it is running under Node, list them under `externals`, in the file `config/webpack.electron.js`.
188+
189+
## Acknowledgments
190+
191+
Parts of code responsible for Webpack configuration were inspired by or copied from @AngularClass' [angular2-webpack-starter](https://github.com/AngularClass/angular2-webpack-starter).
192+
193+
Parts of code responsible for Webpack-Electron configuration and packaging were inspired by or copied from @chentsulin's [electron-react-boilerplate](https://github.com/chentsulin/electron-react-boilerplate).

circle.yml

-40
This file was deleted.

custom_typings/fetch.d.ts

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
interface URLSearchParams {}
2+
declare module "isomorphic-fetch" {
3+
export = fetch;
4+
}
File renamed without changes.

0 commit comments

Comments
 (0)