I'm fairly new to CRA, and normally I just use regular React with Webpack. I'm trying to serve my CRA just like I would any other React apps. My root directory file structure currently looks something like this:
controllers/
build/
app.js
package.json
Where "app.js" is my Node/Express server, build/ is the build folder for my CRA application (the index.hmtl, static directory, manifest, etc. are all here), and controllers/ is my router files. The router file I have to serve my react, called "staticController.js", is in the controllers/ directory and looks like this:
const express = require("express");
const path = require("path");
const router = express.Router();
router.get("/client/static/home", (req, res) => {
res.sendFile(path.join(__dirname, ".." , "/build/index.html"));
})
module.exports = router;
I import this router module into app.js to use it, and run the router on port 3001. When I go to localhost:3001/client/static/home, I get a blank page and an error saying:
GET http://localhost:3001/static/css/1.1ee5c864.chunk.css
net::ERR_ABORTED 404 (Not Found)
I'm not sure how to specifiy to CRA that the static directory and all associated build files should be under the "build/" directory. So instead, I move the static folder outside the build directory, into the root directory. The file structure looks like this now:
controllers/
build/
static/
app.js
package.json
When I try the route again, I still get the same error. Now I'm a bit confused as to how Node file structure works. If app.js is in the root directory, wouldn't localhost:3001/static/ just be my static/ folder? Why can't the CRA app find this folder?
use
express.static
to serve the build folder (or any static files)
e.g. : here i'm serving the build folder on the root path (assuming it's located on the same directory as the server file)
app.use('/', express.static('build'));
I believe what you are looking for is static.
https://expressjs.com/en/4x/api.html#express.static
You need something like
var express = require('express');
var app = express();
app.use(express.static('static'));
Related
I am trying to server static files with express and them dont work, i think its express problem or something but i dont realize why it dont works.
my folders look like this:
app.js
public
--css
--js
--images
and the code i trying to run like this:
app.use(express.static(path.join(__dirname,'public')));
if i do console.log of the path
console.log(path.join(__dirname, 'public'))
i get the next path
C:\Users\J\Desktop\node.js\social-media-cars\public
and if i look at the path with the windows file explorer i see that the path is correct and i see the content inside, so i dont think its path fault
i also tryed :
app.use(express.static(path.join(__dirname,'public')));
app.use('/static',express.static(path.join(__dirname, '/public')));
and dont works, always the same things:
im desesparate with this, idk why this dont works.
code where i use it looks like this:
// Import the express module
const path = require('path');
const express = require("express");
// Instantiate an Express application
const app = express();
const dotenv = require("dotenv").config();
const ActionsRouter = require('./routers/actions-router');
const UserRouter = require('./routers/user-router');
const cookieparser = require('cookie-parser');
// app.use('/static',express.static(path.join(__dirname, '/public')));
//set static files that are rendered after
app.use(express.static(path.join(__dirname,'public')));
//read the cookies from response
app.use(cookieparser(path.join(__dirname, '/public')));
console.log(path.join(__dirname, 'public'))
//create the req.body
app.use(express.json());
//user
app.use("/api",UserRouter);
app.use("/useractions",ActionsRouter);
module.exports = app;
const server = app.listen(port,()=>{
console.log(`listening on port ${port}`)});
get the static files with every response i get
also i get this error
1. Add this middleware in the index.js or app.js above you set view engine
app.use(express.static(path.join(__dirname, "public")));
2. Folder Structure
|__public/
|__ css/
|__ css files...
|__ js/
|__ js files...
3. Import this way
Now you set the path to the public directory you have to give the path public folder when you import
<link rel="stylesheet" href="/css/main.css" />
In the same way, you can import your JS files
You should now be all set up to access CSS or js as well as any file in the public directory
okey i found it, i was so lost because when i try to see the files that i got in each response on the browser, i was not getting any file,
but only when i linked css and html it downloaded the static file, idk why this works like this,
i supposed every of /public file was atached to the response you use it or not
<link rel="stylesheet" type="text/css" href="/css/styles.css">
anyway if there is a way to get the file you request or not i would like to know
I am creating website using nodejs. i have lot of default js and css files from out of nodejs project file like assets. already i have created one public folder but i can not paste that folder inside that because that folder size is very big.how to call that files inside nodejs project.
folder structure:
assets
nodeproject
node_modules
public
views
index.js
package.json
package-lock.json
my assets folder have lot of css and html files like:
assets
1.style1.css
1.style2.css
1.style3.css
templatefolder:-
template1.html
template2.html
index.js:
const express=require('express');
const app=express();
app.listen(4600);
app.use(express.static('public'));
/*app.use(express.static('assets')); not working */
app.set('view engine','ejs');
app.get('/',(req,res)=>{
res.render("home");
});
This seems to be a common error with file paths but my problem is a but more strange because code worked fine yesterday but not today (and I did not change any code). My folder directory is quite simple:
-node_modules
-public
-css
-js
control_panel.html
index.html
app.js
packages.json
and I am using an Express middleware inside app.js to help render files.
var express = require("express");
var app = express();
app.use(express.static("public"));
app.get('/', function get(req, res) {
res.sendFile('/index.html');
});
app.get('/control_panel', function get(req, res) {
res.sendFile('/control_panel.html');
});
When I try to open index.html in the browser, there is no problem, everything works as expected. When I try to open control_panel.html in the browser, however, I get Error: ENOENT: no such file or directory, stat '/control_panel.html' at Error (native)
What is causing the problem?
A number of relevant points based on your situation:
All static assets (html files, images, CSS files, client-side script files, etc...) should be serviced automatically with an appropriate express.static(...) statement. You should not be creating individual routes for static resources.
To make express.static() work properly, you must locate all your static resources in a directory hierarchy that contains only files meant to be public.
Your private server-side files such as app.js should not be in that public directory hierarchy. They should be elsewhere.
Your path to express.static() is not correct.
Your path for res.sendFile() is not correct.
What I would suggest you do to fix things is the following:
Move app.js out of the public directory. It needs to be in a private directory. I'd suggest the public directory be a sub-directory from where app.js is located.
Then, your express.static() in app.js will work property to serve your static HTML fiels.
Then, you can remove the two routes you have for index.html and control_panel.html because express.static() should be serving them.
Here's one hierarchy that would work:
server
app.js
public
index.html
control_panel.html
And, an app.js like this:
var express = require("express");
var app = express();
// serve static files found in the public sub-directory automatically
app.use(express.static("public"));
app.listen(80);
I am trying to use webpack to generated a bundle.js file for a node module. The bundle.js file will be used in the client browser.
Here is the problem, the project has some dependencies that use static files in the node_modules directory. For example, the path of one of the static file is
/node_modules/node-pogo-signature/lib/proto/Signature.proto
When I try to run the bundle.js file in the browser, I get this error
GET http://localhost:3000/proto/Signature.proto 404 (Not Found)
If I copy the the Signature.proto file into my /public folder, the bundle will then find it. However, manually copying static files from /node_modules to /public can be tedious and hard to maintain.
Is there a better way to do it?
var myfile = require('./node_modules/node-pogo-signature/lib/proto/Signature.proto');
Then you may add it to a route, for example if you use express this is how you can display the content of the package.json file:
// create a new express server
var express = require('express'); // We use express as web server http://expressjs.com
var app = express();
// serve the files out of ./public as our main files
app.use(express.static(__dirname + '/public'));
// start server on the specified port and binding host
app.listen(appEnv.port, '0.0.0.0', function() {
console.log("server started");
});
// Shows content of package.json
var myfile = require('./package.json');
app.get('/showfile', function (req, res){
if (debug) {
console.log("showfile received a request");
};
res.send(myfile);
});
You just have to add /showfile at the end of the url , for example : http://localhost:6006/showfile
I am new to AngularJs and wanted to start learning it. I was going to use Restify as my api/backend and was hoping it was possible to serve static files up for the route /.
app layout is something like this..
/nodesprinkler
node_modules/
public/
css/
main.css
bootstrap.css
js/
angular.js
app.js
...
img/
...
index.html
favicon.ico
server.js
routes.js
...
My server.js looks like so:
var restify = require('restify'),
app = module.exports = restify.createServer();
app.listen(8000, function() {
console.log('%s listening at %s', app.name, app.url);
});
/* Client Side Route */
app.get('/', restify.serveStatic({
directory: 'public',
default: 'index.html'
}));
module.exports.app = app;
routes = require('./routes');
How can i get Restify to serve up my static assets so it'll work like a regular express app works? I know restify is based off express, so there must be something simple that i'm missing. It will serve up / as index.html but any of my css and js files I dont have access to.
try express.static()
before app.listen put
app.use(express.static(__dirname+"/public"))
The docs
Try this:
app.get("/css|js|img/", restify.plugins.serveStatic({
directory: "./public"
}));
app.get(
"/.*/",
restify.plugins.serveStatic({
directory: "./public",
file: "index.html"
})
);
I'm creating my futur startup with the same technologies: Restify (that I rewrite) and Angular JS for the single app view.
I've tried of lots of solutions and the best one for me is :
Keep a WS with Restify (or what you want) WITHOUT any static files... I serve it with a dedicated server (python for dev, NGinx for production).
I know this is not the expected answer but give it a try.
python -m http.server on your angular directory is so simple :p