From 5fe03641cb39fc29f381cc2baecad6a100663523 Mon Sep 17 00:00:00 2001 From: Devin Howard Date: Mon, 1 Aug 2016 02:51:06 +0800 Subject: [PATCH] move frontend code into a folder, and setup react build tooling with es6 transforms (#576) --- .gitignore | 2 ++ .travis.yml | 4 ++-- app/assets/javascripts/README-testing-js.md | 9 ------- frontend/.babelrc | 9 +++++++ frontend/README-frontend.md | 19 +++++++++++++++ .../javascripts => frontend}/package.json | 15 +++++++++++- frontend/src/components/ExploreHeader.js | 11 +++++++++ frontend/src/index.js | 13 ++++++++++ .../test/Metamaps.Import.spec.js | 2 +- frontend/webpack.config.js | 24 +++++++++++++++++++ 10 files changed, 95 insertions(+), 13 deletions(-) delete mode 100644 app/assets/javascripts/README-testing-js.md create mode 100644 frontend/.babelrc create mode 100644 frontend/README-frontend.md rename {app/assets/javascripts => frontend}/package.json (57%) create mode 100644 frontend/src/components/ExploreHeader.js create mode 100644 frontend/src/index.js rename {app/assets/javascripts => frontend}/test/Metamaps.Import.spec.js (85%) create mode 100644 frontend/webpack.config.js diff --git a/.gitignore b/.gitignore index 4d02a77f..7f17330b 100644 --- a/.gitignore +++ b/.gitignore @@ -9,6 +9,8 @@ public/assets public/metamaps_mobile vendor/ node_modules +npm-debug.log +app/assets/javascripts/webpacked #secrets and config .env diff --git a/.travis.yml b/.travis.yml index e65b8389..03620177 100644 --- a/.travis.yml +++ b/.travis.yml @@ -16,6 +16,6 @@ before_script: - . $HOME/.nvm/nvm.sh - nvm install stable - nvm use stable - - (cd app/assets/javascripts && npm install) + - (cd frontend && npm install) script: - - bundle exec rspec && (cd app/assets/javascripts && npm test) && bundle exec brakeman -q -z + - bundle exec rspec && (cd frontend && npm test) && bundle exec brakeman -q -z diff --git a/app/assets/javascripts/README-testing-js.md b/app/assets/javascripts/README-testing-js.md deleted file mode 100644 index d83a29e1..00000000 --- a/app/assets/javascripts/README-testing-js.md +++ /dev/null @@ -1,9 +0,0 @@ -Change directories to where this file is, and then run - - npm install - -to set up your testing environment. Then use - - npm test - -to see the results of testing the current javascript files. diff --git a/frontend/.babelrc b/frontend/.babelrc new file mode 100644 index 00000000..2ad52bf1 --- /dev/null +++ b/frontend/.babelrc @@ -0,0 +1,9 @@ +{ + "presets": [ + "react", + "es2015" + ], + "plugins": [ + "transform-class-properties" + ] +} diff --git a/frontend/README-frontend.md b/frontend/README-frontend.md new file mode 100644 index 00000000..a0488cda --- /dev/null +++ b/frontend/README-frontend.md @@ -0,0 +1,19 @@ +To setup javascript dev, `cd frontend` and then run + + npm install + +to set up your testing environment. Then use + + npm test + +to see the results of testing the current javascript files. + +To build the javascript files, run + + npm run build + +If you are actively developing and would like any changes to trigger a rebuild, you can use + + npm run build:watch + +instead. diff --git a/app/assets/javascripts/package.json b/frontend/package.json similarity index 57% rename from app/assets/javascripts/package.json rename to frontend/package.json index a322d7ad..5b874b25 100644 --- a/app/assets/javascripts/package.json +++ b/frontend/package.json @@ -3,6 +3,8 @@ "version": "1.0.0", "description": "Metamaps frontend - currently just tests", "scripts": { + "build": "webpack", + "build:watch": "webpack --watch", "test": "mocha test || echo 'Run `npm install` to setup testing'" }, "repository": { @@ -16,7 +18,18 @@ }, "homepage": "https://github.com/metamaps/metamaps#readme", "devDependencies": { + "babel-cli": "^6.11.4", + "babel-loader": "^6.2.4", + "babel-plugin-transform-class-properties": "^6.11.5", + "babel-preset-es2015": "^6.9.0", + "babel-preset-react": "^6.11.1", "chai": "^3.5.0", - "mocha": "^2.4.5" + "mocha": "^2.4.5", + "path": "^0.12.7", + "webpack": "^1.13.1" + }, + "dependencies": { + "react": "^15.3.0", + "react-dom": "^15.3.0" } } diff --git a/frontend/src/components/ExploreHeader.js b/frontend/src/components/ExploreHeader.js new file mode 100644 index 00000000..a22b6eae --- /dev/null +++ b/frontend/src/components/ExploreHeader.js @@ -0,0 +1,11 @@ +import React, { Component, PropTypes } from 'react' + +class ExploreHeader extends Component { + render = () => { + return ( +

ExploreHeader component could go here

+ ) + } +} + +export default ExploreHeader diff --git a/frontend/src/index.js b/frontend/src/index.js new file mode 100644 index 00000000..4ef6c50f --- /dev/null +++ b/frontend/src/index.js @@ -0,0 +1,13 @@ +import React from 'react' +import ReactDOM from 'react-dom' +import ExploreHeader from './components/ExploreHeader.js' + +// this is optional really, if we import components directly React will be +// in the bundle, so we won't need a global reference +window.React = React +window.ReactDOM = ReactDOM + +window.Metamaps = window.Metamaps || {} +window.Metamaps.ReactComponents = { + ExploreHeader +} diff --git a/app/assets/javascripts/test/Metamaps.Import.spec.js b/frontend/test/Metamaps.Import.spec.js similarity index 85% rename from app/assets/javascripts/test/Metamaps.Import.spec.js rename to frontend/test/Metamaps.Import.spec.js index cf8d6f53..59ab45e6 100644 --- a/app/assets/javascripts/test/Metamaps.Import.spec.js +++ b/frontend/test/Metamaps.Import.spec.js @@ -3,7 +3,7 @@ const chai = require('chai') const expect = chai.expect const Metamaps = {} -require('../src/Metamaps.Import') +require('../../app/assets/javascripts/src/Metamaps.Import') describe('Metamaps.Import.js', function () { it('has a topic whitelist', function () { diff --git a/frontend/webpack.config.js b/frontend/webpack.config.js new file mode 100644 index 00000000..1d0c7a01 --- /dev/null +++ b/frontend/webpack.config.js @@ -0,0 +1,24 @@ +const path = 'path' +const webpack = 'webpack' + +const config = module.exports = { + context: __dirname, + module: { + loaders: [ + { + test: /\.js$/, + exclude: /node_modules/, + loaders: [ + "babel-loader?cacheDirectory" + ] + } + ] + }, + entry: { + 'metamaps.bundle': './src/index.js' + }, + output: { + path: '../app/assets/javascripts/webpacked', + filename: '[name].js' + } +}