I have created server using nodeJS where I adding dist folder created by webpack.
server.js
app.use(express.static(path.join(__dirname, "dist")))
There is js folder also including all js files.
How can I add also js folder in correct way in server file?
Thanks in advance.
__dirname will return a relative path for your nodejs project.
You can print path.join(__dirname, "dist") in console and make sure that this folder is exists.
Related
After uploading an image with Multer to the uploads folder which is located in the root with server folder and client folder, React cannot access the images in the uploads folder, as the api/upload route returns just a string as /uploads/the_image_name.
I thought I should upload the images to the public folder in the React folder but I found that the convention is using an uploads folder in the root.
Server :
app.use('/uploads', express.static(path.join(__dirname, '/uploads')))
This line should probably solve it:
app.use("/uploads", express.static('uploads'))
You need to actually serve the images that reside in your uploads folder. One way to do this is to use the express static middleware. Assuming your uploads folder resides in your app's root, you'd simply add to your express app:
app.use("/uploads", express.static('uploads'))
I finished my react application, and I already built it. I also have my express app for my server side ready. I saw in a video that you can pass the files from the "build" folder to the "public" folder of the server app, but this was done in a basic json-server. I tried to do the same in my express app folder, but it didn't work. Could you please tell me where should I bring my "build" folder? Thank you!
I think you want to serve you react app via express
You can try using below code to do it it will serve your react build folder via express
//define this static path which will point to your build folder inside your server folder
let root = path.join(__dirname, 'client/build/')
app.use(express.static(root))
//route you need to define in your main server file
app.get("*",(req,res)=>{
res.sendFile(path.join(__dirname, '/client/build/index.html'));
})
run the express app and then type the url in browser you will get redirected to react app
I’m experiencing problems deploying a Vue JS app built using the Webpack CLi to work.
If uploaded in a root directory everything renders fine, but inside a subfolder, all the links break.
I want deploy VueJS App to this url :
https://event.domain.net/webinar
I have added publicPath in vue.config.js :
var path = require(‘path’)
module.exports = {
publicPath: ‘./’
}
But only the css and js folders point to the path /webinar.
For assets, fonts and others still point to the subdomain https://event.domain.net.
CSS and JS point to path /webinar
Asset, fonts still point to subdomain https://event.domain.net/
Console
use value of publicPath as /webinar that should work.
More details are here https://cli.vuejs.org/config/#publicpath
you can configure publicPath even based on environment.
Sagar Rabadiya pointed you to the right link:
create a file called vue.config.js in the project root (where your package.json is located).
prompt the following code snippet inside:
module.exports = {
publicPath: process.env.NODE_ENV === 'production'? '/your-sub-directory/' : '/'
}
and save the file.
Open a terminal and navigate to your project, then run npm run build to generate a production build from it.
As soon as the production build has been generated, copy the contents from it and paste it in the sub-directory you created in the root folder. For example, if you use Apache, the default root directory is the htdocs folder. I've also created a virtual host on the server, maybe you also need to do this.
Open the browser and type the address where your sub-directory lives. For example: http://your-server-url:your-port/your-sub-directory/ Your should see your app now.
I working on Angular application, where I am trying to server the build files from my Angular application through the dist directory in my express. To do this I copy the files generated by ng build and paste them into dist folder of express.
My dist folder looks like below
I am using the following code to serve the index.html file
this.app.use(express.static(__dirname + '/dist'))
But seem to be getting "Cannot GET /" error
Similarly if I do
this.app.use(express.static(__dirname + '/public'));
it serves the html in the public folder.
As far as my understanding, you can serve static from any folder in express. I am not sure if I am missing something here.
Make new directory ./dist/www and move your files except server.js to here.
this.app.use(express.static(__dirname + '/www'));
It looks like you should replace
this.app.use(express.static(__dirname + '/dist'))
with
this.app.use(express.static(__dirname))
I'm trying to serve a vue.js single page app with a node.js server but I'm having an issue with some express middleware.
Basically I'm trying to serve two things right now. My index.html and a dist folder that holds all of my static files. On localhost my index.html is served correctly but I'm getting a GET error for my dist folder and can not find it in the sources tab.
I've used more or less this same line of code for many single page apps before to serve my static assets but for some reason with this set up it's not serving the dist folder.
app.use(express.static(path.join(__dirname, '/dist')));
Anyone with express experience know why this line isn't working?
You are using express.static incorrectly. By default, express.static will serve the content you have INSIDE of that dist folder.
What you want to do is this:
app.use('/dist', express.static(path.join(__dirname, '/dist')));
This will force express to serve those static assets under the '/dist' route.