malar
/
fs-walle-react-ts
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

using webpack dev server

master
Malar Kannan 2017-07-18 15:54:19 +05:30
parent 9d9178fdcd
commit bc31135c2d
4 changed files with 132 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

212
scripts/flask.js
View File

@ -54,62 +54,76 @@ if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
// First, read the current file sizes in build directory. // First, read the current file sizes in build directory.
// This lets us display how much they changed later. // This lets us display how much they changed later.
measureFileSizesBeforeBuild(paths.appBuild) // measureFileSizesBeforeBuild(paths.appBuild)
.then(previousFileSizes => { // .then(previousFileSizes => {
// Remove all content but keep the directory so that // // Remove all content but keep the directory so that
// if you're in it, you don't end up in Trash // // if you're in it, you don't end up in Trash
// fs.copySync // // fs.copySync
fs.emptyDirSync(paths.appBuild); // fs.emptyDirSync(paths.appBuild);
fs.ensureSymlink(paths.appPng,path.resolve(paths.appBuild,'png')); // fs.ensureSymlink(paths.appPng,path.resolve(paths.appBuild,'png'));
// Merge with the public folder // // Merge with the public folder
copyPublicFolder(); // copyPublicFolder();
// Start the webpack build // // Start the webpack build
return build(previousFileSizes); // return build(previousFileSizes);
}) // })
.then( // .then(
({ stats, previousFileSizes, warnings }) => { // ({ stats, previousFileSizes, warnings }) => {
if (warnings.length) { // if (warnings.length) {
console.log(chalk.yellow('Compiled with warnings.\n')); // console.log(chalk.yellow('Compiled with warnings.\n'));
console.log(warnings.join('\n\n')); // console.log(warnings.join('\n\n'));
console.log( // console.log(
'\nSearch for the ' + // '\nSearch for the ' +
chalk.underline(chalk.yellow('keywords')) + // chalk.underline(chalk.yellow('keywords')) +
' to learn more about each warning.' // ' to learn more about each warning.'
); // );
console.log( // console.log(
'To ignore, add ' + // 'To ignore, add ' +
chalk.cyan('// eslint-disable-next-line') + // chalk.cyan('// eslint-disable-next-line') +
' to the line before.\n' // ' to the line before.\n'
); // );
} else { // } else {
console.log(chalk.green('Compiled successfully.\n')); // console.log(chalk.green('Compiled successfully.\n'));
} // }
//
console.log('File sizes after gzip:\n'); // console.log('File sizes after gzip:\n');
printFileSizesAfterBuild(stats, previousFileSizes); // printFileSizesAfterBuild(stats, previousFileSizes);
console.log(); // console.log();
// startWebPackDevServer(()=>{
// child_process.spawn('python',['walle-server.py'],{
// stdio:'inherit'
// });
// });
//
// // const appPackage = require(paths.appPackageJson);
// // const publicUrl = paths.publicUrl;
// // const publicPath = config.output.publicPath;
// // const buildFolder = path.relative(process.cwd(), paths.appBuild);
// // printHostingInstructions(
// // appPackage,
// // publicUrl,
// // publicPath,
// // buildFolder,
// // useYarn
// // );
// },
// err => {
// console.log(chalk.red('Failed to compile.\n'));
// console.log((err.message || err) + '\n');
// process.exit(1);
// }
// );
fs.emptyDirSync(paths.appBuild);
fs.ensureSymlink(paths.appPng,path.resolve(paths.appBuild,'png'));
// Merge with the public folder
copyPublicFolder();
startWebPackDevServer(()=>{
child_process.spawn('webpack',['--watch','--config','config/webpack.config.flask.js'],{
stdio:'inherit'
});
child_process.spawn('python',['walle-server.py'],{ child_process.spawn('python',['walle-server.py'],{
stdio:'inherit' stdio:'inherit'
}); });
const appPackage = require(paths.appPackageJson); });
const publicUrl = paths.publicUrl;
const publicPath = config.output.publicPath;
const buildFolder = path.relative(process.cwd(), paths.appBuild);
printHostingInstructions(
appPackage,
publicUrl,
publicPath,
buildFolder,
useYarn
);
},
err => {
console.log(chalk.red('Failed to compile.\n'));
console.log((err.message || err) + '\n');
process.exit(1);
}
);
// Create the production build and print the deployment instructions. // Create the production build and print the deployment instructions.
function build(previousFileSizes) { function build(previousFileSizes) {
console.log('Creating an optimized production build...'); console.log('Creating an optimized production build...');
@ -156,49 +170,49 @@ function copyPublicFolder() {
// Tools like Cloud9 rely on this. // Tools like Cloud9 rely on this.
// function startWebPackDevServer(){ function startWebPackDevServer(pyServer){
// const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000; const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
// const HOST = process.env.HOST || '0.0.0.0'; const HOST = process.env.HOST || '0.0.0.0';
//
// // We attempt to use the default port but if it is busy, we offer the user to // We attempt to use the default port but if it is busy, we offer the user to
// // run on a different port. `detect()` Promise resolves to the next free port. // run on a different port. `detect()` Promise resolves to the next free port.
// choosePort(HOST, DEFAULT_PORT) choosePort(HOST, DEFAULT_PORT)
// .then(port => { .then(port => {
// if (port == null) { if (port == null) {
// // We have not found a port. // We have not found a port.
// return; return;
// } }
// const protocol = process.env.HTTPS === 'true' ? 'https' : 'http'; const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
// const appName = require(paths.appPackageJson).name; const appName = require(paths.appPackageJson).name;
// const urls = prepareUrls(protocol, HOST, port); const urls = prepareUrls(protocol, HOST, port);
// // Create a webpack compiler that is configured with custom messages. // Create a webpack compiler that is configured with custom messages.
// const compiler = createCompiler(webpack, config, appName, urls, useYarn); const compiler = createCompiler(webpack, config, appName, urls, useYarn);
// // Load proxy config // Load proxy config
// const proxySetting = require(paths.appPackageJson).proxy; const proxySetting = require(paths.appPackageJson).proxy;
// const proxyConfig = prepareProxy(proxySetting, paths.appPublic); const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
// // Serve webpack assets generated by the compiler over a web sever. // Serve webpack assets generated by the compiler over a web sever.
// const serverConfig = createDevServerConfig( const serverConfig = createDevServerConfig(
// proxyConfig, proxyConfig,
// urls.lanUrlForConfig urls.lanUrlForConfig
// ); );
// const devServer = new WebpackDevServer(compiler, serverConfig); const devServer = new WebpackDevServer(compiler, serverConfig);
// devServer.listen(port, HOST, err => { devServer.listen(port, HOST, err => {
// if (err) { if (err) {
// return console.log(err); return console.log(err);
// } }
// if (isInteractive) { // if (isInteractive) {
// clearConsole(); // clearConsole();
// } // }
// child_process.exec('python',['walle-server.py'],{ const urls = prepareUrls(protocol, HOST, '5000');
// stdio:'inherit' pyServer();
// }); openBrowser(urls.localUrlForBrowser);
// }); });
// // openBrowser(urls.localUrlForBrowser); // openBrowser(urls.localUrlForBrowser);
// }) })
// .catch(err => { .catch(err => {
// if (err && err.message) { if (err && err.message) {
// console.log(err.message); console.log(err.message);
// } }
// process.exit(1); process.exit(1);
// }); });
// } }

6
src/LexEdit.tsx
View File

@ -26,7 +26,7 @@ export class LexEdit extends React.Component<any, any> {
let defaultText = _.get<any>(li, lens, ''); let defaultText = _.get<any>(li, lens, '');
let originalText = _.get<any>(this.props.lexItem, lens, ''); let originalText = _.get<any>(this.props.lexItem, lens, '');
let options = this.props.fieldMetaMap[field].options; let options = this.props.fieldMetaMap[field].options;
let changed = defaultText !== originalText; let changed = defaultText !== originalText && this.props.existing;
// console.log('changed:',changed); // console.log('changed:',changed);
let sh = (e: any) => { let sh = (e: any) => {
let eventData = {}; let eventData = {};
@ -54,11 +54,13 @@ export class LexEdit extends React.Component<any, any> {
<Button <Button
floated="right" floated="right"
icon="download" icon="download"
size="tiny"
onClick={(e, d) => this.handleOnLoad(d)} onClick={(e, d) => this.handleOnLoad(d)}
/> />
<Button <Button
floated="right" floated="right"
icon="undo" icon="undo"
size="tiny"
onClick={(e, d) => this.handleOnUndo(d)} onClick={(e, d) => this.handleOnUndo(d)}
/> />
</Card.Header> </Card.Header>
@ -89,7 +91,7 @@ export class LexEdit extends React.Component<any, any> {
this.setState({ lexItem }); this.setState({ lexItem });
} }
private handleOnLoad(event: any) { private handleOnLoad(event: any) {
// this.props.load() // this.props.load(this.state.lexItem)
console.log('loading from server'); console.log('loading from server');
} }

5
src/LexEditor.tsx
View File

@ -53,6 +53,7 @@ class LexSearch extends React.Component<any, any> {
placeholder="Search input" placeholder="Search input"
dir="auto" dir="auto"
value={this.props.searchState.searchValue} value={this.props.searchState.searchValue}
icon="filter"
onChange={(e, d) => this.handleChange(d, false)} onChange={(e, d) => this.handleChange(d, false)}
/> />
</div> </div>
@ -86,7 +87,7 @@ function LexMatches(params: any) {
key={uniqueKey} key={uniqueKey}
lexItem={mObj} lexItem={mObj}
selectionMeta={props.selectionMeta} selectionMeta={props.selectionMeta}
new_entry={false} existing={true}
/> />
); );
}); });
@ -98,7 +99,7 @@ function LexMatches(params: any) {
key={props.searchText} key={props.searchText}
lexItem={addProps} lexItem={addProps}
selectionMeta={props.selectionMeta} selectionMeta={props.selectionMeta}
new_entry={true} existing={false}
/> />
); );
editEntries.push(addEntry); editEntries.push(addEntry);

9
walle-server.py
View File

@ -1,5 +1,6 @@
from flask import Flask,send_from_directory from flask import Flask,send_from_directory
app = Flask(__name__,static_url_path='',static_folder='build') app = Flask(__name__,static_url_path='',static_folder='build')
import requests
@app.route('/') @app.route('/')
def walle_index(): def walle_index():
@ -10,5 +11,13 @@ def walle_index():
def walle_test(): def walle_test():
return "test" return "test"
# hmr streaming
# from flask import Response,stream_with_context
# @app.route('/sockjs-node/<path:url>',methods=['GET','POST'])
# def walle_hmr(url):
# webpack_server = 'http://localhost:3000/sockjs-node/'
# req = requests.get(webpack_server+url, stream = True)
# return Response(stream_with_context(req.iter_content()))
if __name__ == '__main__': if __name__ == '__main__':
app.run(debug=True) app.run(debug=True)