I'me trying to deploy a built vue.js on a node.js server with only ftp.
So my build app is like this :
dist/
- js/
- css/
- index.html
I have tried to build package.json and server.js file.
package.json :
{
"name": "name",
"version": "0.1.0",
"scripts": {
"start": "node server.js"
},
"dependencies": {
}
}
server.js
const express = require('express');
const path = require('path');
const app = express(),
port = 80;
app.use(express.static(path.join(__dirname, '/dist')));
app.get('/', (req,res) => {
res.sendFile(path.join(__dirname, '/dist/index.html'));
});
app.listen(port, () => {
console.log(`Server listening on the port::${port}`);
});
And on my ftp files are like this :
default/
- dist/
- node_modules/
- server.js
- package.json
- package-lock.json
I do not have ssh access to the server. Do someone have any idea on how to deploy my app.
Related
I have created simplest nodeJS app and it running locally, but not on OpenShift.
I use Import from Git and the code imported and build successfully.
When I click Open URL in my app, it show "Application is not available" page.
index.js:
const express = require('express');
const http = require('http');
const app = express();
const server = http.createServer(app);
app.get('/', (req, res) => {
res.send('Hello from Node.js Starter Application!');
});
const PORT = process.env.PORT || 8000;
server.listen(PORT, () => {
console.log(`App started on PORT ${PORT}`);
});
package.json:
{
"scripts": {
"start": "node index.js",
},
"dependencies": {
"express": "^4.18.2",
}
}
The most last from logs:
> node index.js
App started on PORT 8000
What I have missed to successfully run my server on OpenShift?
Thank you
First time I´m setting a server to host a PWA. After load basic NodeJS file I am facing problem to see the picture under the images/user folder.
Error -> Cannot GET /images/user/default_user_pic.png
Folder structure
Public
|-index.html
|-node_modules
|-images
|-user
| |-default_user_pic.png
|-channel
NodeJs
var express = require('express');
var app = express();
const path = require('path')
app.use(express.static(path.join(__dirname + '/public')));
app.get('/', function (req, res) {
res.sendFile(__dirname + '/index.html');
});
var port = 3000;
app.listen(port);
console.log('Umbler - Express server started on port %s', port);
package.json
{
"name": "temporarysite",
"version": "1.0.0",
"description": "Nodejs temporary site",
"author": "test",
"main": "app.js",
"scripts": {
"start": "node app"
},
"dependencies": {
"express": "4.x.x"
}
}
I'm trying to push github repo LargeGroupVideoChat-Web-Webpack to Heroku.
Locally it works fine, with these scripts in package.json file:
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --config ./scripts --mode development",
"build": "cross-env NODE_ENV=production webpack --config ./scripts --mode production"},
And webpack settings in index.js file:
module.exports = {
entry: {
index: "./src/index.js",
},
devtool: "inline-source-map",
module: loaders,
plugins,
resolve: {
extensions: [ ".js" ],
},
output: {
filename: "[name].[hash].js",
path: path.resolve(__dirname, distPath),
}, ...
However, after pushing to Heroku it crashes with error. I added server.js file with this code:
const express = require('express');
const path = require('path');
const port = process.env.PORT || 8080;
const app = express();
// the __dirname is the current directory from where the script is running
app.use(express.static(__dirname));
// send the user to index html page inspite of the url
app.get('*', (req, res) => {
res.sendFile(path.resolve(__dirname, 'index.html'));
});
app.listen(port);
It runs ok, but it only serves index.html file, and webpack bundle is not linked. Is there a fast way to push the app to Heroku? Or I have to rewrite webpack settings somehow?
Ok, the server.js file solved the problem (from another repo):
var path = require('path');
var express = require('express');
var app = express();
app.use(express.static(path.join(__dirname, 'dist')));
app.set('port', process.env.PORT || 8080);
var server = app.listen(app.get('port'), function() {
console.log('listening on port ', server.address().port);
});
I'm trying to deploy my web application, that has my client and server at the same main folder, to Heroku and I face some annoying problem that the server isn't serving the react build folder.
Here's my project folder tree:
/client
/api
app.js
server.js
app.js => routes, loading models, controllers, etc
server.js => server configuration
Here's the content of server.js, I believe the problem is here
const app = require('./app');
const path = require('path');
const cors = require('cors');
const express = require('express');
app.use(cors())
if (process.env.NODE_ENV === "production") {
console.log('we are on production!')
app.use(express.static('./client/build'));
app.get('*', (req, res) => {
console.log('redirecting to react app build')
res.sendFile(path.resolve(__dirname, "client", "build", "index.html"))
});
}
const port = process.env.PORT || 5000;
app.listen(port, () => console.log(`Listening on PORT ${port}`))
It never gets to the console.log('redirecting to the react app build') part
When I entered my heroku server I face the server side instead of my react build. why is that so?
I've just created a test project using your architecture. My project is running and uploaded on Heroku right now. I'm gonna detail all steps I just do to make it works according to given information.
So my project architecture :
client/ // from CRA
package.json
server.js
.env
Configure your environment variable :
heroku config:set NODE_ENV=production // this for production heroku
In my .env file I set local environment variables such as :
NODE_ENV=production
Here's my main package.json file which I defined a heroku-postbuild to create the client build folder.
{
"name": "foo",
"version": "1.0.0",
"main": "index.js",
"license": "mit",
"dependencies": {
"cors": "2.8.5",
"express": "4.17.1",
"path": "0.12.7"
},
"scripts": {
"start": "node server.js",
"heroku-postbuild": "cd client && yarn && yarn build"
}
}
And the server.js file, almost the same as the one provided
const path = require('path');
const cors = require('cors');
const express = require('express');
const app = express()
app.use(cors())
if (process.env.NODE_ENV === "production") {
console.log('we are on production!')
app.use(express.static('client/build'));
app.get('*', (req, res) => {
console.log('redirecting to react app build')
res.sendFile(path.resolve(__dirname, "client", "build", "index.html"))
});
}
const port = process.env.PORT || 5000;
app.listen(port, () => console.log(`Listening on PORT ${port}`))
You can run Heroku in local by typing this command heroku local in will loaded the .env file with environment variables.
To test production Heroku you have to type heroku open. Don't forget to set up "production" environment variable with command I wrote above.
Everything's working fine. I can upload my code to Github if you want me to.
I would like to run my app with express on a Node server.
My server.js file:
var express = require('express');
var path = require('path');
var app = express();
app.get('/', (req, res) => {
res.sendFile(path.resolve('dist/my-app/index.html'))
});
app.listen(80, () => {
console.log('Server started!')
})
But when I'm trying to view my website on localhost nothing appears. Can you help me?
Hope this would help you.
1) Run:
ng build --prod
This will create a dist folder. Used for production.
2) Run:
npm install --save express
To install express and save it as dependency in the project.
3) Create a file in root: ./server.js
4) Copy this code. Don't forget to modify with your name project
const express = require('express');
const http = require('http');
const path = require('path');
const app = express();
const port = process.env.PORT || 3001;
app.use(express.static(__dirname + '/dist/my-app-name'));
app.get('/*', (req, res) => res.sendFile(path.join(__dirname)));
const server = http.createServer(app);
server.listen(port, () => console.log(`App running on: http://localhost:${port}`));
5) To run the server.js file
node server.js
I found a solution !
const express = require('express');
const app = express();
const path = require('path');
const fs = require('fs');
const port = process.env.NODE_PORT || 3000;
const root = path.join(__dirname, 'dist', 'my-app');
app.get('*' ,function(req, res) {
fs.stat(root + req.path, function(err){
if(err){
res.sendFile("index.html", { root });
}else{
res.sendFile(req.path, { root });
}
})
});
app.listen(port);
console.log('Listening on port '+ port);
You can do this in just very few steps...
1). Run ng build --prod (If you get budgets error than increase the budget in angular.json file according to the error)
2). After above command, a dist folder will be generated containing your project folder, move this project folder which is present inside dist folder from angular project in to your node project say inside public folder (public/your_build_angular_project).
3). Now in your node main file say index.js or app.js, include these lines
const path = require('path');
app.use('/', express.static(path.join(__dirname, 'public/your_build_angular_project')));
4). Now serve your node server then when you hit it, you will get your angular project running
Hope this will help you or somebody else! Thanks.
Sample angularjs app directory is here :
AngularApp->myApp->
AngularApp->myApp->controllers
AngularApp->myApp->views
AngularApp->myApp->services
AngularApp->myApp->app.js
AngularApp->myApp->index.html
Create a package.json file and insert below code in it:
(Location : AngularApp->package.json)
{
"name": "myApp",
"version": "0.0.1",
"description": "My Project",
"dependencies": {
"express": "*"
},
"engine": "node >=0.6.x",
"scripts": {
"start": "node server.js"
},
"main": "server.js",
"repository": {
"type": "git",
"url": ""
},
"author": "myApp",
"license": "myApp",
"bugs": {
"url": ""
},
"homepage": "/"
}
Create server.js:
(Location: AngularApp->server.js )
var express = require('express');
var app = express();
app.use(express.static("myApp")); // myApp will be the same folder name.
app.get('/', function (req, res,next) {
res.redirect('/');
});
app.listen(8080, 'localhost');
console.log("MyProject Server is Listening on port 8080");
Run commnad 'npm install' after navigating to package.json file.
Run command 'npm start'. Open a browser and hit localhost:8080/