Задача этой недели была вдохновлена ​​тестом на кодирование, который я получил в понедельник. Как и в случае с музыкальным приложением в прошлом блоге, мне нужно было получать изображения из API и отображать их по-разному. Но была одна загвоздка - мне нужно было сделать это без моего любимого React, и ему нужно было, чтобы он открывался при запуске npm start из корня.

Оказывается, я не так хорошо разбирался в NPM, как думал. Как заставить все работать с нуля? Как мне это сделать без бэкэнда Rails? После просмотра тонны информации мне понадобились два ключевых файла, чтобы заставить его работать:

  1. package.json
  2. server.js

Я покажу вам простой пример.

Сначала создайте простой файл index.html:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="index.css">  
  </head>
  <body>
    <div id="main">
      <h1>Hello world!</h1>
      <btn id="btn" onClick="clickHandle()">Click me</btn>
    </div>
    <script src="index.js"></script>
  </body>
</html>

Мы свяжем это с таблицей стилей CSS, покажем приветственное сообщение, добавим кнопку для нажатия и свяжем ее с файлом js. Теперь посмотрим на index.js:

function clickHandle(event){
  alert("Welcome to the site!")
}

И наш index.css:

html {
  width: 100%;
  height: 100%;
}
body {
  background: linear-gradient(to left,lightblue,lightgreen);
  background-repeat: no-repeat;
  background-size: cover;
  font-family: "Arial";
}

Теперь, когда вы дважды щелкните файл index.html, он должен открыться в браузере и работать нормально:

Чтобы запустить его при запуске npm, потребуется всего пара шагов.

Вам потребуется создать файл package.json. Вы можете следовать инструкциям здесь. После запуска npm init мой файл package.json выглядит так:

{
  "name": "first-app",
  "version": "1.0.0",
  "description": "example for blog",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Kelly",
  "license": "ISC"
}

На данный момент мы можем убрать строку test из скриптов (хотя тестирование с Mocha - это довольно весело), ​​но нам нужно добавить начало:

{
  "name": "first-app",
  "version": "1.0.0",
  "description": "example for blog",
  "main": "index.js",
  "scripts": {
    "start": "open http://localhost:8080 && node server.js"
  },
  "author": "Kelly",
  "license": "ISC"
}

Это сообщает приложению, что при вводе npm start ему необходимо открыть вкладку в вашем браузере по адресу localhost: (любой порт, который вы хотите) и использовать server.js для запуска. все. Теперь перейдем к server.js!

read about require() here: 
const http = require('http');
const fs = require('fs');
declare writable global variables:
let html;
let css;
let js;
use fs.readFile to assign the global variables above:
fs.readFile('./index.html', function (err, data) {
  if (err) {
    throw err;
  }
  html = data;
});
fs.readFile('./index.css', function (err, data) {
  if (err) {
    throw err;
  }
  css = data;
});
fs.readFile('./index.js', function (err, data) {
  if (err) {
    throw err;
  }
  js = data;
});
create the server - look to see if the request url contains either CSS or Javascript, and return the appropriate information: 
http.createServer((req, res) => {
  res.statusCode = 200;
if(req.url.indexOf('.css') != -1){
   res.writeHead(200, {'Content-Type': 'text/css'});
   res.write(css);
   res.end();
   return;
  }
  if(req.url.indexOf('index.js') != -1){
   res.writeHead(200, {'Content-Type': 'text/javascript'});
   res.write(js);
   res.end();
   return;
  }
res.writeHeader(200, {"Content-Type": "text/html"});
  res.write(html);
  res.end();
}).listen(8080);
^ listen for your assigned port

Следует отметить, что при этом запускаются только те файлы, которые вы ему указали. Поэтому, если у вас есть второй файл javascript, вам необходимо добавить его как в свои сценарии index.html, так и в файл server.js.

Вот и все! Вы должны иметь возможность войти в свой корневой каталог с компакт-диска, запустить npm i && npm start и увидеть, как происходит волшебство.

Спасибо за прочтение!