Skip to content

Commit

Permalink
Ng not ejected anymore
Browse files Browse the repository at this point in the history
  • Loading branch information
Maxime GRIS committed Feb 25, 2018
1 parent 1ae6f7a commit 67ab31c
Show file tree
Hide file tree
Showing 26 changed files with 473 additions and 733 deletions.
18 changes: 9 additions & 9 deletions .angular-cli.json
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "angular-electron",
"ejected": true
"name": "angularelectron"
},
"apps": [
{
Expand All @@ -22,8 +21,7 @@
"styles": [
"styles.scss"
],
"scripts": [
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
Expand All @@ -38,13 +36,16 @@
},
"lint": [
{
"project": "src/tsconfig.app.json"
"project": "src/tsconfig.app.json",
"exclude": "**/node_modules/**"
},
{
"project": "src/tsconfig.spec.json"
"project": "src/tsconfig.spec.json",
"exclude": "**/node_modules/**"
},
{
"project": "e2e/tsconfig.e2e.json"
"project": "e2e/tsconfig.e2e.json",
"exclude": "**/node_modules/**"
}
],
"test": {
Expand All @@ -54,7 +55,6 @@
},
"defaults": {
"styleExt": "scss",
"component": {
}
"component": {}
}
}
55 changes: 17 additions & 38 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,10 @@ Bootstrap and package your project with Angular 5(+) and Electron (Typescript +

Currently runs with:

- Angular v5.2.0
- Angular v5.2.5
- Angular-CLI v1.6.4
- Electron v1.7.8
- Electron Builder v19.45.4
- Electron v1.8.2
- Electron Builder v20.0.4

With this sample, you can :

Expand All @@ -42,6 +42,7 @@ npm install

There is an issue with `yarn` and `node_modules` that are only used in electron on the backend when the application is built by the packager. Please use `npm` as dependencies manager.


If you want to generate Angular components with Angular-cli , you **MUST** install `@angular/cli` in npm global context.
Please follow [Angular-cli documentation](https://github.com/angular/angular-cli) if you had installed a previous version of `angular-cli`.

Expand All @@ -55,58 +56,36 @@ npm install -g @angular/cli

Voila! You can use your Angular + Electron app in a local development environment with hot reload !

The application code is managed by `main.ts`. In this sample, the app runs with a simple Electron window and "Developer Tools" is open.
The Angular component contains an example of Electron and NodeJS native lib import. See [Use NodeJS Native libraries](#use-nodejs-native-libraries) charpter if you want to import other native libraries in your project.
The application code is managed by `main.ts`. In this sample, the app runs with a simple Angular App (http://localhost:4200) and an Electron window.
The Angular component contains an example of Electron and NodeJS native lib import.
You can desactivate "Developer Tools" by commenting `win.webContents.openDevTools();` in `main.ts`.

## To build for production

- Using development variables (environments/index.ts) : `npm run electron:dev`
- Using production variables (environments/index.prod.ts) : `npm run electron:prod`
## Manage your environment variables

Your built files are in the /dist folder.
- Using local variables : `npm start` or `cross-env ENV=local npm start`
- Using development variables : `cross-env ENV=dev npm start`
- Using production variables : `cross-env ENV=rod npm start`

## Included Commands

|Command|Description|
|--|--|
|`npm run start:web`| Execute the app in the browser |
|`npm run ng:serve`| Execute the app in the browser |
|`npm run build`| Build the app. Your built files are in the /dist folder. |
|`npm run build:prod`| Build the app with Angular aot. Your built files are in the /dist folder. |
|`npm run electron:local`| Builds your application and start electron
|`npm run electron:linux`| Builds your application and creates an app consumable on linux system |
|`npm run electron:windows`| On a Windows OS, builds your application and creates an app consumable in windows 32/64 bit systems |
|`npm run electron:mac`| On a MAC OS, builds your application and generates a `.app` file of your application that can be run on Mac |

**Your application is optimised. Only the files of /dist folder are included in the executable.**

## Use NodeJS Native libraries

Actually Angular-Cli doesn't seem to be able to import nodeJS native libs or electron libs at compile time (Webpack error). This is (one of) the reason why webpack.config was ejected of ng-cli.
If you need to use NodeJS native libraries, you **MUST** add it manually in the file `webpack.config.js` in root folder :

```javascript
"externals": {
"electron": 'require(\'electron\')',
"child_process": 'require(\'child_process\')',
"fs": 'require(\'fs\')'
...
},
```

Notice that all NodeJS v7 native libs are already added in this sample. Feel free to remove those you don't need.
**Your application is optimised. Only /dist folder and node dependencies are included in the executable.**

## Browser mode

Maybe you want to execute the application in the browser (WITHOUT HOT RELOAD ACTUALLY...) ? You can do it with `npm run start:web`.
Maybe you want to execute the application in the browser (WITHOUT HOT RELOAD ACTUALLY...) ? You can do it with `npm run ng:serve`.
Note that you can't use Electron or NodeJS native libraries in this case. Please check `providers/electron.service.ts` to watch how conditional import of electron/Native libraries is done.

## Execute E2E tests

You can find end-to-end tests in /e2e folder.

You can run tests with the command lines below :
- **in a terminal window** -> First, start a web server on port 4200 : `npm run start:web`
- **in another terminal window** -> Then, launch Protractor (E2E framework): `npm run e2e`

# Contributors
## Contributors

[<img alt="Maxime GRIS" src="https://avatars2.githubusercontent.com/u/10827551?v=3&s=117" width="117">](https://github.com/maximegris) |
:---:
Expand Down
1 change: 0 additions & 1 deletion electron-builder.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
{
"productName": "angular-electron",
"directories": {
"app": "dist",
"output": "app-builds"
},
"win": {
Expand Down
196 changes: 196 additions & 0 deletions hooks/environments/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,196 @@
<!--
#
# Licensed to the Apache Software Foundation (ASF) under one
# or more contributor license agreements. See the NOTICE file
# distributed with this work for additional information
# regarding copyright ownership. The ASF licenses this file
# to you under the Apache License, Version 2.0 (the
# "License"); you may not use this file except in compliance
# with the License. You may obtain a copy of the License at
#
# http://www.apache.org/licenses/LICENSE-2.0
#
# Unless required by applicable law or agreed to in writing,
# software distributed under the License is distributed on an
# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
# KIND, either express or implied. See the License for the
# specific language governing permissions and limitations
# under the License.
#
-->
# Cordova Hooks

Cordova Hooks represent special scripts which could be added by application and plugin developers or even by your own build system to customize cordova commands. Hook scripts could be defined by adding them to the special predefined folder (`/hooks`) or via configuration files (`config.xml` and `plugin.xml`) and run serially in the following order:
* Application hooks from `/hooks`;
* Application hooks from `config.xml`;
* Plugin hooks from `plugins/.../plugin.xml`.

__Remember__: Make your scripts executable.

__Note__: `.cordova/hooks` directory is also supported for backward compatibility, but we don't recommend using it as it is deprecated.

## Supported hook types
The following hook types are supported:

after_build/
after_compile/
after_docs/
after_emulate/
after_platform_add/
after_platform_rm/
after_platform_ls/
after_plugin_add/
after_plugin_ls/
after_plugin_rm/
after_plugin_search/
after_plugin_install/ <-- Plugin hooks defined in plugin.xml are executed exclusively for a plugin being installed
after_prepare/
after_run/
after_serve/
before_build/
before_compile/
before_docs/
before_emulate/
before_platform_add/
before_platform_rm/
before_platform_ls/
before_plugin_add/
before_plugin_ls/
before_plugin_rm/
before_plugin_search/
before_plugin_install/ <-- Plugin hooks defined in plugin.xml are executed exclusively for a plugin being installed
before_plugin_uninstall/ <-- Plugin hooks defined in plugin.xml are executed exclusively for a plugin being uninstalled
before_prepare/
before_run/
before_serve/
pre_package/ <-- Windows 8 and Windows Phone only.

## Ways to define hooks
### Via '/hooks' directory
To execute custom action when corresponding hook type is fired, use hook type as a name for a subfolder inside 'hooks' directory and place you script file here, for example:

# script file will be automatically executed after each build
hooks/after_build/after_build_custom_action.js


### Config.xml

Hooks can be defined in project's `config.xml` using `<hook>` elements, for example:

<hook type="before_build" src="scripts/appBeforeBuild.bat" />
<hook type="before_build" src="scripts/appBeforeBuild.js" />
<hook type="before_plugin_install" src="scripts/appBeforePluginInstall.js" />

<platform name="wp8">
<hook type="before_build" src="scripts/wp8/appWP8BeforeBuild.bat" />
<hook type="before_build" src="scripts/wp8/appWP8BeforeBuild.js" />
<hook type="before_plugin_install" src="scripts/wp8/appWP8BeforePluginInstall.js" />
...
</platform>

<platform name="windows8">
<hook type="before_build" src="scripts/windows8/appWin8BeforeBuild.bat" />
<hook type="before_build" src="scripts/windows8/appWin8BeforeBuild.js" />
<hook type="before_plugin_install" src="scripts/windows8/appWin8BeforePluginInstall.js" />
...
</platform>

### Plugin hooks (plugin.xml)

As a plugin developer you can define hook scripts using `<hook>` elements in a `plugin.xml` like that:

<hook type="before_plugin_install" src="scripts/beforeInstall.js" />
<hook type="after_build" src="scripts/afterBuild.js" />

<platform name="wp8">
<hook type="before_plugin_install" src="scripts/wp8BeforeInstall.js" />
<hook type="before_build" src="scripts/wp8BeforeBuild.js" />
...
</platform>

`before_plugin_install`, `after_plugin_install`, `before_plugin_uninstall` plugin hooks will be fired exclusively for the plugin being installed/uninstalled.

## Script Interface

### Javascript

If you are writing hooks in Javascript you should use the following module definition:
```javascript
module.exports = function(context) {
...
}
```

You can make your scipts async using Q:
```javascript
module.exports = function(context) {
var Q = context.requireCordovaModule('q');
var deferral = new Q.defer();

setTimeout(function(){
console.log('hook.js>> end');
deferral.resolve();
}, 1000);

return deferral.promise;
}
```

`context` object contains hook type, executed script full path, hook options, command-line arguments passed to Cordova and top-level "cordova" object:
```json
{
"hook": "before_plugin_install",
"scriptLocation": "c:\\script\\full\\path\\appBeforePluginInstall.js",
"cmdLine": "The\\exact\\command\\cordova\\run\\with arguments",
"opts": {
"projectRoot":"C:\\path\\to\\the\\project",
"cordova": {
"platforms": ["wp8"],
"plugins": ["com.plugin.withhooks"],
"version": "0.21.7-dev"
},
"plugin": {
"id": "com.plugin.withhooks",
"pluginInfo": {
...
},
"platform": "wp8",
"dir": "C:\\path\\to\\the\\project\\plugins\\com.plugin.withhooks"
}
},
"cordova": {...}
}

```
`context.opts.plugin` object will only be passed to plugin hooks scripts.

You can also require additional Cordova modules in your script using `context.requireCordovaModule` in the following way:
```javascript
var Q = context.requireCordovaModule('q');
```

__Note__: new module loader script interface is used for the `.js` files defined via `config.xml` or `plugin.xml` only.
For compatibility reasons hook files specified via `/hooks` folders are run via Node child_process spawn, see 'Non-javascript' section below.

### Non-javascript

Non-javascript scripts are run via Node child_process spawn from the project's root directory and have the root directory passes as the first argument. All other options are passed to the script using environment variables:

* CORDOVA_VERSION - The version of the Cordova-CLI.
* CORDOVA_PLATFORMS - Comma separated list of platforms that the command applies to (e.g.: android, ios).
* CORDOVA_PLUGINS - Comma separated list of plugin IDs that the command applies to (e.g.: org.apache.cordova.file, org.apache.cordova.file-transfer)
* CORDOVA_HOOK - Path to the hook that is being executed.
* CORDOVA_CMDLINE - The exact command-line arguments passed to cordova (e.g.: cordova run ios --emulate)

If a script returns a non-zero exit code, then the parent cordova command will be aborted.

## Writing hooks

We highly recommend writing your hooks using Node.js so that they are
cross-platform. Some good examples are shown here:

[http://devgirl.org/2013/11/12/three-hooks-your-cordovaphonegap-project-needs/](http://devgirl.org/2013/11/12/three-hooks-your-cordovaphonegap-project-needs/)

Also, note that even if you are working on Windows, and in case your hook scripts aren't bat files (which is recommended, if you want your scripts to work in non-Windows operating systems) Cordova CLI will expect a shebang line as the first line for it to know the interpreter it needs to use to launch the script. The shebang line should match the following example:

#!/usr/bin/env [name_of_interpreter_executable]
23 changes: 23 additions & 0 deletions hooks/environments/app.config.ts.tpl
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import { CONF_LOCAL } from '../environments/environment.local';
import { CONF_DEV } from '../environments/environment.dev';
import { CONF_PROD } from '../environments/environment.prod';

const ENV = 'PROFILE';

const LOCAL: String = 'local';
const DEV: String = 'dev';
const PROD: String = 'prod';

let conf: any;

console.log('Env', ENV);

if (ENV === PROD) {
conf = CONF_PROD;
} else if (ENV === DEV) {
conf = CONF_DEV;
} else {
conf = CONF_LOCAL;
}

export const AppConfig = Object.assign({}, conf);
20 changes: 20 additions & 0 deletions hooks/environments/set_profile.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
// require:
var replace = require("replace");
var fs = require('fs-extra');
var path = require('path');

// use:
var profile = process.env.ENV ? process.env.ENV : 'local';

console.log('Déplacement du template de fichier de détection de configuration ...');
fs.copySync(path.resolve(__dirname,'./app.config.ts.tpl'), path.resolve(__dirname,'../src/app/app.config.ts'));

console.log('Application du profil : ' + profile);

replace({
regex: "'PROFILE'",
replacement: "'" + profile + "'",
paths: ['src/app/app.config.ts'],
recursive: true,
silent: true,
});
Loading

0 comments on commit 67ab31c

Please sign in to comment.