I have a dist folder containing CSS, fonts, JS folder and an index.html file minimized for Vue.js, ready to deploy and use. I want to use Node.js to run this application. How can I set this up to just run npm run server and have it deployed on a specific port requested? Not sure how to structure this or if I need to build it in a specific way to run this Vue app. Any help would be greatly appreciated.
Since Vue is only a frontend library, the easiest way to host it and do things like serve up assets is to create a simple Express friendly script that you can use to start a mini-web server. Read up quickly on Express if you haven’t already. After that, add express:
npm install express --save
Now add a server.js file to your project’s root directory :
// server.js
var express = require('express');
var path = require('path');
var serveStatic = require('serve-static');
app = express();
app.use(serveStatic(__dirname + "/dist"));
var port = process.env.PORT || 5000;
var hostname = '127.0.0.1';
app.listen(port, hostname, () => {
console.log(`Server running at http://${hostname}:${port}/`);
});
after that you could run :
node server
and your project will be served at the given host and port
Assuming that you have already the dist directory, if you don't have it run :
npm run build
in order to generate it
Related
I have two apps running on heroku, myserverapi(spring boot) and client(Angular app). the server is running on myserver.heroku.com while the client is myclient.heroku.com currently my express server is only serving static files. I am new to express want to know how to make it access my proxy.conf.json file where I have declared the domain it should call. everything works fine locally with Cli but after deployment, it doesn't work.
proxy.Conf.json file below
{
"/api": {
"target": "https://mygramapi.herokuapp.com",
"secure": false,
"changeOrigin": true
}
}
And my express server.js
//Install express server
const express = require('express');
const path = require('path');
const app = express();
// Serve only the static files form the dist directory
app.use(express.static(__dirname + '/dist/mygram'));
app.get('/*', function(req,res) {
res.sendFile(path.join(__dirname +'/src'));
});
console.log(app);
// Start the app by listening on the default Heroku port
app.listen(process.env.PORT || 4000);
my API's all start with /api eg /api/login, /api/signup etc
is there a comprehensive way of handling this
thank you.
express-http-proxy has the solution but i have a few question about it, does it mean i delete the express.js file and how about my static files , im not sure to add this to my existing code, so im accessing both static files and api's
const url = require('url');
const proxy = require('express-http-proxy');
// New hostname+path as specified by question:
const apiProxy = proxy('https://myserverapi.heroku.com', {
forwardPath: req => url.parse(req.baseUrl).path
});
app.use('/api/*', apiProxy);
how do make them all work
Good day!
As you may know, proxy.conf.json can be used only for webpack dev server - this proxy configuration ignores when you've built the prod bundle and just serve it via express server. For your case, I can suggest to check this npm package: https://www.npmjs.com/package/express-http-proxy or try to setup nginx.
I used create-react-app to initialize my React app, and I am now serving the React client app from an Express server.
My app structure is
project/
build/
server/
src/
where my Express server is in server/, my React app is in src/, and the React app gets built to build/ with npm run build.
Because my Express app serves the "built" app (as shown below, serving files from the build/ directory), I need to npm run build every time I change any client code, in order for my browser to reflect the changes.
// server/app.js
const express = require('express');
const path = require('path');
const app = express();
var server = require('http').Server(app);
var io = require('socket.io')(server);
// Serve static assets
app.use(express.static(path.resolve(__dirname, '..', 'build')));
// sockets
require('./sockets')(io);
// serve main file
app.get('*', (req, res) => {
res.sendFile(path.resolve(__dirname, '..', 'build', 'index.html'));
});
module.exports = server;
Since the build step takes many seconds, this is obviously a big step down from when just serving the React app with react-scripts start and having it watch for code changes and instantly reflect them in the browser.
I know I can use NODE_ENV === 'production' to check if I'm on production or development, but given I'm on development, where are the files I should serve instead of the ones in build/?
I.e. perhaps a relevant question is "from where are they being served when I run the React server with react-scripts start"? EDIT: and how are they being watched such that building the source files to that spot is extremely quick?
Most of the react boilerplates use [webpack dev server / browserify] + hot reload in dev mode, so your changes (and only your changes) are compiled on the fly and your browser is refreshed by a watcher.
It's basically a middleware you plug to express like that
var compiler = webpack(webpackConfig)
var devMiddleware = require('webpack-dev-middleware')(compiler, {
publicPath: webpackConfig.output.publicPath,
quiet: true
})
app.use(devMiddleware)
It's done under the hood in your case, the files are written in memory.
I have started a react application using create-react-app and ran the npm run eject script to gain access to all files. I afterwards installed express and created server.js file that sits on same level as package.json file
these are server.js file contents:
const express = require('express');
const app = express;
app.set('port', 3031);
if(process.env.NODE_ENV === 'production') {
app.use(express.static('build'));
}
app.listen(app.get('port'), () => {
console.log(`Server started at: http://localhost:${app.get('port')}/`);
})
Nothing crazy here, just setting up for future api proxies where I need to use secrets and as I don't want to expose my api.
after this I added a "proxy": "http://localhost:3001/" to my package.json file. I am now stuck as I need to figure out how to start my server correctly and use this server.js file in development mode and afterwards in production.
Ideally It would also be good if we could use more that one proxy i.e. /api and /api2
You didn't have to eject to run your server.js. You can just run it with node server.js together with create-react-app.
You can still do npm start even after ejecting to start your dev server.
To run /api1 and /api2, you just have to handle it in your server.js file and it should work just fine. You need to match the port in your server.js and the one in proxy settings inside package.json - in this case, it should be "proxy": "http://localhost:3031"
I am new to node or grunt. I have developed a website using html, css and bootstrap. Now I am confused how to run this site? shall I use nodejs to serve static files or use grunt?
Most of the examples I see use grunt-watch and grunt-serve to serve files. Is watching a file necessary only during development phase and not in production right?
I would also like to minify the files(css,js etc) before I host it. I am from java background where I normally use apache tomcat to deploy and run a webapp, but just for static site I don't want to use tomcat server. How do I go about this?
Note: I am trying to deploy my project on heroku.
As an addition to T.J. Crowder anwer
To serve static html app
npm install -g http-server
http-server ./index.html
To serve nodejs app
npm install -g forever
forever start server.js
To develop static app
//grunt or gulp
//both support watchers, livereaload, minifications, bundling
//google it
To develop nodejs app
express
hapi
meanjs
...many other
Finally got my answer:
Used express js to serve static files
use npm install express --save -dev
and then in the index.js or server.js file:
var express = require('express');
var app = express();
app.set('port', (process.env.PORT || 5000));
app.use(express.static(__dirname + '/public'));
app.get('/', function(request, response) {
response.render('public/');
});
app.listen(app.get('port'), function() {
console.log('Node app is running on port', app.get('port'));
});
So the above line app.use(express.static(__dirname + '/public')); will serve static files like html,css etc from this folder (i.e public)
and then in the command prompt: node index.js will start the server
There might be a very simple solution to this question, but I am not able to find answer online and due to my practice with node I can't figure it out either.
I'm trying to set up a simple server.js file that listens on port 80 and serves /dist/index.html file when users enter root address, so example.com
This is my project structure
dist/
index.html
bundle.js
node-modules/
package.json
server.js
You can create a static server with express:
server.js
var express = require('express');
var app = express();
app.use(express.static(__dirname + '/dist'));
app.listen(8080, function() {
console.log('Listening on port: ' + 80);
});
You simply run node server.js to get the static server. This app can also be deployed.
http-server is a simple method of serving from your file system. Install that, then just run http-server -p X in the command line in your project folder, substituting your port number for X