Merge pull request #14 from httpiago/master

Add steal-tools and improvements to the demo
stealjs · Jun 21, 2018 · 030e248 · 030e248
2 parents 221478e + 9a035fd
commit 030e248
Show file tree

Hide file tree

Showing 8 changed files with 66 additions and 19 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,3 @@
 node_modules/
+dist/
+package-lock.json
diff --git a/README.md b/README.md
@@ -2,11 +2,17 @@
 
 1. Clone this repo.
 2. Run `npm install`
-3. Start an `http-server` in the root directory.
-4. Open in your browser.
+3. Start the http-server using `npm run start`.
+4. Open /development.html file in your browser.
 
 You can click on the “Welcome to…” title to see the `onClick` event fire.
 
+## Production version
+
+1. Run `npm run build` in terminal to generate the bundles in "dist" folder.
+2. Start the http-server using `npm run start`.
+3. Open /production.html file in browser.
+
 This example uses [steal-jsx](https://www.npmjs.com/package/steal-jsx).
 
 ![Steal-React Example Screenshot](screenshot.png?raw=true "Simple Steal-React Example App")
diff --git a/development.html b/development.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>StealJS &amp; React Demo</title>
+  </head>
+  <body>  
+    <div id="app"></div>
+    <script src="node_modules/steal/steal.js"></script>
+  </body>
+</html>
diff --git a/index.html b/index.html
diff --git a/index.js b/index.js
@@ -2,10 +2,14 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import Title from './title.jsx';
 
+// Import styles
+import './styles.css';
+
 class HelloMessage extends React.Component {
   render() {
     return (
       <div>
+        <img src="logo.svg" id="logo"/>
         <Title greeting={this.props.greeting} />
         <ul>
           <li>
@@ -29,4 +33,7 @@ class HelloMessage extends React.Component {
   }
 };
 
-ReactDOM.render(<HelloMessage greeting="Welcome to your first StealJS and React app!" />, document.getElementById('app'));
+ReactDOM.render(
+  <HelloMessage greeting="Welcome to your first StealJS and React app!" />,
+  document.getElementById('app')
+);
diff --git a/package.json b/package.json
@@ -4,21 +4,31 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "start": "http-server ./",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "steal-tools --main index"
   },
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "http-server": "^0.11.1",
     "react": "^15.4.1",
     "react-dom": "^15.4.1",
     "steal": "^1.0.10",
     "steal-jsx": "^0.0.2"
   },
+  "devDependencies": {
+    "steal-css": "^1.3.2",
+    "steal-tools": "^1.11.9"
+  },
   "steal": {
     "transpiler": "babel",
     "babelOptions": {
       "blacklist": []
     },
-    "plugins": ["steal-jsx"]
+    "plugins": [
+      "steal-jsx",
+      "steal-css"
+    ]
   }
 }
diff --git a/production.html b/production.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>StealJS &amp; React Demo</title>
+  </head>
+  <body>  
+    <div id="app"></div>
+    <script src="dist/steal.production.js"></script>
+  </body>
+</html>
diff --git a/styles.css b/styles.css
@@ -0,0 +1,12 @@
+body {
+  font-family: sans-serif;
+  text-align: center;
+}
+ul {
+  list-style: none;
+  margin: none;
+}
+img#logo {
+  margin-top: 5%;
+  width: 300px;
+}