Express-js não pode obter meus arquivos estáticos, por quê?

Reduzi meu código para o aplicativo express-js mais simples que eu poderia criar:

var express = require("express"),
    app = express.createServer();
app.use(express.static(__dirname + '/styles'));
app.listen(3001);

Meu diretório fica assim:

static_file.js
/styles
  default.css

No entanto, ao acessar http://localhost:3001/styles/default.css, recebo o seguinte erro:

Cannot GET / styles /
default.css

Eu estou usando express 2.3.3e node 0.4.7. O que estou fazendo de errado?

Tente http://localhost:3001/default.css.

Para ter /stylesno seu URL de solicitação, use:

app.use("/styles", express.static(__dirname + '/styles'));

Veja os exemplos nesta página :

//Serve static content for the app from the "public" directory in the application directory.

    // GET /style.css etc
    app.use(express.static(__dirname + '/public'));

// Mount the middleware at "/static" to serve static content only when their request path is prefixed with "/static".

    // GET /static/style.css etc.
    app.use('/static', express.static(__dirname + '/public'));

Eu tenho o mesmo problema. Eu resolvi o problema com o seguinte código:

app.use('/img',express.static(path.join(__dirname, 'public/images')));
app.use('/js',express.static(path.join(__dirname, 'public/javascripts')));
app.use('/css',express.static(path.join(__dirname, 'public/stylesheets')));

Exemplo de solicitação estática:

http://pruebaexpress.lite.c9.io/js/socket.io.js

Eu preciso de uma solução mais simples. Isto existe?

default.css deve estar disponível em http://localhost:3001/default.css

O stylesin app.use(express.static(__dirname + '/styles'));just diz ao express para procurar no stylesdiretório um arquivo estático para servir. Ele não faz (de maneira confusa) parte do caminho em que está disponível.

Este trabalho para mim:

app.use('*/css',express.static('public/css'));
app.use('*/js',express.static('public/js'));
app.use('*/images',express.static('public/images'));

No seu server.js:

var express   =     require("express");
var app       =     express();
app.use(express.static(__dirname + '/public'));

Você declarou express e app separadamente, cria uma pasta chamada 'public' ou como desejar e, no entanto, pode acessar essa pasta. No seu modelo src, você adicionou o caminho relativo de / public (ou o nome do destino da sua pasta aos arquivos estáticos). Cuidado com os bares nas rotas.

O que funcionou para mim é:

Em vez de escrever app.use(express.static(__dirname + 'public/images'));no seu app.js

Basta escrever app.use(express.static('public/images'));

ou seja, remova o nome do diretório raiz no caminho. E então você pode usar o caminho estático efetivamente em outros arquivos js, por exemplo:

<img src="/images/misc/background.jpg">

Espero que isto ajude :)

Estou usando CSS, JS e fontes do Bootstrap no meu aplicativo. Criei uma pasta chamada assetno diretório raiz do aplicativo e coloque todas essas pastas dentro dele. Em seguida, no arquivo do servidor adicionado a seguinte linha:

app.use("/asset",express.static("asset"));

Esta linha permite-me para carregar os arquivos que estão no assetdiretório do /assetprefixo do caminho como: http://localhost:3000/asset/css/bootstrap.min.css.

Agora, nas visualizações, posso simplesmente incluir CSS e JS, como abaixo:

<link href="/asset/css/bootstrap.min.css" rel="stylesheet">

para servir arquivos estáticos (css, imagens, arquivos js) apenas duas etapas:

1. passe o diretório de arquivos css para o middleware express.static integrado

   var express = require('express');
   var app = express();
   /*public is folder in my project directory contains three folders
   css,image,js
   */
   //css  =>folder contains css file
   //image=>folder contains images
   //js   =>folder contains javascript files
   app.use(express.static( 'public/css'));

2. para acessar arquivos ou imagens css, digite o URL http: // localhost: port / filename.css ex: http: // localhost: 8081 / bootstrap.css

Nota: para vincular arquivos CSS a html, basta digitar<link href="file_name.css" rel="stylesheet">

se eu escrever esse código

var express = require('express');
var app = express();
app.use('/css',express.static( 'public/css'));

para acessar os arquivos estáticos, basta digitar url: localhost: port / css / filename.css ex: http: // localhost: 8081 / css / bootstrap.css

note que para vincular arquivos CSS com html basta adicionar a seguinte linha

<link href="css/file_name.css" rel="stylesheet">    

este funcionou para mim

app.use(express.static(path.join(__dirname, 'public')));

app.use('/img',express.static(path.join(__dirname, 'public/images')));

app.use('/shopping-cart/javascripts',express.static(path.join(__dirname, 'public/javascripts')));

app.use('/shopping-cart/stylesheets',express.static(path.join(__dirname, 'public/stylesheets')));

app.use('/user/stylesheets',express.static(path.join(__dirname, 'public/stylesheets')));

app.use('/user/javascripts',express.static(path.join(__dirname, 'public/javascripts')));

Tente acessá-lo com http: // localhost: 3001 / default.css .

   app.use(express.static(__dirname + '/styles'));

Na verdade, você está dando o nome da pasta, ou seja, os estilos, e não o seu suburl.

Eu encontro meu arquivo css e adiciono uma rota a ele:

app.get('/css/MyCSS.css', function(req, res){
  res.sendFile(__dirname + '/public/css/MyCSS.css');
});

Então parece funcionar.

Além do acima, verifique se o caminho do arquivo estático começa com / (ex ... / assets / css) ... para servir arquivos estáticos em qualquer diretório acima do diretório principal (/ main)

se sua configuração

myApp
  |
  |__ public
  |     |
  |     |__  stylesheets
  |     |     |
  |     |     |__ style.css
  |     |
  |     |___ img
  |           |
  |           |__ logo.png
  |
  |__ app.js

em seguida,
coloque em app.js

app.use('/static', express.static('public'));

e consulte o seu style.css: (em algum arquivo .pug):

link(rel='stylesheet', href='/static/stylesheets/style.css')

1. Crie uma pasta com o nome 'public' na
   pasta do projeto Nodejs .
2. Coloque o arquivo index.html na pasta do projeto Nodejs.
3. Coloque todos os scripts e arquivos css na pasta pública.

4. Usar app.use( express.static('public'));

5. e no index.html caminho correto dos scripts para<script type="text/javascript" src="/javasrc/example.js"></script>

E agora tudo funciona bem.

diretório estático

verifique a imagem acima (diretório estático) para a estrutura dir

const publicDirectoryPath = path.join(__dirname,'../public')
app.use(express.static(publicDirectoryPath))


//  or

app.use("/", express.static(publicDirectoryPath))
app.use((req, res, next) => {
res.sendFile(path.join(publicDirectoryPath,'index.html'))