From 30c9ba4163e16ebdd187f27a42efa85bc397ff2e Mon Sep 17 00:00:00 2001 From: Thomas Weiser Date: Mon, 7 Nov 2016 19:54:17 +0100 Subject: [PATCH] Use modd and devd instead of npm and webpack Webpack is currently only used for automatically compiling the elm sources and reloading in the browser. The tools modd/devd do the same with much less boilerplate. No need to have the npm machinery. https://github.com/cortesi/modd https://github.com/cortesi/devd Current version v0.6 of devd doesn't support serving SPAs with non-hash-routes. See this related issue: https://github.com/cortesi/devd/issues/38 Since we don't want to use hash-routes, we will not use this modd/devd setup as long as devd doesn't support them. --- .gitignore | 1 - dev_server.js | 42 -------------------------------------- modd.conf | 23 +++++++++++++++++++++ package.json | 24 ---------------------- src/Api.elm | 2 +- src/index.html | 1 + src/index.js | 4 ---- webpack.config.js | 52 ----------------------------------------------- 8 files changed, 25 insertions(+), 124 deletions(-) delete mode 100644 dev_server.js create mode 100644 modd.conf delete mode 100644 package.json delete mode 100644 webpack.config.js diff --git a/.gitignore b/.gitignore index b7f4f3d..a329db2 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,3 @@ .DS_Store elm-stuff -node_modules dist diff --git a/dev_server.js b/dev_server.js deleted file mode 100644 index fe7e37a..0000000 --- a/dev_server.js +++ /dev/null @@ -1,42 +0,0 @@ -var path = require('path'); -var express = require('express'); -var http = require('http'); -var webpack = require('webpack'); -var config = require('./webpack.config'); - -var app = express(); -var compiler = webpack(config); -var host = 'localhost'; -var port = 3000; - -app.use(require('webpack-dev-middleware')(compiler, { - // contentBase: 'src', - noInfo: true, - publicPath: config.output.publicPath, - inline: true, - stats: { colors: true }, -})) - -app.get('/', function(req, res) { - res.sendFile(path.join(__dirname, 'src/index.html')); -}); - -app.get('/*', function(req, res) { - res.sendFile(path.join(__dirname, 'src/index.html')); -}); - -// Server images -app.use(express.static('public')); - -var server = http.createServer(app); - -server.listen(port, function(err) { - if (err) { - console.log(err); - return; - } - - var addr = server.address(); - - console.log('Listening at http://%s:%d', addr.address, addr.port); -}) diff --git a/modd.conf b/modd.conf new file mode 100644 index 0000000..5a3e2c6 --- /dev/null +++ b/modd.conf @@ -0,0 +1,23 @@ + + +# Using `unbuffer` keeps the compiler output colorful. See: +# https://github.com/cortesi/modd/issues/26 + +src/**/*.elm { +# prep: elm make --warn --yes --output dist/app.js src/Main.elm + prep: unbuffer elm make --yes --output dist/app.js src/Main.elm +} + +src/index.html { + prep: cp src/index.html dist/ +} + +src/index.js { + prep: cp src/index.js dist/ +} + +# Do it anyway for simpler configuration +dist/index.html dist/app.js { + daemon: devd -mqo dist/ +} + diff --git a/package.json b/package.json deleted file mode 100644 index cdb603c..0000000 --- a/package.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "name": "elm-client", - "version": "1.0.0", - "description": "", - "main": "webpack.config.js", - "dependencies": { - "css-loader": "^0.25.0", - "elm-webpack-loader": "^3.0.6", - "file-loader": "^0.9.0", - "style-loader": "^0.13.1", - "url-loader": "^0.5.7", - "webpack": "^1.13.2", - "webpack-dev-middleware": "^1.6.1", - "express": "^4.13.4" - }, - "devDependencies": {}, - "scripts": { - "build": "webpack", - "watch": "webpack --watch", - "dev": "node dev_server.js" - }, - "author": "", - "license": "ISC" -} diff --git a/src/Api.elm b/src/Api.elm index 313608c..1a63bfd 100644 --- a/src/Api.elm +++ b/src/Api.elm @@ -73,7 +73,7 @@ getProposalEndpoint id = -- TODO: move client_id and redirect_uri into environment variables facebookAuthUrl : String -facebookAuthUrl = "https://www.facebook.com/dialog/oauth?client_id=1583083701926004&redirect_uri=http://localhost:3000/facebook_redirect" +facebookAuthUrl = "https://www.facebook.com/dialog/oauth?client_id=1583083701926004&redirect_uri=http://localhost:8000/facebook_redirect" diff --git a/src/index.html b/src/index.html index e11001d..acacb0f 100644 --- a/src/index.html +++ b/src/index.html @@ -10,5 +10,6 @@
+ diff --git a/src/index.js b/src/index.js index d6d9db8..0a4c032 100644 --- a/src/index.js +++ b/src/index.js @@ -1,9 +1,5 @@ 'use strict'; -// Require index.html so it gets copied to dist -require('./index.html'); - -var Elm = require('./Main.elm'); var mountNode = document.getElementById('main'); var programFlags = { diff --git a/webpack.config.js b/webpack.config.js deleted file mode 100644 index 48dc1ca..0000000 --- a/webpack.config.js +++ /dev/null @@ -1,52 +0,0 @@ -var path = require("path"); - -module.exports = { - entry: { - app: [ - './src/index.js' - ] - }, - - output: { - path: path.resolve(__dirname + '/dist'), - filename: '[name].js', - }, - - module: { - loaders: [ - { - test: /\.(css|scss)$/, - loaders: [ - 'style-loader', - 'css-loader', - ] - }, - { - test: /\.html$/, - exclude: /node_modules/, - loader: 'file?name=[name].[ext]', - }, - { - test: /\.elm$/, - exclude: [/elm-stuff/, /node_modules/], - loader: 'elm-webpack', - }, - { - test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, - loader: 'url-loader?limit=10000&mimetype=application/font-woff', - }, - { - test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, - loader: 'file-loader', - }, - ], - - noParse: /\.elm$/, - }, - - devServer: { - inline: true, - stats: { colors: true }, - }, - -};