move frontend code into a folder, and setup react build tooling with es6 transforms (#576)

This commit is contained in:
Devin Howard 2016-08-01 02:51:06 +08:00 committed by Connor Turland
parent 7d4da81272
commit 5fe03641cb
10 changed files with 95 additions and 13 deletions

2
.gitignore vendored
View file

@ -9,6 +9,8 @@ public/assets
public/metamaps_mobile public/metamaps_mobile
vendor/ vendor/
node_modules node_modules
npm-debug.log
app/assets/javascripts/webpacked
#secrets and config #secrets and config
.env .env

View file

@ -16,6 +16,6 @@ before_script:
- . $HOME/.nvm/nvm.sh - . $HOME/.nvm/nvm.sh
- nvm install stable - nvm install stable
- nvm use stable - nvm use stable
- (cd app/assets/javascripts && npm install) - (cd frontend && npm install)
script: 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

View file

@ -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.

9
frontend/.babelrc Normal file
View file

@ -0,0 +1,9 @@
{
"presets": [
"react",
"es2015"
],
"plugins": [
"transform-class-properties"
]
}

View file

@ -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.

View file

@ -3,6 +3,8 @@
"version": "1.0.0", "version": "1.0.0",
"description": "Metamaps frontend - currently just tests", "description": "Metamaps frontend - currently just tests",
"scripts": { "scripts": {
"build": "webpack",
"build:watch": "webpack --watch",
"test": "mocha test || echo 'Run `npm install` to setup testing'" "test": "mocha test || echo 'Run `npm install` to setup testing'"
}, },
"repository": { "repository": {
@ -16,7 +18,18 @@
}, },
"homepage": "https://github.com/metamaps/metamaps#readme", "homepage": "https://github.com/metamaps/metamaps#readme",
"devDependencies": { "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", "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"
} }
} }

View file

@ -0,0 +1,11 @@
import React, { Component, PropTypes } from 'react'
class ExploreHeader extends Component {
render = () => {
return (
<p>ExploreHeader component could go here</p>
)
}
}
export default ExploreHeader

13
frontend/src/index.js Normal file
View file

@ -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
}

View file

@ -3,7 +3,7 @@ const chai = require('chai')
const expect = chai.expect const expect = chai.expect
const Metamaps = {} const Metamaps = {}
require('../src/Metamaps.Import') require('../../app/assets/javascripts/src/Metamaps.Import')
describe('Metamaps.Import.js', function () { describe('Metamaps.Import.js', function () {
it('has a topic whitelist', function () { it('has a topic whitelist', function () {

View file

@ -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'
}
}