The build process used by Madness Labs to build Ionic hybrid apps
This sections starts with a reference list of all of the dependencies so that you can understand what each of these peices do. Then there is step-by-step instructions on how to install the dependencies.
Below is a list of resources to help understand the software stack better. Keep scrolling or click for the step-by-step instructions.
- NodeJS - For spinning up local JavaScript driven server
- GulpJS - For running local, JavaScript driven, command line tasks
- Browser Sync - For viewing changes live in the browser without having to leave your IDE
- Ionic - For wrapping your app for Mobile (iOS & Android) and stock UI with icons.
- SASS - For writting cleaner and variable capable CSS.
- TypeScript - For using ES6 with static typing.
- Pug - For writing cleaner and variable capable HTML.
- Install NodeJS by clicking the "Install" button on their Home Page and following the instructions
- Open Shell and run the following command
npm install -g cordova ionic browser-sync gulp jade typescript typings jadelint sass-lint
After you Have installed all of the dependencies using the step by step above you can install project using the installation instructions. Then you are ready to start hacking with the platform.
Installation is required if you wish to view the application. This assumes you have installed all of the Dependencies. Run the command below to install the build dependencies, build the web root from source files, and start a Browser Sync session in the default browser, to begin building.
git clone https://github.com/MadnessLabs/MadnessIonic.git <APP NAME>
cd <APP NAME>
npm install
Now watch your console go crazy and wait for it to ask you some questions about your app. Answer the questions, then it will finish the install and open your new app in the browser, ready to be worked on.
We have tried to make developing applications as easy as possible. We use Sublime Text 3 to do all of our projects, but this is by no means exclusive to that program. If you aren't using Sublime Text then skip to the Other RTE section.
- Open Sublime Text project file located in root. ( .sublime-project )
- Select "Tools" -> "Build" (Ctrl + B) to start build with GulpJS.
- Open browser to project and click the Live Reload extension making sure the black dot fills in on the icon.
That's it! Now when you make changes to the files in src/ directory, the browser will reload to show changes auto-magically.
Open Shell to project's root and run
gulp
That's it! Now when you make changes to the files in src/ directory, the browser will reload to show changes auto-magically.
This app structure was made by the good people at Madness Labs and is OPEN SOURCE. What good is making a brilliant application development process if you don't let others use it. Enjoy! ^_^