An additional goal was to create a framework that is agnostic to any particular front-end strategy(s), and make it easy for developers to customize and plug in their open source platform(s) of choice.<\/p>\n
<\/h2>\nGithub Code Repo<\/h2>\n
https:\/\/github.com\/erikschlegel\/sails-generate-reactjs<\/a><\/p>\n Sails has a concept called \u201cgenerators\u201d, which allow developers to extend and create a templated solution to fit their needs. This project\u2019s custom generator uses ReactJS as the toolset to create front-end components; also plugged in are other battle-tested open source products to cover testing, web asset management and continuous integration.<\/p>\n This project solves the need for developers to have a consistent working environment. The framework offers a powerful starting point that is easily extensible, and enables developers to reconfigure the project generator to plug in the tech stack they choose. This repo also comes packaged with Bootstrap 3 and LESS for CSS pre-processing, so you have the option available for a responsive and user-friendly front-end layout template to start with. Some noteworthy Bootstrap 3 sites are showcased in the Bootstrap Expo<\/a>.<\/p>\n This repo supports test driven development practices, which encourages simple design and inspires confidence and reliability. The TDD cycle entails an iterative process of first writing unit tests that validate user features, then writing production code that\u2019s continuously being validated (against unit tests<\/em>); real-time testing results are provided throughout development. Test-driven development offers more than just simple validation, but can also drive the design of a service and\/or program and makes refactoring a whole lot easier. By focusing on unit tests first, developers must think up front about how users will use their program. This also helps avoid conflicts where one developer\u2019s local change(s) breaks another developer\u2019s build. Mocha, Protractor, Istanbul and PhantomJS are bundled with this project as the test harness.<\/p>\n Because the framework uses Travis CI for build management, all unit tests are executed for each GIT commit and the team can be notified of any failed builds via Slack or email. We will also took a look at Deis as an exploration exercise to identify opportunities to take continuous integration one step further.<\/p>\n Potential future extensions using Microsoft Kudu to synchronize an Azure web site with a successful Travis CI build.<\/p>\n The steps to use this framework on your local environment are listed below.<\/p>\n Note<\/strong>: for Linux or Ubuntu environments, you\u2019ll need to run all the commands below with sudo (i.e. sudo npm install vs npm install<\/em>).<\/p>\n On the command line<\/strong><\/p>\n 3.This command will create your Sails Site<\/p>\n You should see this message coming back from Sails to confirm that your site is ready for use.<\/p>\n You can access your new site by accessing it at Sails is delivered with a baseline site generator, and a standard set of GRUNT tasks for building and packaging the assets of your web site. This framework is an extension of that baseline, and provides a bower template and NPM package template file that can be overridden by the developer.<\/p>\n Asset Packages<\/p>\n Bower template file \u2013 templates\/bower.ejs<\/strong><\/p>\n The default provided bower file includes dependencies for fontawesome and bootstrap, which will be installed when you run Sails new.<\/p>\n Node Package Dependencies<\/p>\n Node Package.json template \u2013 templates\/package.json<\/strong><\/p>\n These are the default node packages installed with your app, and can be overridden by the developer. The baseline comes included with grunt modules necessary for build management tasks, testing(mocha<\/em>) and code quality checks_(ESLint_).<\/p>\n Continuous Integration<\/p>\n Travis configuration template – .travis.yml<\/strong><\/p>\nOverview of the solution<\/h2>\n
Installation<\/h2>\n
\n
{<\/span>\r\n \"generators\"<\/span> :<\/span> {<\/span>\r\n \"modules\"<\/span> :<\/span> {<\/span>\r\n \"frontend\"<\/span> :<\/span> \"sails-generate-reactjs\"<\/span>\r\n }<\/span>\r\n }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n<\/div>\n<\/li>\n<\/ul>\n\n
$ (Windows) npm install -g sails\r\n$ (Windows) npm install -g sails-generate-reactjs\r\n$ (Linux) sudo npm install -g sails\r\n$ (Linux) sudo npm install -g sails-generate-reactjs\r\n<\/code><\/pre>\n<\/div>\n$ (Windows) sails new <%-newAppName> --force\r\n$ (Linux) sudo sails new <%-newAppName> --force\r\n<\/code><\/pre>\n<\/div>\n\n
$ cd <%-newAppName>\r\n$ (Windows) npm install\r\n$ (Linux) sudo npm install\r\n<\/code><\/pre>\n<\/div>\n\n
$ sails lift<\/code><\/p>\n![\"Figure](\"https:\/\/devblogs.microsoft.com\/cse\/wp-content\/uploads\/sites\/55\/2020\/03\/2015-07-21-Building-an-enterprise-web-app-with-continuous-azure-integration_images-image001.jpg\")
<\/p>\nhttp:\/\/localhost:1337<\/code>.<\/p>\nImplementation<\/h2>\n
{<\/span>\r\n \"name\"<\/span>:<\/span> \"<%= appName %>\"<\/span>,<\/span>\r\n \"version\"<\/span>:<\/span> \"0.0.0\"<\/span>,<\/span>\r\n \"authors\"<\/span>:<\/span> [<\/span>\r\n \"<%= author %>\"<\/span>\r\n ],<\/span>\r\n \"moduleType\"<\/span>:<\/span> [<\/span>\r\n \"globals\"<\/span>\r\n ],<\/span>\r\n \"license\"<\/span>:<\/span> \"MIT\"<\/span>,<\/span>\r\n \"dependencies\"<\/span>:<\/span> {<\/span>\r\n \"bootstrap\"<\/span>:<\/span> \"~3.3.4\"<\/span>,<\/span>\r\n \"fontawesome\"<\/span>:<\/span> \"~4.3.0\"<\/span>,<\/span>\r\n \"sails.io.js\"<\/span> :<\/span> \"*\"<\/span>\r\n }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n<\/div>\n \"dependencies\": {\r\n \"sails\": \"~0.11.0\",\r\n \"sails-disk\": \"~0.10.0\",\r\n \"rc\": \"^0.5.5\",\r\n \"include-all\": \"~0.1.3\",\r\n \"ejs\": \"~0.8.4\",\r\n \"grunt\": \"^0.4.2\",\r\n \"grunt-sync\": \"0.0.8\",\r\n \"grunt-contrib-copy\": \"^0.5.0\",\r\n \"grunt-contrib-clean\": \"^0.5.0\",\r\n \"grunt-contrib-concat\": \"^0.3.0\",\r\n \"grunt-sails-linker\": \"^0.9.6\",\r\n \"grunt-contrib-jst\": \"*\",\r\n \"grunt-contrib-watch\": \"^0.5.3\",\r\n \"grunt-contrib-uglify\": \"^0.4.1\",\r\n \"lodash\" : \"*\",\r\n \"grunt-contrib-cssmin\": \"^0.9.0\",\r\n \"grunt-contrib-less\": \"^0.11.1\",\r\n \"react\": \"^0.13.3\",\r\n \"react-bootstrap\": \"^0.20.3\",\r\n \"grunt-babel\": \"^5.0.0\",\r\n \"grunt-browserify\": \"^3.8.0\",\r\n \"grunt-react\": \"^0.12.2\",\r\n \"grunt-shell\": \"^1.1.2\",\r\n \"grunt-contrib-coffee\": \"^0.10.1\"\r\n },\r\n \"scripts\": {\r\n \"start\": \"node app.js\",\r\n \"debug\": \"node debug app.js\",\r\n \"test\": \"mocha -b\"\r\n },\r\n<\/code><\/pre>\n<\/div>\nlanguage: node_js\r\nnode_js:\r\n - \"0.12\"\r\nsudo: false\r\n\r\nbefore_install:\r\n - \"export DISPLAY=:99.0\"\r\n - \"npm install -g sails\"\r\n - \"npm install -g sails-generate-reactjs\"\r\n - \"sleep 10\" # give server time to start\r\n - \"npm install -g grunt\"\r\n - \"sails new travisSite --force\"\r\n\r\ninstall:\r\n - \"cd travisSite\"\r\n - \"npm install\"\r\n\r\nscript:\r\n - \"sails lift\"\r\n\r\nbranches:\r\n only:\r\n - master\r\nmatrix:\r\n fast_finish: true\r\n<\/code><\/pre>\n<\/div>\n\n