NetLoony es una GUI para Apache open source que nos facilitará la administración de nuestro servidor web.
Inicialmente era un producto de pago, pero ahora es open source, lo cual es un importante paso. Desarrollado en Java nos permite entre otras cosas disponer de un monitor de rendimiento, control remoto, soporte para SSL, buscador de ficheros htaccess, editor de texto, scaner de puertos, backup y muchas cosas más.
NetLoony
VÃa / Apache-es
Si antes hablábamos sobre cómo ver aplicaciones web en el escritorio, ahora vamos a hablar sobre cómo ejecutar las aplicaciones web en el escritorio. ¿Qué diferencia hay entre una cosa y otra?, pues que en este caso el servidor se ejecuta en nuestra máquina. Se trata de Wapache, una aplicación que transforma nuestras aplicaciones web en un ejecutable de Windows, para lo cual hace uso de Apache e integra un navegador Internet Explorer en la ventana, el cual no tendrá menu, barra de herramientas o barra de direcciones.
Además permite tres tipos de ventanas, personalizar el drop-down, y el menú contextual. Integración con el System tray y es compatible con los módulos de Apache 2.
Wapache
VÃa / Jaslabs: High performance Software
El backend ya está algo configurado, por lo que voy a empezar a configurar el frontend.
Instalaré varias librerías:
En vez de ir instalando una a una, usando el siguiente package.json y ejecutando npm i, lo tendremos todo instalado.
{
"name": "hapi-frontend",
"version": "1.0.0",
"description": "Hapi.js frontend",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --mode development --config webpack.config.dev.js",
"build": "webpack --mode production --config webpack.config.production.js"
},
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.5.4",
"babel-eslint": "^10.0.2",
"babel-loader": "^8.0.6",
"css-loader": "^3.0.0",
"eslint": "^6.0.1",
"eslint-plugin-html": "^6.0.0",
"eslint-plugin-vue": "^5.2.3",
"mini-css-extract-plugin": "^0.7.0",
"node-sass": "^4.12.0",
"sass-loader": "^7.1.0",
"stylelint": "^10.1.0",
"stylelint-config-standard": "^18.3.0",
"stylelint-webpack-plugin": "^0.10.5",
"vue-hot-reload-api": "^2.3.3",
"vue-html-loader": "^1.2.4",
"vue-loader": "^15.7.0",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.35.3",
"webpack-cli": "^3.3.5",
"webpack-dev-server": "^3.7.2",
"webpack-merge": "^4.2.1"
},
"dependencies": {
"buefy": "^0.7.10",
"vue": "^2.6.10"
}
}
Como se puede ver, existen dos scripts dentro de npm: build que compila el js y extrae los CSS, y dev, que arranca el servidor de webpack habilitando HMR (🎶 ¡ya no puedo vivir sin él! 🎶).
Ambas configuraciones de webpack usan un script en común (webpack.config.common.js):
const webpack = require( 'webpack' );
const path = require( 'path' );
// Carga los ficheros .vue
const VueLoaderPlugin = require( 'vue-loader/lib/plugin' );
// Configura stylelint
const StyleLintPlugin = require( 'stylelint-webpack-plugin' );
// Para obtener un path para los alias
function resolve( dir ) {
return path.join( __dirname, '.', dir );
}
module.exports = {
mode: 'production',
// Fichero inicial del proyecto
entry: './js/main.js',
// Fichero final para incluir
output: {
filename: 'js/main.js',
publicPath: '/dist/',
},
module: {
// Reglas para los ficheros
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
{
test: /\.vue$/,
loader: 'vue-loader',
},
{
test: /\.css$/,
use: [
'css-loader',
'sass-loader',
],
},
],
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new VueLoaderPlugin(),
new StyleLintPlugin( {
files: [ '**/*.{vue,htm,html,css,sss,less,scss,sass}' ],
} ),
],
resolve: {
extensions: [ '.js', '.vue', '.json' ],
alias: {
'@': resolve( '' ),
},
},
};El frontend se gestiona desde el fichero main.js, que inicializará Vue y añadirá el componente principal:
import Vue from 'vue';
import Buefy from 'buefy';
import 'buefy/dist/buefy.css';
import App from './components/App.vue';
import '@/assets/scss/main.scss';
Vue.use( Buefy );
new Vue( {
el: '#app',
components: {
App,
},
render: ( c ) => c( 'app' ),
} );
// accept replacement modules
if ( module.hot ) {
module.hot.accept();
}Y ya por último el componente App.vue, que muestra simplemente un poco de HTML
<template>
<header class="hero">
<div class="hero-head">
<h1>{{ title }}</h1>
</div>
</header>
</template>
<script>
export default {
data() {
return {
title: "Demo site",
};
},
};
</script>
<style lang="scss" scoped>
div {
h1 {
color: #fff;
}
}
</style>
Bueno, ha sido un resumen rápido, pero bajándote el código seguro que lo entiendes fácil