How to Build a reusable Javascript development environment.

muba ruganda
Jun 27 · 8 min read

Package management

Bower
npm
JSPM

Lets set up npm for our project.

"devDependencies": {"babel-cli": "6.26.0","devDependencies": {"babel-cli": "6.26.0","babel-core": "6.26.3","babel-loader": "8.0.6","babel-preset-latest": "6.24.1","babel-register": "^6.26.0","chai": "4.2.0","chalk": "^2.4.2","cheerio": "0.22.0","compression": "1.7.4","cross-env": "5.2.0","css-loader": "3.0.0","eslint": "5.16.0","eslint-plugin-import": "2.17.3","eslint-watch": "5.1.2","express": "^4.17.1","extract-text-webpack-plugin": "3.0.2","html-webpack-plugin": "3.2.0","jsdom": "^15.1.1","json-schema-faker": "0.4.7","json-server": "0.15.0","localtunnel": "^1.9.2","mocha": "^6.1.4","nock": "10.0.6","nodemon": "^1.19.1","npm-run-all": "^4.1.5","nsp": "3.2.1","numeral": "2.0.6","open": "6.3.0","rimraf": "2.6.3","style-loader": "0.23.1","surge": "0.21.3","webpack": "4.34.0","webpack-dev-middleware": "3.7.0","webpack-hot-middleware": "2.25.0","webpack-md5-hash": "0.0.6"}

Development Web Server

const express = require('express');
const path = require('path');
const open = require('open');
const port = 3000;
const app = express();
app.get('/', function(req, res){
res.sendFile(path.join(__dirname, './client/index.html'))
})app.listen(port, function(err){
if(err){
console.log(err)
}else{
open('http://localhost:'+port)
}
});
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Js Article</title></head>
<body>
<h1>JavaScript Dev env Article</h1></body></html>
node server.js
npm install local tunnel -gstart the applt --port 3000

Other options worth considering for this service include ;

Automation

"scripts": {"start": "nodemon --exec babel-node server.js"}

Transpiling

Lets set up Babel Our Transpiler of choice.

babel-clibabel-corebabel-loaderbabel-preset-latestbabel-register
{"presets":["latest"]}
import express from 'express'
import path from 'path';
import open from 'open';
const port = 5000;
const app = express();
app.get('/', function(req, res){res.sendFile(path.join(__dirname, './client/index.html'))})app.listen(port, function(err){if(err){console.log(err)}else{open('http://localhost:'+port)}});

Bundling

import HtmlWebpackPlugin from 'html-webpack-plugin';
import path from 'path';
export default {entry: [path.resolve(__dirname, 'server.js')],output: {path: path.resolve(__dirname, 'src'),publicPath: '/',filename: 'bundle.js'},plugins: [new HtmlWebpackPlugin({template: 'client/index.html',inject: true})],module: {loaders: [{test: /\.js$/, exclude: /node_modules/, loaders: ['babel']},{test: /\.css$/, loaders: ['style','css']}]}}
import express from 'express'
import path from 'path';
import open from 'open';
import webpack from 'webpack';
import config from './webpack.config.dev';
const port = 5000;
const app = express();
const compiler = webpack(config);
app.use(require('webpack-dev-middleware')(compiler, {
noInfo: true,
publicPath: config.output.publicPath
}))
app.get('/', function(req, res){res.sendFile(path.join(__dirname, './client/index.html'))})app.listen(port, function(err){if(err){console.log(err)}else{open('http://localhost:'+port)}});

The Andela Way

A pool of thoughts from the brilliant people at Andela

muba ruganda

Written by

The Andela Way

A pool of thoughts from the brilliant people at Andela