├── .gitignore ├── README.md ├── e2e ├── index.spec.js └── protractor.conf.js ├── gulpfile.js ├── license ├── package.json ├── src ├── app │ └── app.ts ├── index.html ├── resources │ └── favicon.ico ├── styles │ └── styles.css └── system.config.js └── tsconfig.json /.gitignore: -------------------------------------------------------------------------------- 1 | src/**/*.js 2 | !src/system.config.js 3 | node_modules/ 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Essential JS 2 QuickStart 2 | 3 | This project is a skeleton application used to create [Essential JS 2](https://www.syncfusion.com/products/essential-js2) web application. 4 | 5 | The application contains Essential JS 2 button component for preview and all common settings are preconfigured. 6 | 7 | ## Getting Started 8 | 9 | To get started you need to clone the `ej2-quickstart` repository and navigate to `ej2-quickstart` location. 10 | 11 | ``` 12 | git clone https://github.com/syncfusion/ej2-quickstart.git quickstart 13 | cd quickstart 14 | ``` 15 | 16 | ## Installing 17 | 18 | We can get all the Essential JS 2 components in a single npm package [`ej2`](https://www.npmjs.com/package/@syncfusion/ej2). 19 | 20 | We already configure the required packages in the `package.json` file. 21 | 22 | You can run the below command to install all dependent packages related to this seed project. 23 | 24 | ``` 25 | npm install 26 | ``` 27 | 28 | ## Testing 29 | 30 | This application is preconfigured with End-to-End testing and the test case is written in Jasmine. 31 | 32 | We run the test scripts with [Protractor](http://www.protractortest.org/#/) end-to-end test runner. The test case file can be found in the `e2e` folder. 33 | 34 | Protractor can interact with our web application and verify the test scripts. 35 | 36 | We have to install WebDriver and also need to ensure it is updated. Open a separate terminal and run the below npm script. 37 | 38 | ``` 39 | npm run update-webdriver 40 | ``` 41 | 42 | Open another terminal and run the below npm script. It will start web server to serve our application. 43 | 44 | ``` 45 | npm run serve 46 | ``` 47 | 48 | Once the web server is up and running, we can run the end-to-end tests using the below npm script 49 | 50 | ``` 51 | npm run test 52 | ``` 53 | 54 | > **Note:** Since Protractor is using the Selenium Standalone Server, the Java Development Kit (JDK) need to be installed in your local machine. 55 | 56 | If JDK is not installed in your local machine, you can download it from [here](http://www.oracle.com/technetwork/java/javase/downloads/index.html). 57 | 58 | ## Running 59 | 60 | The application is configured with `browser-sync`, so it will serve the web application in your default browser. 61 | 62 | We used `SystemJS` for module loading. 63 | 64 | You can use the below npm script to run the web application. 65 | 66 | ``` 67 | npm run start 68 | ``` 69 | 70 | ## Resources 71 | 72 | You can also refer the below resources to know more details about Essential JS 2 components. 73 | 74 | * [Pure JS Demos](http://ej2.syncfusion.com/demos/) 75 | * [Pure JS Documentation](http://ej2.syncfusion.com/documentation/) 76 | -------------------------------------------------------------------------------- /e2e/index.spec.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/syncfusion/ej2-quickstart/26c640c7fc65ffe3720df2498ddd5fdef7b4269f/e2e/index.spec.js -------------------------------------------------------------------------------- /e2e/protractor.conf.js: -------------------------------------------------------------------------------- 1 | exports.config = { 2 | 3 | allScriptsTimeout: 11000, 4 | 5 | capabilities: { 6 | 'browserName': 'chrome' 7 | }, 8 | 9 | framework: 'jasmine', 10 | 11 | jasmineNodeOpts: { 12 | defaultTimeoutInterval: 10000 13 | }, 14 | 15 | onPrepare: function() { 16 | browser.waitForAngularEnabled(false); 17 | }, 18 | 19 | specs: ['./*.spec.js'] 20 | }; -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var gulp = require('gulp'); 4 | 5 | /** 6 | * Compile TypeScript to JS 7 | */ 8 | gulp.task('compile', gulp.series(function(done) { 9 | var ts = require('gulp-typescript'); 10 | // Default typescript config 11 | var defaultConfig = { 12 | typescript: require('typescript') 13 | }; 14 | var tsProject, tsResult; 15 | // Create the typescript project 16 | tsProject = ts.createProject('tsconfig.json', defaultConfig); 17 | // Get typescript result 18 | tsResult = gulp.src(['./src/**/*.ts'], { base: '.' }) 19 | .pipe(ts(tsProject)) 20 | .pipe(gulp.dest('./')) 21 | .on('error', function(e) { 22 | done(e); 23 | process.exit(1); 24 | }).on('end', function() { 25 | done(); 26 | }); 27 | })); 28 | 29 | /** 30 | * Load the sample in src/app/index 31 | */ 32 | gulp.task('start', gulp.series('compile', function(done) { 33 | var browserSync = require('browser-sync'); 34 | var bs = browserSync.create('Essential JS 2'); 35 | var options = { 36 | server: { 37 | baseDir: ['./src', './'] 38 | }, 39 | ui: false 40 | }; 41 | bs.init(options, done); 42 | 43 | /** 44 | * Watching typescript file changes 45 | */ 46 | gulp.watch('src/**/*.ts', gulp.series('compile', bs.reload)).on('change', reportChanges); 47 | })); 48 | 49 | 50 | 51 | function reportChanges(event) { 52 | console.log('File ' + event.path + ' was ' + event.type + ', running tasks...'); 53 | } 54 | /** 55 | * Testing spec files 56 | */ 57 | var protractor = require('gulp-protractor').protractor; 58 | var webdriver_standalone = require('gulp-protractor').webdriver_standalone; 59 | var webdriver_update = require('gulp-protractor').webdriver_update_specific; 60 | 61 | gulp.task('e2e-serve', webdriver_standalone); 62 | 63 | gulp.task('e2e-webdriver-update', webdriver_update({ 64 | webdriverManagerArgs: ['--ie', '--edge'] 65 | })); 66 | 67 | gulp.task('e2e-test', gulp.series('compile', function(done) { 68 | var browserSync = require('browser-sync'); 69 | var bs = browserSync.create('Essential JS 2'); 70 | var options = { 71 | server: { 72 | baseDir: [ 73 | './src/app/', 74 | './src/resource/', 75 | './node_modules/@syncfusion/ej2/' 76 | ], 77 | directory: true 78 | }, 79 | ui: false, 80 | open: false, 81 | notify: false 82 | }; 83 | bs.init(options, function() { 84 | gulp.src(['./spec/**/*.spec.js']) 85 | .pipe(protractor({ 86 | configFile: 'e2e/protractor.conf.js' 87 | })) 88 | .on('error', function(e) { 89 | console.error('Error: ' + e.message); 90 | done(); 91 | process.exit(1); 92 | }) 93 | .on('end', function() { 94 | done(); 95 | process.exit(0); 96 | }); 97 | }); 98 | })); -------------------------------------------------------------------------------- /license: -------------------------------------------------------------------------------- 1 | Essential JS 2 library is available under the Syncfusion Essential Studio program, and can be licensed either under the Syncfusion Community License Program or the Syncfusion commercial license. 2 | 3 | To be qualified for the Syncfusion Community License Program you must have a gross revenue of less than one (1) million U.S. dollars ($1,000,000.00 USD) per year and have less than five (5) developers in your organization, and agree to be bound by Syncfusion’s terms and conditions. 4 | 5 | Customers who do not qualify for the community license can contact sales@syncfusion.com for commercial licensing options. 6 | 7 | Under no circumstances can you use this product without (1) either a Community License or a commercial license and (2) without agreeing and abiding by Syncfusion’s license containing all terms and conditions. 8 | 9 | The Syncfusion license that contains the terms and conditions can be found at 10 | https://www.syncfusion.com/content/downloads/syncfusion_license.pdf 11 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ej2-quickstart", 3 | "version": "0.0.1", 4 | "description": "Essential JS 2 typescript quick start application", 5 | "author": "Syncfusion Inc.", 6 | "license": "SEE LICENSE IN license", 7 | "repository": { 8 | "type": "git", 9 | "url": "https://github.com/syncfusion/ej2-quickstart.git" 10 | }, 11 | "dependencies": { 12 | "@syncfusion/ej2": "*" 13 | }, 14 | "devDependencies": { 15 | "browser-sync": "^2.18.12", 16 | "gulp": "*", 17 | "gulp-protractor": "*", 18 | "gulp-typescript": "*", 19 | "jasmine": "^2.6.0", 20 | "systemjs": "^0.20.14", 21 | "typescript": "*" 22 | }, 23 | "scripts": { 24 | "start": "gulp start", 25 | "serve": "gulp e2e-serve", 26 | "test": "gulp e2e-test", 27 | "update-webdriver": "gulp e2e-webdriver-update" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/app/app.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/syncfusion/ej2-quickstart/26c640c7fc65ffe3720df2498ddd5fdef7b4269f/src/app/app.ts -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Essential JS 2 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /src/resources/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/syncfusion/ej2-quickstart/26c640c7fc65ffe3720df2498ddd5fdef7b4269f/src/resources/favicon.ico -------------------------------------------------------------------------------- /src/styles/styles.css: -------------------------------------------------------------------------------- 1 | @import '../../node_modules/@syncfusion/ej2/material.css'; 2 | -------------------------------------------------------------------------------- /src/system.config.js: -------------------------------------------------------------------------------- 1 | System.config({ 2 | paths: { 3 | 'npm:': './node_modules/', 4 | 'syncfusion:': 'npm:@syncfusion/' 5 | 6 | }, 7 | map: { 8 | app: 'app', 9 | 10 | //Syncfusion packages mapping 11 | "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", 12 | "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", 13 | "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", 14 | "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", 15 | "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", 16 | "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", 17 | "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", 18 | "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", 19 | "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js", 20 | "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", 21 | "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", 22 | "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", 23 | "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", 24 | "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", 25 | "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js", 26 | "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", 27 | "@syncfusion/ej2-querybuilder": "syncfusion:ej2-querybuilder/dist/ej2-querybuilder.umd.min.js", 28 | "@syncfusion/ej2-spreadsheet": "syncfusion:ej2-spreadsheet/dist/ej2-spreadsheet.umd.min.js" 29 | }, 30 | packages: { 31 | 'app': { main: 'app', defaultExtension: 'js' } 32 | } 33 | }); 34 | 35 | System.import('app'); 36 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "amd", 5 | "removeComments": true, 6 | "noLib": false, 7 | "sourceMap": true, 8 | "pretty": true, 9 | "allowUnreachableCode": false, 10 | "allowUnusedLabels": false, 11 | "noImplicitAny": true, 12 | "noImplicitReturns": true, 13 | "noImplicitUseStrict": false, 14 | "noFallthroughCasesInSwitch": true, 15 | "allowJs": false, 16 | "noEmitOnError": true, 17 | "forceConsistentCasingInFileNames": true, 18 | "moduleResolution": "node", 19 | "suppressImplicitAnyIndexErrors": true, 20 | "lib": ["es6", "dom"] 21 | }, 22 | "compileOnSave": false 23 | } --------------------------------------------------------------------------------