I have built an Angular.js quiz app by following a video. I don't understand the workings of the app yet, but it works fine with Mozilla Developer Edition, not with other browsers because I run it locally. My app's root directory contains the main HTML file, a JSON file, a folder for the CSS file, a folder for the images, and a folder for Angular.js files.
When I try to deploy the app to Heroku, it gives me an error message saying 'No default language could be detected'. It has something to do with build packs. I am unable to figure it out. Here is the link to my repo on GitHub:
My repo on GitHub
Heroku supports node server so create a basic node server for your angular application
Install NodeJS and type npm init from project folder to initialise the package.json file.
Install these packages gzippo, express, morgan. Run this command from terminal.
npm install --save gzippo express morgan
server.js
var gzippo = require('gzippo');
var express = require('express');
var morgan = require('morgan');
var app = express();
app.use(morgan('dev'));
app.use(gzippo.staticGzip("" + __dirname + "/"));
app.listen(process.env.PORT || 5000);
Create a Procfile (remember file without any extension)
Procfile
web: node server.js
Now try deploying your branch on Heroku
Related
I have a node.js app that is running fine when I do npm run dev (using nodemon) on my localhost. However when I deploy to heroku, it crashes every time.
I get an H10 error every time as well as this error:
Error: Cannot find module '../models/User'
I've tried all the usual remedies: my port is correct
const PORT = process.env.PORT || 5000;
I added a Procfile
I removed all my node_modules and put them in .gitignore
Yet I still get the crash.
I believe the line of code the error is referencing is in one of my routes, which is in the file index.js
const express = require('express');
const router = express.Router();
const { ensureAuthenticated } = require('../config/auth');
const mongoose = require('mongoose');
const User = require('../models/User'); //Line I believe is the issue
I need that line in order for my app to execute properly. Anyone have any suggestions?
EDIT- FOLDER STRUCTURE:
>config
>models
>User.js
>node_modules
>public
>routes
>index.js
>users.js
>views
>app.js
>package-lock.json
>package.json
>Procfile
I think the problem was due to case sensitivity and file nameing. Mac OS X is case insensitive (but aware) whereas Heroku is based on Linux and is case sensitive.
You can try rename User.js to user.js.
By running heroku run bash from your terminal, then ls ./models/, you can see how the /models folder appeared on Heroku's file system.
You need app.yaml file in your root folder.
env: flex
runtime: nodejs
api_version: '1.0'
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
I have tried opening my server.js file multiple times as well as a test file i named helloworld.js in cmd as well as gitbash and gitcmd. Everytime I am returned with some sort of error whether it is a syntax:
or a cannot find module socket.io error
I have tried many things and ways including downloading gitbash and trying it there. I am fully new to any coding or dev and have read all of the other 20+ psots regarding the same thing but none of them seemed to have been resolved or documented?
Thank you
In your first attempt:
node server.js is a command you are expected to run on your shell (bash, Windows Power Shell, etc). It launches Node.js and tells it to run the server.js module.
You are running node at the shell, which launches node and presents you with a REPL. You are then trying to run node server.js as if it were JavaScript (which it isn't, because it is shell).
Where you are currently typing node, instead type node server.js.
In your second attempt:
You are trying to load a module called socket.io, but it is not installed. You have to install it first.
Look at the getting started guide for Socket.io.
It tells you how to set up a package manifest:
First let’s create a package.json manifest file that describes our
project. I recommend you place it in a dedicated empty directory (I’ll
call mine chat-example).
{
"name": "socket-chat-example",
"version": "0.0.1",
"description": "my first socket.io app",
"dependencies": {}
}
and install modules while recording them as dependancies for your package:
During development, socket.io serves the client automatically for us,
as we’ll see, so for now we only have to install one module:
npm install --save socket.io
If you have not already, go through the Getting Started guide on the Socket.io website. From the guide:
Make sure you have Node along with npm installed
Perform an npm init to initialize your project
perform an npm install --save express
perform npm install --save socket.io
When you want to run your Node app, do node server.js
Here is an example of what a correctly-formatted Socket.io server file should look like:
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/', function(req, res){
res.sendFile(__dirname + '/index.html');
});
io.on('connection', function(socket){
console.log('a user connected');
});
http.listen(3000, function(){
console.log('listening on *:3000');
});
Make sure you have this in your client HTML file:
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
</script>
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