Eu quero executar um servidor HTTP muito simples. Toda solicitação GET example.com
deve ser index.html
veiculada a ela, mas como uma página HTML comum (ou seja, a mesma experiência de quando você lê páginas da Web normais).
Usando o código abaixo, eu posso ler o conteúdo de index.html
. Como sirvo index.html
como uma página da web comum?
var http = require('http');
var fs = require('fs');
var index = fs.readFileSync('index.html');
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end(index);
}).listen(9615);
Uma sugestão abaixo é complicada e requer que eu escreva uma get
linha para cada arquivo de recurso (CSS, JavaScript, imagens) que desejo usar.
Como posso servir uma única página HTML com algumas imagens, CSS e JavaScript?
Respostas:
O servidor Node.js mais simples é apenas:
Agora você pode executar um servidor através dos seguintes comandos:
Se você estiver usando o NPM 5.2.0 ou mais recente, poderá usá-
http-server
lo sem instalá-lonpx
. Isso não é recomendado para uso em produção, mas é uma ótima maneira de obter rapidamente um servidor em execução no host local.Ou, você pode tentar isso, o que abre o navegador da Web e permite solicitações do CORS:
Para mais opções, consulte a documentação
http-server
do GitHub ou execute:Muitos outros recursos interessantes e uma implantação simples com morte cerebral no NodeJitsu.
Garfos de recurso
Obviamente, você pode facilmente completar os recursos com seu próprio garfo. Você pode descobrir que isso já foi feito em um dos mais de 800 garfos existentes deste projeto:
Servidor Light: uma alternativa de atualização automática
Uma boa alternativa para
http-server
élight-server
. Ele suporta a visualização de arquivos e a atualização automática e muitos outros recursos.Adicione ao menu de contexto do diretório no Windows Explorer
Servidor JSON REST simples
Se você precisar criar um servidor REST simples para um projeto de protótipo, o json-server pode ser o que você está procurando.
Editores de atualização automática
A maioria dos editores de páginas da Web e ferramentas IDE agora incluem um servidor da Web que observará seus arquivos de origem e atualizará automaticamente sua página da Web quando eles forem alterados.
Eu uso o Live Server com o Visual Studio Code.
O editor de texto de código aberto Brackets também inclui um servidor da Web estático do NodeJS. Basta abrir qualquer arquivo HTML entre parênteses, pressionar " Live Preview " e ele inicia um servidor estático e abre o navegador na página. O navegador ** atualizará automaticamente sempre que você editar e salvar o arquivo HTML. Isso é especialmente útil ao testar sites adaptáveis. Abra sua página HTML em vários navegadores / tamanhos de janela / dispositivos. Salve sua página HTML e veja instantaneamente se seu material adaptável está funcionando, pois todos são atualizados automaticamente.
PhoneGap Developers
Se você estiver codificando um aplicativo móvel híbrido , pode estar interessado em saber que a equipe do PhoneGap adotou esse conceito de atualização automática com seu novo aplicativo PhoneGap . Este é um aplicativo móvel genérico que pode carregar os arquivos HTML5 de um servidor durante o desenvolvimento. Esse é um truque muito simples, já que agora você pode pular as etapas lentas de compilação / implantação em seu ciclo de desenvolvimento para aplicativos móveis híbridos se estiver alterando arquivos JS / CSS / HTML - que é o que você faz na maioria das vezes. Eles também fornecem o servidor da Web estático do NodeJS (execução
phonegap serve
) que detecta alterações de arquivo.Desenvolvedores do PhoneGap + Sencha Touch
Agora adaptei extensivamente o servidor estático PhoneGap e o aplicativo PhoneGap Developer para desenvolvedores Sencha Touch e jQuery Mobile. Confira no Sencha Touch Live . Suporta códigos QR --qr e --localtunnel que proxies seu servidor estático do seu computador desktop para uma URL fora do seu firewall! Toneladas de usos. Aceleração maciça para desenvolvedores móveis híbridos.
Desenvolvedores de framework Cordova + Ionic
O servidor local e os recursos de atualização automática são incorporados à
ionic
ferramenta. Basta executar aionic serve
partir da pasta do aplicativo. Ainda melhor ...ionic serve --lab
para visualizar automaticamente as atualizações lado a lado do iOS e do Android.fonte
npm install live-server -g
se você quer a mesma coisa, mas com auto-reload quando detecta uma alteração de arquivohttp-server -a localhost
Você pode usar o Connect e o ServeStatic com o Node.js para isso:
Instale conectar e servir estático com o NPM
Crie o arquivo server.js com este conteúdo:
Executar com Node.js
Agora você pode ir para
http://localhost:8080/yourfile.html
fonte
Confira esta essência . Estou reproduzindo aqui para referência, mas a essência é atualizada regularmente.
Atualizar
A essência manipula arquivos css e js. Eu já usei. Usar leitura / gravação no modo "binário" não é um problema. Isso significa apenas que o arquivo não é interpretado como texto pela biblioteca de arquivos e não está relacionado ao tipo de conteúdo retornado na resposta.
O problema com o seu código é que você sempre retorna um tipo de conteúdo "texto / sem formatação". O código acima não retorna nenhum tipo de conteúdo, mas se você o estiver usando apenas para HTML, CSS e JS, um navegador poderá inferir isso muito bem. Nenhum tipo de conteúdo é melhor que um errado.
Normalmente, o tipo de conteúdo é uma configuração do seu servidor da web. Então, desculpe-me se isso não resolver o seu problema, mas funcionou para mim como um servidor de desenvolvimento simples e achei que poderia ajudar outras pessoas. Se você precisar de tipos de conteúdo corretos na resposta, defina-os explicitamente como joeytwiddle possui ou use uma biblioteca como o Connect que possua padrões sensíveis. O bom disso é que é simples e independente (sem dependências).
Mas sinto seu problema. Então aqui está a solução combinada.
fonte
fs.exists()
também está obsoleto agora. Capte o erro aofs.stat()
invés de criar uma condição de corrida.Você não precisa expressar. Você não precisa se conectar. Node.js faz http NATIVELY. Tudo o que você precisa fazer é retornar um arquivo dependente da solicitação:
Um exemplo mais completo que garante que as solicitações não possam acessar os arquivos sob um diretório base e faz o tratamento adequado de erros:
fonte
node thisfile.js
. Ele será executado, ouvindo novas conexões e retornando novos resultados, até que A. seja fechado por um sinal ou B. algum erro louco de alguma forma cause o encerramento do programa.Acho que a parte que você está perdendo agora é o envio:
Se você deseja que um navegador da web renderize o HTML, altere isso para:
fonte
<style>
tag.Etapa 1 (dentro do prompt de comando [espero que você faça o CD PARA A SUA PASTA]):
npm install express
Etapa 2: Crie um arquivo server.js
Observe que você deve adicionar WATCHFILE (ou usar nodemon) também. O código acima é apenas para um servidor de conexão simples.
ETAPA 3:
node server.js
ounodemon server.js
Agora existe um método mais fácil se você deseja apenas hospedar um servidor HTTP simples.
npm install -g http-server
e abra nosso diretório e digite
http-server
https://www.npmjs.org/package/http-server
fonte
O caminho mais rápido:
Seu jeito:
fonte
Em vez de lidar com uma instrução switch, acho melhor procurar o tipo de conteúdo em um dicionário:
fonte
Esta é basicamente uma versão atualizada da resposta aceita para a versão 3 do connect:
Também adicionei uma opção padrão para que index.html seja exibido como padrão.
fonte
Você não precisa usar nenhum módulo do NPM para executar um servidor simples, há uma biblioteca muito pequena chamada " NPM Free Server " para o Node:
50 linhas de código, são exibidas se você estiver solicitando um arquivo ou uma pasta e fornecerão uma cor vermelha ou verde se houver falha no trabalho. Tamanho inferior a 1 KB (minificado).
fonte
var filename = path.join(process.cwd() + '/dist/', uri);
no servidor da pasta dist . Eu coloquei o código emserver.js
e apenas funciona quando digitonpm start
se você possui um nó instalado no seu PC, provavelmente possui o NPM, se não precisar do material do NodeJS, poderá usar o pacote serve para isso:
1 - Instale o pacote no seu PC:
2 - Sirva sua pasta estática:
Ele mostrará a qual porta sua pasta estática está sendo servida, basta navegar para o host como:
fonte
Encontrei uma biblioteca interessante no npm que pode ser útil para você. É chamado mime (
npm install mime
ou https://github.com/broofa/node-mime ) e pode determinar o tipo de mime de um arquivo. Aqui está um exemplo de servidor web que escrevi usando-o:Isso servirá para qualquer arquivo de texto ou imagem comum (.html, .css, .js, .pdf, .jpg, .png, .m4a e .mp3 são as extensões que eu testei, mas, teoricamente, deve funcionar para tudo)
Notas do desenvolvedor
Aqui está um exemplo de saída que recebi:
Observe a
unescape
função na construção do caminho. Isso permite nomes de arquivos com espaços e caracteres codificados.fonte
Editar:
Aplicativo de exemplo Node.js. O Node Chat tem a funcionalidade que você deseja.
No arquivo README.textfile
3. Etapa é o que você está procurando.
Aqui está o server.js
Aqui está o util.js
fonte
.readFileSync
em um retorno de chamada. Com o node.js, usamos E / S sem bloqueio. Por favor, não recomendeSync
comandos.A maneira como faço é instalar primeiro o servidor estático do nó globalmente via
navegue até o diretório que contém seus arquivos html e inicie o servidor estático com
static
.Vá para o navegador e digite
localhost:8080/"yourHtmlFile"
.fonte
Eu acho que você estava procurando por isso. No seu index.html, basta preenchê-lo com o código html normal - o que você quiser renderizar, como:
fonte
Basicamente, copiando a resposta aceita, mas evitando criar um arquivo js.
Achei muito conveniente.
Atualizar
Desde a versão mais recente do Express, o serve-static se tornou um middleware separado. Use isto para servir:
Instale
serve-static
primeiro.fonte
de w3schools
é muito fácil criar um servidor de nó para servir qualquer arquivo solicitado e você não precisa instalar nenhum pacote para ele
http: // localhost: 8080 / file.html
servirá file.html do disco
fonte
Você pode apenas digitar aqueles em seu shell
Repo: https://github.com/zeit/serve .
fonte
Eu uso o código abaixo para iniciar um servidor web simples que processa o arquivo html padrão, se nenhum arquivo for mencionado no URL.
Ele renderizará todos os arquivos js, css e de imagem, além de todo o conteúdo html.
Concorde com a afirmação " Nenhum tipo de conteúdo é melhor que um errado "
fonte
Não tenho certeza se é exatamente isso que você queria, no entanto, você pode tentar mudar:
para isso:
Isso fará com que o cliente do navegador exiba o arquivo como html em vez de texto sem formatação.
fonte
fonte
Content-Type
deve sertext/html
, tal como é definido dessa forma:Content-Type := type "/" subtype *[";" parameter]
.Uma versão 4.x expressa um pouco mais detalhada, mas que fornece listagem de diretórios, compactação, armazenamento em cache e solicitações de log em um número mínimo de linhas
fonte
Quantidade louca de respostas complicadas aqui. Se você não pretende processar os arquivos / banco de dados nodeJS, mas apenas deseja servir html / css / js / images estático, conforme sua pergunta sugere, basta instalar o servidor pushstate-server módulo ou similar;
Aqui está um "liner" que criará e lançará um mini site. Basta colar esse bloco inteiro no seu terminal no diretório apropriado.
Abra o navegador e acesse http: // localhost: 3000 . Feito.
O servidor usará o
app
dir como raiz para servir os arquivos. Para adicionar ativos adicionais, basta colocá-los dentro desse diretório.fonte
npm install pushstate-server --save; touch server.js; echo "var server = require('pushstate-server');server.start({ port: 3000, directory: './' });" > server.js; node server.js
Já existem ótimas soluções para um simples
nodejs server
. Há mais uma solução, se você precisar,live-reloading
conforme fez alterações nos seus arquivos.navegue em seu diretório e faça
ele abrirá o navegador para você com a atualização ao vivo.
fonte
Função Express O sendFile faz exatamente o que você precisa e, como você deseja a funcionalidade do servidor da Web a partir do nó, o Express vem como uma opção natural e, então, a exibição de arquivos estáticos se torna tão fácil quanto:
leia mais aqui: https://expressjs.com/en/api.html#res.sendFile
Um pequeno exemplo com servidor web expresso para o nó:
execute isso e navegue para http: // localhost: 8080
Para expandir isso para permitir a veiculação de arquivos estáticos como css e imagens, aqui está outro exemplo:
então crie uma subpasta chamada css, coloque seu conteúdo estático e ele estará disponível no seu index.html para fácil referência, como:
Observe o caminho relativo no href!
voila!
fonte
A maioria das respostas acima descreve muito bem como o conteúdo está sendo veiculado. O que eu estava procurando como adicional foi a listagem do diretório para que outros conteúdos do diretório possam ser navegados. Aqui está minha solução para outros leitores:
fonte
Essa é uma das soluções mais rápidas que eu uso para ver rapidamente as páginas da web
A partir daí, basta digitar o diretório dos seus arquivos html e executar
altere o dispositivo para o Nexus 7 paisagem.
fonte
A versão mais simples que me deparei é a seguinte. Para fins de educação, é melhor, porque não usa bibliotecas abstratas.
Agora vá ao navegador e abra o seguinte:
Aqui
image.jpg
deve estar no mesmo diretório que este arquivo. Espero que isso ajude alguém :)fonte
Também posso recomendar o SugoiJS, é muito fácil de configurar e oferece a opção de começar a escrever rapidamente e possui ótimos recursos.
Dê uma olhada aqui para começar: http://demo.sugoijs.com/ , documentação: https://wiki.sugoijs.com/
Possui decoradores de manipulação de solicitações, políticas de solicitação e decoradores de políticas de autorização.
Por exemplo:
fonte
É muito fácil com as toneladas de bibliotecas presentes hoje. As respostas aqui são funcionais. Se você quer outra versão para começar mais rápido e simples
Obviamente, primeiro instale o node.js. Mais tarde:
Aqui o conteúdo de " https://raw.githubusercontent.com/voxsoftware/kawix-core/master/example/npmrequire/express-static.js " (você não precisa fazer o download, publiquei para entender como funciona por trás)
fonte