Skip to content

Instantly share code, notes, and snippets.

@boriscy
Last active March 19, 2020 19:50
Show Gist options
  • Save boriscy/1e957528585c91b1316a389662af1bd9 to your computer and use it in GitHub Desktop.
Save boriscy/1e957528585c91b1316a389662af1bd9 to your computer and use it in GitHub Desktop.
Phoenix + React + Elm config with webpack

Attemp to make work react with elm on a phoenix project.

The project directory for elm is

web
├── channels
├── controllers
│   └── api
│       └── v1
├── helpers
├── models
├── static
│   ├── css
│   │   ├── components
│   │   ├── globals
│   │   ├── libs
│   │   └── modules
│   ├── elm
│   │   └── elm-stuff
│   ├── js
│   │   ├── actions
│   │   ├── components
│   │   ├── containers
│   │   ├── layouts
│   │   ├── reducers
│   │   └── views
│   └── vendor
│       └── css
├── templates
│   ├── category
│   ├── contact
│   ├── layout
│   ├── ledger
│   ├── organization
│   └── page
└── views
{
"name": "bonsai",
"version": "1.0.0",
"description": "Finance info",
"main": "webpack.config.js",
"directories": {
"test": "test"
},
"scripts": {
"test": "echo \"Error\" && exit 1"
},
"author": "Boris Barroso",
"license": "ISC",
"dependencies": {
"classnames": "^2.2.3",
"es6-promise": "^3.1.2",
"invariant": "^2.2.1",
"isomorphic-fetch": "^2.2.1",
"moment": "^2.12.0",
"phoenix": "file:deps/phoenix",
"phoenix_html": "file:deps/phoenix_html",
"react": "^15.0.1",
"react-addons-css-transition-group": "^0.14.7",
"react-bootstrap": "^0.29.0",
"react-datepicker": "^0.25.0",
"react-dom": "^15.0.1",
"react-page-click": "^2.1.0",
"react-redux": "^4.4.1",
"react-router": "^2.0.1",
"react-router-redux": "^4.0.0",
"redux": "^3.3.1",
"redux-logger": "^2.6.1",
"redux-thunk": "^2.0.1"
},
"devDependencies": {
"babel-core": "^6.7.7",
"babel-loader": "^6.2.4",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.3.13",
"babel-preset-stage-2": "^6.3.13",
"css-loader": "^0.23.1",
"elm": "^0.17.0",
"elm-hot-loader": "^0.3.3",
"elm-webpack-loader": "^3.0.3",
"extract-text-webpack-plugin": "^1.0.1",
"node-libs-browser": "^1.0.0",
"node-sass": "^3.4.2",
"sass-loader": "^3.2.0",
"style-loader": "^0.13.1",
"webpack": "^1.13.0"
}
}
'use strict';
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var webpack = require('webpack');
const elmSource = __dirname + '/web/static/elm';
// helpers for writing path names
// e.g. join("web/static") => "/full/disk/path/to/hello/web/static"
function join(dest) { return path.resolve(__dirname, dest); }
var config = module.exports = {
// our application's entry points - for this example we'll use a single each for
// css and js
entry: {
app: [
'./web/static/css/app.sass',
'./web/static/js/app.js',
'./web/static/elm/App.elm'
],
},
// where webpack should output our files
output: {
path: join('priv/static'),
filename: 'js/app.js',
},
resolve: {
extensions: ['', '.js', '.elm', '.sass'],
modulesDirectories: ['node_modules'],
},
// more information on how our modules are structured, and
//
// in this case, we'll define our loaders for JavaScript and CSS.
// we use regexes to tell Webpack what files require special treatment, and
// what patterns to exclude.
module: {
noParse: /vendor\/phoenix/,
loaders: [
{
test: /\.elm$/,
exclude: /(node_modules|elm-stuff)/,
loader: `elm-webpack?cwd=${elmSource}`
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
cacheDirectory: true,
plugins: ['transform-decorators-legacy'],
presets: ['react', 'es2015', 'stage-2', 'stage-0'],
},
},
{
test: /\.sass$/,
loader: ExtractTextPlugin.extract('style', 'css!sass?indentedSyntax&includePaths[]=' + __dirname + '/node_modules'),
}
],
},
// what plugins we'll be using - in this case, just our ExtractTextPlugin.
// we'll also tell the plugin where the final CSS file should be generated
// (relative to config.output.path)
plugins: [
new ExtractTextPlugin('css/app.css'),
],
};
// if running webpack in production mode, minify files with uglifyjs
if (process.env.NODE_ENV === 'production') {
config.plugins.push(
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin({ minimize: true })
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment