OpenTheWindow games project.
- Angular2
- Electron
- Express (node backend server)
- Jasmine (unit tests) + Karma (test runner)
- Protractor (end to end testing)
- Webpack
Component approach is used. This is the new standard for developing Angular apps and a great way to ensure maintainable code by encapsulation of our behavior logic. A component is basically a self contained app usually in a single file or a folder with each concern as a file: style, template, specs, e2e, and component class. Here's how it looks:
OPEN_Launcher/
│
├──backend/ * nodejs backend (`api.js` is the entry point)
|
├──e2e/ * folder that holds e2e tests and page objects for the components
│
├──src/ * our source files that will be compiled to javascript
│ │
| ├──app.ts * our entry file for our browser environment - the root component
│ │
| ├──index.html * where we generate our index page
│ │
| ├──main.js * the script the main Electron process is going to run
│ │
| ├──polyfills.ts * our polyfills file
│ │
| ├──vendor.ts * our vendor file
│ │
│ ├──app/ * WebApp: folder
│ │ ├──components/ * folder that holds specific components
│ │ │ └──component/ * specific component business group
│ │ │ ├──component.ts * a specific component typescript
│ │ │ └──component.spec.ts * a simple test of the component
│ │ │
│ │ └──shared/ * folder that holds shared components
│ │ ├──enums/ * our enumerations are here
│ │ ├──mocks/ * our mocks are here
│ │ ├──models/ * our models are here
│ │ ├──pipes/ * our pipes are here
│ │ ├──plugins/ * folder for third party components (not written by us)
│ │ └──services/ * folder for services used across the application
│ │
│ │
│ └──assets/ * static assets are served here
│ ├──css/ * our stylesheets are here
│ ├──games/ * games executables are here
│ ├──images/ * images are stored here
│ ├──js/ * only requiring jquery statement is stored here (this might be changed)
│ ├──translations/ * translated resources
│ ├──robots.txt * for search engines to crawl your website
│ └──db.json * json database where users are stored
│
├──tslint.json * typescript lint config
├──typedoc.json * typescript documentation generator
├──tsconfig.json * config that webpack uses for typescript
├──typings.json * our typings manager
└──package.json * what npm uses to manage it's dependencies
What you need to run this app:
nodeandnpm(brew install node)- Ensure you're running the latest versions Node
v4.1.x+ and NPM2.14.x+
Once you have those, you should install these globals with npm install --global:
webpack(npm install --global webpack)karma(npm install --global karma-cli)protractor(npm install --global protractor)typings(npm install --global typings)typescript(npm install --global typescript)electron-packager(npm install --global electron-packager)
forkthis repocloneyour forknpm installto install all dependenciesnpm startto start the app on localhost:3000
After you have installed all dependencies you can now run the app. Run npm start to start the app, which will be started on http://0.0.0.0:3000 (or if you prefer IPv6, if you're using express server, then it's http://[::1]:3000/).
Building the exe file using Electron
Electron can be used with any framework, so once Electron is set in place, we simply create the Angular 2 app as we would for the web.
The Electron configuration is contained in ./src/main.js.
Building Windows installer using Electron Installer
Electron Installer is a NPM module that builds Windows installers for Electron apps using Squirrel.
The Electron Installer configuration is contained in installer.js.
Set the environment variable to 'prod' in ./backend/env.js.
To build application exe file for win32 x64 run the following command:
npm run packTo build Windows installer for the application run the following command:
npm run installer# development
npm run server
# production
npm run build:prod
npm run server:prodnpm run testnpm run watch:test# make sure you have your server running in another terminal
npm run e2enpm run webdriver:update
npm run webdriver:startTypeScript 1.7.x includes everything you need. Make sure to upgrade, even if you installed TypeScript previously.
npm install --global typescript
- Visual Studio Code
- Webstorm 10
- Atom with TypeScript plugin
- Sublime Text with Typescript-Sublime-Plugin
When you include a module that doesn't include Type Definitions inside of the module you need to include external Type Definitions with Typings
npm install --global typings
When including 3rd party modules you also need to include the type definition for the module if they don't provide one within the module. You can try to install it with typings
typings install node --save
If you can't find the type definition in the registry we can make an ambient definition in this file for now. For example
declare module "my-module" {
export function doesSomething(value: string): string;
}If you're prototyping and you will fix the types later you can also declare it as type any
declare var assert: any;If you're importing a module that uses Node.js modules which are CommonJS you need to import as
import * as _ from 'lodash';