Building web app using react.js, express.js, node.js and mongodb
Backend code
var express = require("express");
var path = require("path");
var app = express();
app.use(express.static(path.join(__dirname,"../app/dist")));
app.listen(7777,function(){
console.log("Started listening on port", 7777);
})
index.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>School Finder</title>
<link href="bootstrap.min.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">School Finder</a>
</div>
</div>
</div>
<div id="container" class="container"></div>
<script src="main.js"></script>
</body>
</html>
gulpfile.js
var gulp = require("gulp");
var browserify = require("browserify");
var reactify = require("reactify");
var source = require("vinyl-source-stream");
gulp.task("bundle", function () {
return browserify({
entries: "./app/main.jsx",
debug: true
}).transform(reactify)
.bundle()
.pipe(source("main.js"))
.pipe(gulp.dest("app/dist"))
});
gulp.task("copy", ["bundle"], function () {
return gulp.src(["app/index.html","app/lib/bootstrap-css/css/bootstrap.min.css","app/style.css"])
.pipe(gulp.dest("app/dist"));
});
gulp.task("default",["copy"],function(){
console.log("Gulp completed...");
});
💖In our gulpfile we have created two tasks,
a) Task bundle, takes "main.jsx" file, which is currently empty, transpils jsx code to plain javascript using "reactify" then stream sources it using "vinyl-source-stream" further creates "main.js" file on the fly in "dist" directory with transpiled js code in it.
b) Task copy, takes index.html, bootstrap.min.css and style.css files files and copies them to "dist" folder.
No comments:
Post a Comment