Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

RA-1121/OMRSJS-5 migrate to webpack #15

Merged
merged 2 commits into from
May 17, 2016
Merged

RA-1121/OMRSJS-5 migrate to webpack #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
91610ca
RA-1121 migrate to webpack
pgutkowski Apr 27, 2016
eb6d583
RA-1121 use archiver to create distributable zip
pgutkowski May 11, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,4 @@
node_modules
.project
*~
npm-debug.log
40 changes: 26 additions & 14 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,9 @@
The following features are currently supported:

- [x] Scaffold basic OWA folder structure and files
- [x] Production build with [Gulp](http:https://gulpjs.com/)
- [x] Local deploy with Gulp
- [x] Package management with [Bower](http:https://bower.io/)
- [x] Production build with [Webpack](https:https://webpack.github.io/)
- [x] Local deploy with Webpack
- [x] Package management with [npm](http:https://npmjs.com/)
- [x] Live reload, interaction sync and more with [Browsersync](https://www.browsersync.io/)

## Getting Started
Expand All @@ -25,32 +25,44 @@ The following features are currently supported:
- Install the generator: `npm install --global generator-openmrs-owa`
- Create directory for your app: `mkdir openmrs-owa-myapp && cd $_`
- Run `yo openmrs-owa` to scaffold the Open Web App
- Run `gulp` to build distributable zip file
- Run `gulp deploy-local` to deploy directly to your local server
- Run `gulp watch` for live reloading and more
- Run `npm run build:prod` to build distributable zip file
- Run `npm run build:deploy` to deploy directly to your local server
- Run `npm run watch` for live reloading and more

## Extending

Install Bower packages dependencies as follows:
Install [npm](http:https://npmjs.com/) packages dependencies as follows:

````
bower install --save <package>
````sh
npm install --save <package>
````

Be sure to include the following in your `html` files at the position you want the Bower dependencies injected:
To use the installed package, import it as follows:

````js
//import and assign to variable
import variableName from 'package';
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we need to make a decision about whether we want to promote ES2015 (my preference) or whether we want to promote ES5. If we want to promote ES2015, then we should not show examples of the old syntax. We should also update the template to look more like ES2015.

What do you think @rkorytkowski?

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree with promoting ES2015 (ES6) in the owa generator and using proper ES6 imports here. That said there are not yet many examples of code in ES6 so I expect ES5 and ES6 to interleave in our codebase. I do not think it's a bad thing and we should not force ourselves to always use the ES6 syntax. Similarly we do not force using the Java 8 syntax instead of Java 7. Let's allow for an evolution and not a revolution :)

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we should not force ourselves to always use the ES6 syntax

Agreed. I just think we should have our examples in ES2015 to nudge people in the right direction 😄. That said, I am planning to add ESLint to the generator and using the Airbnb style (for non-Angular projects), which gives you warnings if you don't use ES2015.

Copy link
Contributor Author

@pgutkowski pgutkowski May 1, 2016 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am planning to add ESLint to the generator and using the Airbnb style (for non-Angular projects), which gives you warnings if you don't use ES2015.

In that case, I am removing old syntax example to avoid confusement.

````
<!-- bower:js -->
<!-- endbower -->

To contain package in vendor bundle, remember to add it to vendor entry point array, eg.:

````js
entry: {
app : `${__dirname}/app/js/owa.js`,
css: `${__dirname}/app/css/owa.css`,
vendor : [
'package',
...//other packages in vendor bundle
]
},
````
Do the same for your Bower stylesheet dependencies, but replace `js` with `css`.

Any files that you add manually must be added in the `app` directory.

## Options

- `--skip-welcome-message` Skips Yeoman's greeting before displaying options.
- `--skip-install` Skips automatically running `bower` and `npm`.
- `--skip-install` Skips automatically running `npm install`.

## Environment Variables

Expand Down
59 changes: 15 additions & 44 deletions app/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ module.exports = generators.Base.extend({
name: 'appName',
message: 'What is your app name?',
validate: function(input) {
if (input == null || input == "") {
if (input === null || input === "") {
return "App name is required";
} else {
return true;
Expand All @@ -75,7 +75,7 @@ module.exports = generators.Base.extend({
name: 'appDesc',
message: 'What is your app description?',
validate: function(input) {
if (input == null || input == "") {
if (input === null || input === "") {
return "App description is required";
} else {
return true;
Expand Down Expand Up @@ -118,7 +118,7 @@ module.exports = generators.Base.extend({
if(process.env.OMRS_OWA_BASE_URL) {
return process.env.OMRS_OWA_BASE_URL.endsWith(path.sep) ? process.env.OMRS_OWA_BASE_URL + suffix : process.env.OMRS_OWA_BASE_URL + path.sep + suffix;
} else {
if(answers.deployType == 'standalone') {
if(answers.deployType === 'standalone') {
return 'http:https://localhost:8081/openmrs-standalone/' + suffix;
} else {
return 'http:https://localhost:8080/openmrs/' + suffix;
Expand Down Expand Up @@ -167,11 +167,13 @@ module.exports = generators.Base.extend({
},

writing: {
gulpfile: function() {
webpack: function() {
this.fs.copyTpl(
this.templatePath('gulpfile.js'),
this.destinationPath('gulpfile.js'),
this.templatePath('webpack.config.js'),
this.destinationPath('webpack.config.js'),
{
includeJQuery: this.includeJQuery,
includeAngular: this.includeAngular,
date: (new Date).toISOString().split('T')[0],
name: this.pkg.name,
version: this.pkg.version,
Expand Down Expand Up @@ -200,48 +202,16 @@ module.exports = generators.Base.extend({
this.templatePath('_package.json'),
this.destinationPath('package.json'),
{
appId: 'openmrs-owa-' + this.appName.toLowerCase().replace(/\s+/g, ""),
includeJQuery: this.includeJQuery,
includeAngular: this.includeAngular,
appId: this.appName.toLowerCase().replace(/\s+/g, ""),
appDesc: this.appDesc,
devName: this.devName,
githubRepo: this.githubRep
}
);
},

bower: function() {
var bowerJson = {
name: this.appName.toLowerCase().replace(/\s+/g, ""),
authors: [],
description: this.appDesc,
license: "MPL-2.0",
private: true,
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
dependencies: {}
};

bowerJson.authors.push(this.devName);

if (this.includeJQuery) {
bowerJson.dependencies['jquery'] = '~2.2.0';
}

if (this.includeAngular) {
bowerJson.dependencies['angular'] = '~1.4.9';
}

this.fs.writeJSON('bower.json', bowerJson);
this.fs.copy(
this.templatePath('bowerrc'),
this.destinationPath('.bowerrc')
);
},

git: function() {
this.fs.copyTpl(
this.templatePath('gitignore'),
Expand Down Expand Up @@ -280,11 +250,11 @@ module.exports = generators.Base.extend({

images: function() {
this.fs.copy(
this.templatePath('omrs-button.png'),
this.templatePath('img/omrs-button.png'),
this.destinationPath('app/img/omrs-button.png')
);
this.fs.copy(
this.templatePath('openmrs-with-title-small.png'),
this.templatePath('img/openmrs-with-title-small.png'),
this.destinationPath('app/img/openmrs-with-title-small.png')
);
},
Expand Down Expand Up @@ -312,7 +282,8 @@ module.exports = generators.Base.extend({

install: function() {
this.installDependencies({
skipInstall: this.options['skip-install']
skipInstall: this.options['skip-install'],
bower: false
});
},
});
53 changes: 29 additions & 24 deletions app/templates/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,24 +13,18 @@ For further documentation about OpenMRS Open Web Apps see

### Production Build

You will need NodeJS 4+ installed to do this. See the install instructions
[here](https://nodejs.org/en/download/package-manager/).
You will need NodeJS 4+ installed to do this. See the install instructions [here](https://nodejs.org/en/download/package-manager/).

Once you have NodeJS installed, you need to install Gulp and Bower (first time
only) as follows:
````
npm install -g gulp bower
````
Once you have NodeJS installed, install the dependencies (first time only):

Install the dependencies (first time only):

```
npm install && bower install
```sh
npm install
```
Build the distributable using [Gulp](http:https://gulpjs.com/) as follows:

````
gulp
Build the distributable using [Webpack](https://webpack.github.io/) as follows:

````sh
npm run build:prod
````

This will create a file called `<%= appId %>.zip` file in the `dist` directory,
Expand All @@ -41,7 +35,7 @@ which can be uploaded to the OpenMRS Open Web Apps module.
To deploy directly to your local Open Web Apps directory, run:

````
gulp deploy-local
npm run build:deploy
````

This will build and deploy the app to the `<%= localDeployDirectory %>`
Expand Down Expand Up @@ -70,25 +64,36 @@ will need the `APP_ENTRY_POINT` entry in your `config.json` file:
Run Browsersync as follows:

```
gulp watch
npm run watch
```

### Extending

Install [Bower](http:https://bower.io/) packages dependencies as follows:
Install [npm](http:https://npmjs.com/) packages dependencies as follows:

````
bower install --save <package>
````sh
npm install --save <package>
````

Be sure to include the following in your `html` files at the position you want
the Bower dependencies injected:
To use the installed package, import it as follows:

````js
//import and assign to variable
import variableName from 'package';
Copy link
Owner

@psbrandt psbrandt Apr 28, 2016 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See my comments above about these few lines ↑

````
<!-- bower:js -->
<!-- endbower -->

To contain package in vendor bundle, remember to add it to vendor entry point array, eg.:

````js
entry: {
app : `${__dirname}/app/js/owa.js`,
css: `${__dirname}/app/css/owa.css`,
vendor : [
'package',
...//other packages in vendor bundle
]
},
````
Do the same for your Bower stylesheet dependencies, but replace `js` with `css`.

Any files that you add manually must be added in the `app` directory.

Expand Down
38 changes: 29 additions & 9 deletions app/templates/_package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,40 @@
"type": "git",
"url": "<%= githubRepo %>"
},
"dependencies": {},
"dependencies": {
<% if(includeJQuery === true) { %> "jquery": "^2.2.0" <% } %>
<% if(includeAngular === true) { %> "angular": "^1.5.3" <% } %>
},
"devDependencies": {
"babel-core": "^6.2.1",
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.1.18",
"browser-sync": "^2.11.1",
"browser-sync-webpack-plugin": "^1.0.1",
"copy-webpack-plugin": "^1.1.1",
"css-loader": "^0.23.1",
"del": "^2.2.0",
"gulp": "^3.9.0",
"gulp-load-plugins": "^1.2.0",
"gulp-util": "^3.0.7",
"gulp-watch": "^4.3.5",
"gulp-zip": "^3.0.2",
"main-bower-files": "^2.11.1",
"wiredep": "^3.0.0"
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.8.5",
"html-loader": "^0.4.3",
"html-webpack-plugin": "^2.7.1",
"raw-loader": "^0.5.1",
"rimraf": "^2.5.2",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^1.12.13",
"yargs": "^4.3.1",
"archiver": "^1.0.0",
"on-build-webpack": "^0.1.0"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
"clean": "rimraf dist && rimraf coverage*",
"build": "npm run clean && webpack --progress --colors --mode=production --target=web",
"build:dev": "npm run clean && webpack --progress --colors --mode=dev --target=web",
"build:prod": "npm run test && npm run build",
"build:deploy": "webpack --progress --colors --mode=deploy --target=web",
"watch": "webpack --progress --colors --watch --mode=deploy --target=web",
"test": "echo \"Error: no test specified\""
},
"keywords": [
"OpenMRS",
Expand Down
3 changes: 0 additions & 3 deletions app/templates/bowerrc
View file
Open in desktop

This file was deleted.

Loading