From 82c1231b6c960d3a8fc158dbbcdfe57e0a2f2e41 Mon Sep 17 00:00:00 2001 From: darshankumar89 Date: Fri, 22 Apr 2016 13:46:46 +0530 Subject: [PATCH] React app folder structure for issue #50 --- app/index.js | 56 +++++++-- app/templates/_typeReactApp/_README.md | 135 ++++++++++++++++++++++ app/templates/_typeReactApp/_bower.json | 19 +++ app/templates/_typeReactApp/_index.html | 33 ++++++ app/templates/_typeReactApp/_package.json | 66 +++++++++++ 5 files changed, 300 insertions(+), 9 deletions(-) create mode 100644 app/templates/_typeReactApp/_README.md create mode 100644 app/templates/_typeReactApp/_bower.json create mode 100644 app/templates/_typeReactApp/_index.html create mode 100644 app/templates/_typeReactApp/_package.json diff --git a/app/index.js b/app/index.js index 6acca92..340f5d7 100644 --- a/app/index.js +++ b/app/index.js @@ -71,7 +71,7 @@ smacssGenerator.prototype.welcome = function welcome() { this.log( chalk.magenta("Your'e using the Perfectionist generator for Frontend\n") + chalk.yellow('┌──────────────────────────────────────────────────────────────┐ \n' + - '| Answer simple questions to kick start your project | \n' + + '| Answer simple questions to kick start your project adsad | \n' + '└──────────────────────────────────────────────────────────────┘ ') ); } @@ -101,6 +101,10 @@ smacssGenerator.prototype.askAppType = function askAppType() { name: 'Angular App', value: 'typeAngularApp', checked: false + },{ + name: 'React App', + value: 'typeReactApp', + checked: false },{ name: 'Restify App', value: 'typeRestifyApp', @@ -250,7 +254,33 @@ smacssGenerator.prototype.scaffoldFolders = function scaffoldFolders() { } this.mkdir(this.appName + '/build'); } + + } + + if (this.appType === 'typeReactApp') { + this.mkdir(this.appName + '/components'); + this.mkdir(this.appName + '/containers'); + this.mkdir(this.appName + '/actions'); + + + } else { + + // Common Scaffolding for all projets + this.mkdir(this.appName + '/app'); + this.mkdir(this.appName + '/app/css'); + this.mkdir(this.appName + '/app/scss'); + this.mkdir(this.appName + '/app/js'); + this.mkdir(this.appName + '/app/images'); + this.mkdir(this.appName + '/app/fonts'); + + if(this.appType === 'typeFullPackWebApp' || this.appType === 'typeAngularApp' || this.appType === 'typeReactApp') { + if(this.appType !== 'typeAdminWebApp' || this.appType !== 'typeReactApp') { + this.mkdir(this.appName + '/app/partials'); + } + this.mkdir(this.appName + '/build'); } + + } }; // Copying - HTML files @@ -292,7 +322,7 @@ smacssGenerator.prototype.copyCSSFiles = function copyCSSFiles() { // SMACSS - SCSS Structure // TODO: Update structure based on ticket #7 - if(this.appType !== "typeAdminWebApp") { + if(this.appType !== "typeAdminWebApp" ) { this.copy("scss/_master.scss", this.appName + "/app/scss/master.scss"); this.copy("scss/_base.scss", this.appName + "/app/scss/base.scss"); this.copy("scss/_layout.scss", this.appName + "/app/scss/layout.scss"); @@ -303,7 +333,7 @@ smacssGenerator.prototype.copyCSSFiles = function copyCSSFiles() { this.copy("scss/_page_landing.scss", this.appName + "/app/scss/pages/page-landing.scss"); } - if(this.appType === "typeAdminWebApp") { + if(this.appType === "typeAdminWebApp" ) { this.copy("_" + this.appType + "/scss/_master.scss", this.appName + "/app/scss/master.scss"); this.copy("_" + this.appType + "/scss/_admin.scss", this.appName + "/app/scss/admin.scss"); this.copy("_" + this.appType + "/scss/_bootstrap.scss", this.appName + "/app/scss/bootstrap.scss"); @@ -315,7 +345,7 @@ smacssGenerator.prototype.copyCSSFiles = function copyCSSFiles() { // TODO: Replace with bower font-awesome plugin // Copy - Fonts for Admin Web App smacssGenerator.prototype.copyFonts = function copyFonts() { - if(this.appType === "typeAdminWebApp") { + if(this.appType === "typeAdminWebApp" ) { this.copy("_" + this.appType + "/fonts/_fontawesome-webfont.eot", this.appName + "/app/fonts/fontawesome-webfont.eot"); this.copy("_" + this.appType + "/fonts/_fontawesome-webfont.svg", this.appName + "/app/fonts/fontawesome-webfont.svg"); this.copy("_" + this.appType + "/fonts/_fontawesome-webfont.ttf", this.appName + "/app/fonts/fontawesome-webfont.ttf"); @@ -337,15 +367,20 @@ smacssGenerator.prototype.copyJSFiles = function copyJSFiles() { else { this.copy("js/_application.js", this.appName + "/app/js/application.js"); } + + //if (this.appType === 'typeReactApp') { + // this.template("_typeReactApp/_app.js", this.appName + "/app.js", smacssGenerator.context ); + //} + }; // Copy - Gulp Task Files smacssGenerator.prototype.copyTasksFile = function copyTasksFile() { - if (this.appType === 'typeSimpleWebApp') { + if (this.appType === 'typeSimpleWebApp' || this.appType === 'typeReactApp') { this.copy("tasks/simpleWebApp/_simple_browser_sync.js", this.appName + "/tasks/browser-sync.js"); this.copy("tasks/simpleWebApp/_simple_sass.js", this.appName + "/tasks/sass.js"); } - else if(this.appType === 'typeFullPackWebApp' || this.appType === 'typeAngularApp' || this.appType === "typeAdminWebApp") { + else if(this.appType === 'typeFullPackWebApp' || this.appType === 'typeAngularApp' || this.appType === "typeAdminWebApp" || this.appType === 'typeReactApp') { this.copy("tasks/_bower.js", this.appName + "/tasks/bower.js"); this.copy("tasks/_browser_sync.js", this.appName + "/tasks/browser-sync.js"); this.copy("tasks/_clean.js", this.appName + "/tasks/clean.js"); @@ -372,7 +407,7 @@ smacssGenerator.prototype.copyDependencyFiles = function copyDependencyFiles() { return false; } - if(this.appType === 'typeFullPackWebApp' || this.appType === 'typeAngularApp' || this.appType === "typeAdminWebApp") { + if(this.appType === 'typeFullPackWebApp' || this.appType === 'typeAngularApp' || this.appType === "typeAdminWebApp" || this.appType === 'typeReactApp') { this.template("common/_gulpfile.js", this.appName + "/gulpfile.js", smacssGenerator.context); } else { @@ -399,6 +434,9 @@ smacssGenerator.prototype.copyProjectfiles = function copyProjectfiles() { else if (this.appType === 'typeRestifyApp') { return false; } + else if (this.appType === 'typeReactApp') { + this.template("_typeReactApp/_README.md", this.appName + "/README.md", smacssGenerator.context); + } this.copy("common/_editorconfig", this.appName + "/.editorconfig"); this.copy("common/_robots.txt", this.appName + "/robots.txt"); @@ -413,7 +451,7 @@ smacssGenerator.prototype.copyProjectfiles = function copyProjectfiles() { // Bower Dependency Injection smacssGenerator.prototype.injectDependencies = function injectDependencies() { // Bower is supported only in full & angular app types - if(this.appType === 'typeFullPackWebApp' || this.appType === 'typeAngularApp' || this.appType === "typeAdminWebApp") { + if(this.appType === 'typeFullPackWebApp' || this.appType === 'typeAngularApp' || this.appType === "typeAdminWebApp" || this.appType !== 'typeReactApp') { var bower = { name: this.appName, private: true, @@ -433,7 +471,7 @@ smacssGenerator.prototype.install = function install() { process.chdir(installContext.appPath); // activating app directory for installation // Assign context based on app types - if(this.appType === 'typeSimpleWebApp' || this.appType === 'typeRestifyApp') { + if(this.appType === 'typeSimpleWebApp' || this.appType === 'typeRestifyApp' || this.appType === 'typeReactApp') { installContext.helpCommand = 'npm install'; installContext.includeNpm = true; installContext.includeBower = false; diff --git a/app/templates/_typeReactApp/_README.md b/app/templates/_typeReactApp/_README.md new file mode 100644 index 0000000..0115b1e --- /dev/null +++ b/app/templates/_typeReactApp/_README.md @@ -0,0 +1,135 @@ +# <%= site_name %> + +**Project Setup** + +## Installation + +*You need to have [NodeJS](http://nodejs.org/)* + +*Type below commands in terminal* + +``````` +npm install -g yo + +npm install -g gulp + +npm install -g bower +``````` + +### Install [smacss generator](https://github.com/FuelFrontend/generator-smacss) + +*Type below commands in terminal* + +``````` +npm install -g generator-smacss +``````` + +**Clone the repo & cd into it** + + +``````` +sudo npm install + +bower install +``````` + +**Finally** + +*Type below command in terminal* + +``````` +gulp +``````` + +**Application Directory Structure** + + +```````` +├── app +│ ├── bower_components +│ ├── images +│ ├── js +│ │ └── lib +│ │ │ └── third-party-files.js +│ │ └── controllers +│ │ └── directives +│ │ └── services +│ │ └── filters +│ │ └── application.js +│ ├── css +│ │ └── master.css +│ ├── partials +│ │ └── header.html +│ │ └── footer.html +│ ├── scss +│ │ └── modules +│ │ │ └── module-name.scss +│ │ └── pages +│ │ │ └── page-landing.scss +│ │ └── base.scss +│ │ └── layout.css +│ │ └── mixins.css +│ │ └── reset.css +│ │ └── variables.css +│ └── index.html +├── build +│ └── build-files +├── zip +│ └── compressed-files +├── node_modules +├── package.json +├── gulpfile.js +├── bower.json +├── .bowerrc +├── .gitattributes +└── .gitignore +```````` + +**Quick Commands** + + +* **Clean** _Remove all files from your build folder_ + + ``````` + gulp clean + ``````` + +* **Zip** _Compress you app & save in `zip` folder with timestamp for quick sharing_ + + ``````` + gulp zip + ``````` + +* **Controller** _Creates a controller in `app/js/controllers`_ + + ``````` + yo smacss:controller + ``````` + +* **Service** _Creates a service in `app/js/services`_ + + ``````` + yo smacss:service + ``````` + +* **Directive** _Creates a directive in `app/js/directives`_ + + ``````` + yo smacss:directive + ``````` + +* **Filter** _Creates a filter in `app/js/filters`_ + + ``````` + yo smacss:filter + ``````` + +# Environment + +Generator Smacss comes with development and producution modes. In default it runs in development mode. + +You can switch to production mode using the following command + +``````` +gulp prod +``````` diff --git a/app/templates/_typeReactApp/_bower.json b/app/templates/_typeReactApp/_bower.json new file mode 100644 index 0000000..46af7e6 --- /dev/null +++ b/app/templates/_typeReactApp/_bower.json @@ -0,0 +1,19 @@ +{ + "name": "<%= appName %>", + "version": "0.0.1", + "dependencies": { + "angular": "1.2.6"<% if (includeResourceModule) { %>, + "angular-resource": "1.2.6"<% } if (includeSanitizeModule) { %>, + "angular-sanitize": "1.2.6"<% } if (includeRouteModule) { %>, + "angular-route": "1.2.6"<% } if (includeAnimateModule) { %>, + "angular-animate": "1.2.6"<% } if (includeQuery) { %>, + "jquery": "*"<% } if (includeModernizr) { %>, + "modernizr": "*" <% } %> + }, + "devDependencies": { + + }, + "overrides": { + + } +} diff --git a/app/templates/_typeReactApp/_index.html b/app/templates/_typeReactApp/_index.html new file mode 100644 index 0000000..01f8e05 --- /dev/null +++ b/app/templates/_typeReactApp/_index.html @@ -0,0 +1,33 @@ + + + + + + <%= site_name %> + + + + + + + + + @@include('./partials/_header.html') + + +
+

