├── public ├── test.txt └── css │ └── style.css ├── .gitignore ├── routes ├── package.json ├── getRoutes.client.jsx ├── getRoutes.server.jsx ├── routes.jsx └── apiRoutes.jsx ├── .babelrc ├── client ├── jsx │ └── client.jsx └── scss │ └── style.scss ├── layouts ├── AboutLayout.jsx ├── components │ └── Navigation.jsx ├── IndexLayout.jsx └── WrapperLayouts.jsx ├── gulpfile.js ├── README.md ├── package.json ├── server.jsx ├── webpack.config.js └── LICENSE /public/test.txt: -------------------------------------------------------------------------------- 1 | Some awesome text -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | 3 | *.map 4 | 5 | *.log -------------------------------------------------------------------------------- /routes/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "index.jsx" 3 | } -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | presets: [ "es2015", "react", "stage-0" ] 3 | } -------------------------------------------------------------------------------- /routes/getRoutes.client.jsx: -------------------------------------------------------------------------------- 1 | 2 | import { HistoryAPI } from 'plasmajs/router'; 3 | 4 | import getRoutes from './routes.jsx'; 5 | 6 | export default props => getRoutes(new HistoryAPI()); 7 | -------------------------------------------------------------------------------- /public/css/style.css: -------------------------------------------------------------------------------- 1 | ul li,ul li a{display:inline-block}:root{font-size:16px;color:#333}body,html{margin:0;padding:0}*{box-sizing:border-box}::after,::before{content:''}ul{padding:1em;text-align:center}ul li a{padding:.5em 1em;text-decoration:none} -------------------------------------------------------------------------------- /client/jsx/client.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {render} from 'react-dom'; 3 | 4 | import AllRoutes from '../../routes/getRoutes.client.jsx'; 5 | 6 | render( 7 | , 8 | document.getElementById('mainApp') 9 | ); 10 | 11 | -------------------------------------------------------------------------------- /routes/getRoutes.server.jsx: -------------------------------------------------------------------------------- 1 | 2 | import { NodeHistoryAPI } from 'plasmajs'; 3 | 4 | import getRoutes from './routes.jsx'; 5 | import { BodyLayout } from '../layouts/WrapperLayouts.jsx'; 6 | 7 | export default 8 | props => 9 | getRoutes( 10 | new NodeHistoryAPI( 11 | props.request, 12 | props.response 13 | ), 14 | BodyLayout 15 | ); 16 | -------------------------------------------------------------------------------- /layouts/AboutLayout.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import Navigation from './components/Navigation.jsx'; 4 | 5 | export default class AboutLayout extends React.Component { 6 | 7 | render() { 8 | 9 | return ( 10 |
11 | 12 |

This is the about page. Cool af, right?

13 | 14 | 15 |
16 | ); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /layouts/components/Navigation.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link } from 'plasmajs/router'; 3 | 4 | export default class Navigation extends React.Component { 5 | 6 | render() { 7 | 8 | return ( 9 | 22 | ); 23 | } 24 | } -------------------------------------------------------------------------------- /client/scss/style.scss: -------------------------------------------------------------------------------- 1 | 2 | :root { 3 | font-size: 16px; 4 | color: #333; 5 | } 6 | 7 | html, body { 8 | margin: 0; 9 | padding: 0; 10 | } 11 | 12 | * { 13 | box-sizing: border-box; 14 | 15 | &::after, &::before { 16 | content: ''; 17 | } 18 | } 19 | 20 | ul { 21 | padding: 1em; 22 | text-align: center; 23 | 24 | li { 25 | display: inline-block; 26 | 27 | a { 28 | display: inline-block; 29 | padding: .5em 1em; 30 | text-decoration: none; 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /routes/routes.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Route, Router } from 'plasmajs/router'; 3 | 4 | import IndexLayout from '../layouts/IndexLayout.jsx'; 5 | import AboutLayout from '../layouts/AboutLayout.jsx'; 6 | 7 | export default (history, wrapper=null)=> ( 8 | 9 | 10 | 11 | 12 | 13 | 14 |
Error
} /> 15 | 16 |
17 | ); 18 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | const gulp= require('gulp'); 2 | const autoprefixer= require('gulp-autoprefixer'); 3 | const sass= require('gulp-sass'); 4 | const minify= require('gulp-minify-css'); 5 | 6 | const BUILD_DIR= "./public/css"; 7 | const APP_DIR= "./client/scss"; 8 | 9 | function compileSASS() { 10 | return gulp.src(`${APP_DIR}/*.scss`) 11 | .pipe(sass()) 12 | .pipe(autoprefixer()) 13 | .pipe(minify()) 14 | .pipe(gulp.dest(BUILD_DIR)); 15 | } 16 | 17 | function watchSASS() { 18 | gulp.watch(`${APP_DIR}/**/*.scss`, ['buildSASS']); 19 | } 20 | 21 | gulp.task('buildSASS', compileSASS); 22 | gulp.task('watchSASS', ['buildSASS'], watchSASS); 23 | 24 | gulp.task('default', ['watchSASS']); 25 | -------------------------------------------------------------------------------- /layouts/IndexLayout.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import Navigation from './components/Navigation.jsx'; 4 | 5 | export default class IndexLayout extends React.Component { 6 | 7 | constructor(props) { 8 | super(props); 9 | 10 | this.state= { 11 | clicks: 0 12 | }; 13 | } 14 | 15 | _clickHandler() { 16 | 17 | this.setState({ 18 | clicks: this.state.clicks + 1 19 | }); 20 | } 21 | 22 | render() { 23 | 24 | return ( 25 |
26 |

My index awesomeness

27 | 28 | 29 | 30 | 33 |
34 | ); 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /routes/apiRoutes.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | APIRoute 4 | } from 'plasmajs'; 5 | 6 | export default (props) => { 7 | 8 | // API request handler for api routes 9 | function _apiCallHandler() { 10 | 11 | // Some expensive promise that takes 400ms to resolve 12 | return new Promise((resolve, reject) => { 13 | 14 | setTimeout(() => { 15 | 16 | const { method, url }= props.request; 17 | 18 | resolve({ method, url }); 19 | }, 400); 20 | }); 21 | } 22 | 23 | return [ 24 | , 25 | 26 | ] 27 | }; 28 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | # PlasmaJS Starter Kit 3 | [Note: Not up to date] 4 | A Starterkit for the [PlasmaJS framework](https://github.com/phenax/plasmajs) 5 | 6 | ## Stuff 7 | * SASS (gulp to transpile) 8 | * ES6 (webpack to transpile) 9 | 10 | ## Instructions 11 | 12 | * **Installation** 13 | 14 | - Clone this repo ```git clone https://github.com/phenax/plasmajs-starter-kit.git``` or [download as zip](https://github.com/phenax/plasmajs-starter-kit/archive/master.zip) 15 | 16 | 17 | * **Start Server** 18 | 19 | - Start PlasmaJS server ```npm start``` 20 | - Start server and watch for changes 21 | 1. Install nodemon ```npm i -g nodemon``` 22 | 2. Run ```npm run start:watch``` 23 | 24 | 25 | * **Building files** 26 | 27 | - Build js files ```npm run build:js``` 28 | - Build js files and watch for changes ```npm run build:js:watch``` 29 | - Build js files for production ```npm run build:js:prod``` 30 | 31 | - Build scss files ```npm run build:js``` 32 | - Build scss files and watch for changes ```npm run build:js:watch``` 33 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "plasmajs-starter-kit", 3 | "version": "0.0.1", 4 | "description": "The starter kit for making a web app in plasmaJS", 5 | "main": "server.jsx", 6 | "scripts": { 7 | "start": "plasmajs .", 8 | "start:watch": "nodemon -e jsx --exec plasmajs .", 9 | "build:js": "webpack", 10 | "build:js:watch": "webpack -w", 11 | "build:js:prod": "webpack -p", 12 | "build:css": "gulp buildSASS", 13 | "build:css:watch": "gulp", 14 | "test": "echo \"Error: no test specified\" && exit 1" 15 | }, 16 | "author": "Akshay Nair ", 17 | "license": "Apache-2.0", 18 | "dependencies": { 19 | "babel-core": "^6.18.2", 20 | "babel-preset-es2015": "^6.18.0", 21 | "babel-preset-react": "^6.16.0", 22 | "babel-preset-stage-0": "^6.16.0", 23 | "plasmajs": "^0.1.6", 24 | "react": "^15.3.2", 25 | "react-dom": "^15.3.2" 26 | }, 27 | "devDependencies": { 28 | "babel-loader": "^6.2.8", 29 | "gulp": "^3.9.1", 30 | "gulp-autoprefixer": "^3.1.1", 31 | "gulp-minify-css": "^1.2.4", 32 | "gulp-sass": "^2.3.2", 33 | "webpack": "^2.1.0-beta.25" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /server.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Server } from 'plasmajs'; 3 | import { 4 | Logger, 5 | ServiceWorker, 6 | StaticContentRouter 7 | } from 'plasmajs/middlewares'; 8 | 9 | import AllApiRoutes from './routes/apiRoutes.jsx'; 10 | import AllPageRoutes from './routes/getRoutes.server.jsx'; 11 | import { HeadLayout } from './layouts/WrapperLayouts.jsx'; 12 | 13 | export default class App extends React.Component { 14 | 15 | static get port() { return 8080 } 16 | 17 | render() { 18 | return ( 19 | 20 | 21 | 22 | {AllApiRoutes(this.props)} 23 | 24 | 25 | {/* 26 | 27 | */} 28 | 29 | 30 | {AllPageRoutes(this.props)} 31 | 32 | 33 | 34 | ); 35 | } 36 | 37 | // Cluster configuration 38 | static get cluster() { 39 | return { 40 | count: require('os').cpus().length, 41 | master() { console.log('Master running') }, 42 | notMaster() { console.log('Slave running') } 43 | } 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /layouts/WrapperLayouts.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | /** 4 | * Contents inside the head 5 | */ 6 | export class HeadLayout extends React.Component { 7 | 8 | render() { 9 | 10 | return ( 11 | 12 | 13 | {this.props.title || ""} 14 | 15 | {this.props.children} 16 | 17 |