Play with Ionic, Unit Tests and Electron.
A client front-end app for:
Test the LIVE DEMO or download the Electron version of the app (currently available for MacOS)
This applications needs a RESTful backend API to communication with. You have the following option
- Use the service deployed on Heroku:
- Install the nodejs-rest-contacts project and run it on your local box
Note: If you choose to go with the local installation you should set the MASTER_KEY and JWT_SECRET in .env file.
Go into the project folder and run npm install
Edit src/config.ts and set the base URL for the API and the MASTER_TOKEN.
A test backend is deployed on Heroku:
If you use the deployed service on Heroku the MASTER_TOKEN is already in place.
If you run the nodejs-rest-contacts backend on your box, check the IP address and the port the Express server is listening for connections. (it should be 0.0.0.0:9000 or {your-local-ip}:9000)
Run ionic serve and test the application in your browser.
Run npm run test and have all the unit tests executed. Currently the app.component.ts and data.service.ts are covered.
Run npm run dev and start the Electron app in development with all auto reload and everything as if you were developing ionic application in browser.
Note: You may need to reload the app the first time (ctrl + R)
Run npm run ebuild. This will create all the Electron redistributable files.
Then check the ./dist folder for the generated binaries.
- Using Angular 2's Model-Driven Forms with FormGroup and FormControl
- How to Build Nested Model-driven Forms in Angular 2
- Let’s Make Desktop Application With Ionic 3 and Electron
Avatars are not part of the model. They are generated on the fly by utilizing the online service of Pravatar (eg: http://i.pravatar.cc/64?u=5b3f70010fcdd40014155032)
Technologies used:
- Front-end: Ionic 3
- Back-end: A RESTful API generated by generator-rest.
- Database: MongoDB
- ORM: Mongoose
If running the tests fail try to install a latest version of webpack npm i webpack.