Sample angular page, Your good name please?

+

+ + Welcome {{ name }}, You look great today! +

+
+ + @@include('./partials/_footer.html') + + + + + + + diff --git a/app/templates/_typeReactApp/_package.json b/app/templates/_typeReactApp/_package.json new file mode 100644 index 0000000..5398c45 --- /dev/null +++ b/app/templates/_typeReactApp/_package.json @@ -0,0 +1,66 @@ +{ + "name": "<%= site_name %>", + "version": "0.0.1", + "description": "Application description goes here", + "licenses": "enter your license type here", + "repository": "your repository url goes here", + "devDependencies": { + "gulp": "~3.9.0", + "gulp-if": "~1.2.5", + "gulp-sass": "~2.1.1", + "gulp-concat": "~2.4.3", + "gulp-file-include": "~0.8.0", + "gulp-autoprefixer": "^2.3.1", + "gulp-load-plugins": "~0.8.0", + "gulp-changed": "^0.4.1", + "gulp-filter": "^1.0.0", + "gulp-ignore": "^1.2.0", + "gulp-imagemin": "^0.6.2", + "gulp-jshint": "^1.8.4", + "gulp-minify-html": "^0.1.4", + "gulp-minify-css": "^0.3.7", + "gulp-rename": "^1.2.0", + "gulp-size": "^1.0.0", + "gulp-task-listing": "*", + "gulp-uglify": "^0.3.1", + "gulp-zip": "^0.3.4", + "gulp-webserver": "^0.6.0", + "gulp-filter": "^2.0.2", + "gulp-sourcemaps": "^1.5.0", + "del": "~1.1.1", + "open": "~0.0.5", + "chalk": "~0.5.1", + "main-bower-files": "~2.5.0", + "browser-sync": "~1.9.1", + "run-sequence": "~1.0.2", + "jshint-stylish": "~1.0.0", + "bower": "~1.4.1", + "underscore": "~1.8.3", + "underscore.string": "3.0.3", + "require-dir": "0.3.0", + "portscanner": "^1.0.0", + "react": "~0.10.0", + "react-router-component" : "~0.18.3", + "reactify": "~0.13.1", + "babel-core": "^6.3.15", + "babel-eslint": "^4.1.6", + "babel-loader": "^6.2.0", + "babel-plugin-react-transform": "^2.0.0-beta1", + "babel-plugin-transform-object-rest-spread": "^6.3.13", + "babel-plugin-transform-runtime": "^6.3.13", + "babel-polyfill": "^6.3.14", + "babel-preset-es2015": "^6.3.13", + "babel-preset-react": "^6.3.13", + "babel-runtime": "^6.3.13", + "react-hot-loader": "^1.3.0", + "react-transform-hmr": "^1.0.1", + "redux-devtools": "^3.0.1", + "redux": "^3.0.5", + "redux-logger": "^2.3.1", + "redux-thunk": "^1.0.3", + "es6-promise": "^3.0.2" + }, + "engines": { + "node": ">=0.10.0" + } +}