Added webpack, babel and react. Basic client setup

9 years ago · 6b5633dd0b
parent 175b4c1b8e
commit 6b5633dd0b
8 changed files with 67 additions and 3 deletions
--- a/.babelrc
+++ b/.babelrc
@ -0,0 +1,3 @@
+{
+  "presets" : ["es2015", "react"]
+}
--- a/.gitignore
+++ b/.gitignore
@ -35,3 +35,6 @@ jspm_packages

 # Optional REPL history
 .node_repl_history
+
+client/public
+db/matterwiki.sqlite
--- a/client/app/index.jsx
+++ b/client/app/index.jsx
@ -0,0 +1,10 @@
+import React from 'react';
+import {render} from 'react-dom';
+
+class App extends React.Component {
+  render () {
+    return <p> Hello React!</p>;
+  }
+}
+
+render(<App/>, document.getElementById('app'));
--- a/client/index.html
+++ b/client/index.html
@ -0,0 +1,14 @@
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Matterwiki</title>
+  </head>
+  <body>
+    <!--
+    This is the main index file which just imports the
+    compiled react files and holds the app container div.
+    -->
+    <div id="app" />
+    <script src="public/bundle.js" type="text/javascript"></script>
+  </body>
+</html>
--- a/db/matterwiki.sqlite
+++ b/db/matterwiki.sqlite
--- a/index.js
+++ b/index.js
@ -6,10 +6,12 @@ Once we have enough endpoints defined we start breaking them into modules for be
 var express = require('express');
 var app = express();

-app.get('/',function(req,res){
+app.get('/api',function(req,res){
  res.send("Hey! You're looking at the matterwiki API");
 });

+app.use(express.static(__dirname + '/client'));
+
 app.listen(5000 || process.env.PORT, function(){
  console.log("The magic is happening on port 5000");
 });
--- a/package.json
+++ b/package.json
@ -4,7 +4,9 @@
  "description": "a simple and sexy wiki",
  "main": "index.js",
  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "webpack -d --watch",
+    "build" : "webpack -p"
  },
  "bin": {
    "wiki": "./install.js"
@ -20,7 +22,13 @@
  },
  "homepage": "https://github.com/nshntarora/matterwiki#readme",
  "dependencies": {
+    "babel-loader": "^6.2.5",
+    "babel-preset-es2015": "^6.13.2",
+    "babel-preset-react": "^6.11.1",
    "express": "^4.14.0",
-    "sqlite3": "^3.1.4"
+    "react": "^15.3.0",
+    "react-dom": "^15.3.0",
+    "sqlite3": "^3.1.4",
+    "webpack": "^1.13.2"
  }
 }
--- a/webpack.config.js
+++ b/webpack.config.js
@ -0,0 +1,24 @@
+var webpack = require('webpack');
+var path = require('path');
+
+var BUILD_DIR = path.resolve(__dirname, 'client/public');
+var APP_DIR = path.resolve(__dirname, 'client/app');
+
+var config = {
+  entry: APP_DIR + '/index.jsx',
+  output: {
+    path: BUILD_DIR,
+    filename: 'bundle.js'
+  },
+  module : {
+    loaders : [
+      {
+        test : /\.jsx?/,
+        include : APP_DIR,
+        loader : 'babel'
+      }
+    ]
+  }
+};
+
+module.exports = config;