Heroku is giving me a 503 and I don't know why - node.js

So Heroku displays my front end fine, but when I make a call to my back end it only returns a 503 and I've had no luck with google finding an answer to my problem.
Here's my server
const restify = require('restify');
const mongoose = require('mongoose')
const db = mongoose.connection
const router = require('./routes')
let PORT = process.env.PORT || process.env.VUE_APP_HOST
require('dotenv').config()
const server = restify.createServer({
name: 'myapp',
version: '1.0.0'
})
server.use(restify.plugins.acceptParser(server.acceptable))
server.use(restify.plugins.queryParser());
server.use(restify.plugins.bodyParser());
router.applyRoutes(server)
const uri = process.env.SERVER
mongoose.connect(uri, {
useNewUrlParser: true,
useUnifiedTopology: true,
useCreateIndex:true
},
() => console.log('Database connected'))
db.on('error', console.error.bind(console, 'connection error:'));
db.once('open', function () {
// we're connected!
console.log('mongoose is connected')
})
server.get('/*', restify.plugins.serveStatic({
directory: './dist',
default: 'index.html',
}));
server.listen(PORT, function () {
console.log('%s listening at %s', server.name, server.url);
});
Here is my log file
-----> Node.js app detected
-----> Creating runtime environment
NPM_CONFIG_LOGLEVEL=error
NODE_ENV=production
NODE_MODULES_CACHE=true
NODE_VERBOSE=false
-----> Installing binaries
engines.node (package.json): 13.8.0
engines.npm (package.json): unspecified (use default)
Resolving node version 13.8.0...
Downloading and installing node 13.8.0...
Using default npm version: 6.13.6
-----> Restoring cache
- node_modules
-----> Installing dependencies
Installing node modules (package.json + package-lock)
audited 19449 packages in 12.185s
46 packages are looking for funding
run `npm fund` for details
found 13 vulnerabilities (11 low, 2 moderate)
run `npm audit fix` to fix them, or `npm audit` for details
-----> Build
Running build
> quiz#0.1.0 build /tmp/build_1b1e8d06246614eaf4f8c73b7396ab26
> vue-cli-service build
- Building for production...
WARNING Compiled with 2 warnings9:31:34 PM
warning
asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
css/chunk-vendors.f2de1e82.css (291 KiB)
js/chunk-vendors.25e54ca6.js (249 KiB)
warning
entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
app (550 KiB)
css/chunk-vendors.f2de1e82.css
js/chunk-vendors.25e54ca6.js
css/app.83b7036f.css
js/app.d2d7e1c2.js
File Size Gzipped
dist/js/chunk-vendors.25e54ca6.js 249.22 KiB 83.71 KiB
dist/js/chunk-322ddd76.30a6d833.js 84.76 KiB 22.35 KiB
dist/js/chunk-7a6727f2.c0631d11.js 21.09 KiB 6.60 KiB
dist/js/chunk-fd105068.4e2b7450.js 20.63 KiB 5.84 KiB
dist/js/chunk-5e9478d9.aa473c10.js 11.85 KiB 3.72 KiB
dist/js/app.d2d7e1c2.js 9.00 KiB 3.59 KiB
dist/js/chunk-ef9ba634.75ba4138.js 4.23 KiB 1.78 KiB
dist/js/chunk-20b8df38.167c1cfd.js 2.49 KiB 1.09 KiB
dist/js/chunk-2d0ac3bd.a6df4124.js 2.18 KiB 1.05 KiB
dist/js/chunk-2d20ec06.bc0797f6.js 1.77 KiB 0.92 KiB
dist/js/chunk-beee9c80.2f37298d.js 1.37 KiB 0.64 KiB
dist/js/chunk-2d230542.1693dee0.js 1.23 KiB 0.73 KiB
dist/css/chunk-vendors.f2de1e82.css 291.44 KiB 32.34 KiB
dist/css/chunk-fd105068.ee4c284f.css 35.29 KiB 4.49 KiB
dist/css/chunk-322ddd76.fa9ee5dc.css 24.36 KiB 3.88 KiB
dist/css/chunk-beee9c80.0670aa22.css 9.98 KiB 1.31 KiB
dist/css/chunk-5e9478d9.6c52e948.css 8.44 KiB 1.71 KiB
dist/css/chunk-7a6727f2.e044490b.css 3.71 KiB 1.00 KiB
dist/css/chunk-20b8df38.c7315fda.css 0.89 KiB 0.35 KiB
dist/css/app.83b7036f.css 0.03 KiB 0.05 KiB
Images and other types of assets omitted.
DONE Build complete. The dist directory is ready to be deployed.
INFO Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
-----> Caching build
- node_modules
-----> Pruning devDependencies
removed 1037 packages and audited 444 packages in 13.024s
13 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
-----> Build succeeded!
-----> Discovering process types
Default types for buildpack -> web
-----> Compressing...
Done: 50.5M
-----> Launching...
Released v46
https://quizzor.herokuapp.com/ deployed to Heroku
I cannot find any info on how to resolve this. When I run my server locally everything is fine, but Heroku just seems to hate me.

I went to my mongodb atlas page and whitelisted every IP address. I then set my DB connection string to a variable within Heroku.

Related

localhost:3000 doesn't display anything when run in Docker container [duplicate]

This question already has answers here:
Docker container doesn't publish port as expected when started with webpack-dev-server
(2 answers)
Closed 6 months ago.
I’m trying to dockerize a MERN stack app, here’s the code in my client directory Dockerfile
FROM node:16
WORKDIR /usr/src/douban
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
ENV NODE_ENV=development
CMD ["npm","start"]
I build the image and run the container using the command
$ docker build -t douban-client .
$ docker run -p 3000:3000 -d douban-client
I use ‘docker ps’ and ‘docker logs’ command to test the running container, the output shows it runs successfully. However, when I open localhost:3000, it shows ‘This page isn’t working. localhost didn’t send any data.’
Can anyone tell me what’s wrong? really appreciate your help.
run docker ps:
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
8cde2b46c18a douban-client "docker-entrypoint.s…" About a minute ago Up About a minute 0.0.0.0:3000->3000/tcp heuristic_wescoff
run docker logs:
> my-app#0.1.0 start
> cross-env NODE_ENV=development webpack-dev-server --config ./build/config/webpack.dev.js
ℹ Compiling STARTING
✔ STARTING: Compiled successfully in 9.08s
assets by path public/ 42.3 KiB
assets by path public/*.png 19.3 KiB
asset public/follower.png 8.86 KiB [emitted] [from: public/follower.png] [copied]
asset public/systemprompt.png 6.16 KiB [emitted] [from: public/systemprompt.png] [copied]
asset public/message.png 4.32 KiB [emitted] [from: public/message.png] [copied]
asset public/defaultAvatar.webp 17 KiB [emitted] [from: public/defaultAvatar.webp] [copied]
asset public/favicon.ico 3.5 KiB [emitted] [from: public/favicon.ico] [copied]
asset public/index.html 2.1 KiB [emitted] [from: public/index.html] [copied]
asset public/manifest.json 322 bytes [emitted] [from: public/manifest.json] [copied]
<w> [webpack-dev-server] "hot: true" automatically applies HMR plugin, you don't have to add it manually to your webpack configuration.
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://127.0.0.1:3000/
<i> [webpack-dev-server] Content not from webpack is served from '/usr/src/douban/public' directory
<i> [webpack-dev-server] 404s will fallback to '/'
asset public/robots.txt 67 bytes [emitted] [from: public/robots.txt] [copied]
assets by path js/*.js 11.1 MiB
asset js/app.js 11.1 MiB [emitted] (name: app)
asset js/node_modules_web-vitals_dist_web-vitals_js.js 13.1 KiB [emitted]
asset index.html 2.14 KiB [emitted]
orphan modules 905 KiB [orphan] 553 modules
runtime modules 30.1 KiB 18 modules
modules by path ./node_modules/ 3.32 MiB 751 modules
modules by path ./src/ 247 KiB
modules by path ./src/views/ 118 KiB 26 modules
modules by path ./src/components/ 47.9 KiB 20 modules
modules by path ./src/app/ 14.4 KiB 8 modules
modules by path ./src/api/*.ts 43.3 KiB 8 modules
modules by path ./src/lib/ 8.37 KiB 7 modules
modules by path ./src/styles/ 4.21 KiB 4 modules
modules by path ./src/routes/*.tsx 7.03 KiB 3 modules
modules by path ./src/*.tsx 1.42 KiB 2 modules
./src/reportWebVitals.ts 517 bytes [built] [code generated]
./src/providers/index.tsx 1.49 KiB [built] [code generated]
webpack 5.74.0 compiled successfully in 9067 ms
Type-checking in progress...
ℹ Compiling STARTING
✔ STARTING: Compiled successfully in 659.51ms
assets by status 55.5 KiB [cached] 9 assets
assets by status 11.1 MiB [emitted]
assets by chunk 11.1 MiB (name: app)
asset js/app.js 11.1 MiB [emitted] (name: app)
asset app.6e417c1d373746eb7ad3.hot-update.js 847 bytes [emitted] [immutable] [hmr] (name: app)
asset index.html 2.14 KiB [emitted]
asset app.6e417c1d373746eb7ad3.hot-update.json 27 bytes [emitted] [immutable] [hmr]
Entrypoint app 11.1 MiB = js/app.js 11.1 MiB app.6e417c1d373746eb7ad3.hot-update.js 847 bytes
cached modules 4.44 MiB [cached] 1384 modules
runtime modules 30.1 KiB 18 modules
webpack 5.74.0 compiled successfully in 661 ms
Type-checking in progress...
No errors found.
No errors found.
I use webpack-dev-server, and I expose the host and post in the webpack config. My npm start script looks like this
"start": "cross-env NODE_ENV=development webpack-dev-server --config ./build/config/webpack.dev.js"
webpack.dev.js:
const webpack = require("webpack")
const { merge } = require("webpack-merge")
const common = require("./webpack.common")
const SERVER_HOST = "127.0.0.1"
const SERVER_PORT = 3000
module.exports = merge(common, {
mode: "development",
devtool: "eval-source-map",
devServer: {
host: SERVER_HOST,
port: SERVER_PORT,
compress: true,
open: true,
hot: true,
historyApiFallback: {
index: "/",
},
headers: {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
"Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization",
},
},
plugins: [new webpack.HotModuleReplacementPlugin()],
})
It looks like you're using webpack-dev-server:
<i> [webpack-dev-server] Loopback: http://127.0.0.1:3000/
By default, the dev server runs on 127.0.0.1 to enable accessing localhost:XXXX on browsers. But this does not expose the content outside of a Docker container. You need the dev server to use 0.0.0.0 in order to be reachable from outside the container.
Depending on how you start your dev server, modify it to set the host to 0.0.0.0. Example:
"start": "webpack-dev-server --host 0.0.0.0 --port 3000"
Edit:
Or you can keep your npm start script the same but update your webpack.dev.js:
const SERVER_HOST = "0.0.0.0"
Source: https://dev.to/ku6ryo/run-webpackdevserver-in-docker-1mg5

Microsoft Office Addin Deployment with Nginx

I developed a Microsoft add-in and then build it and got the following result.
> office-addin-taskpane-js#0.0.1 build
> webpack --mode production
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist#latest --update-db
Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating
assets by status 97.3 KiB [cached] 4 assets
assets by status 178 KiB [compared for emit]
assets by path assets/*.png 31.5 KiB 7 assets
assets by path *.js 133 KiB
asset polyfill.js 129 KiB [compared for emit] [minimized] (name: polyfill) 1 related asset
asset taskpane.js 2.97 KiB [compared for emit] [minimized] (name: taskpane) 1 related asset
asset commands.js 597 bytes [compared for emit] [minimized] (name: commands) 1 related asset
assets by path *.xml 12.3 KiB
asset manifest.prod.xml 4.12 KiB [compared for emit] [from: manifest.xml] [copied]
asset manifest_excel.prod.xml 4.12 KiB [compared for emit] [from: manifest_excel.xml] [copied]
asset manifest_word.prod.xml 4.12 KiB [compared for emit] [from: manifest_word.xml] [copied]
assets by path *.html 1.49 KiB
asset taskpane.html 1.18 KiB [compared for emit]
asset commands.html 313 bytes [compared for emit]
runtime modules 442 bytes 2 modules
modules by path ./node_modules/core-js/modules/*.js 222 KiB 219 modules
modules by path ./node_modules/core-js/internals/*.js 147 KiB 160 modules
modules by path ./src/ 7.83 KiB
./src/taskpane/taskpane.js 6.77 KiB [built] [code generated]
./src/commands/commands.js 1.06 KiB [built] [code generated]
./node_modules/core-js/stable/index.js 102 bytes [built] [code generated]
./node_modules/regenerator-runtime/runtime.js 24 KiB [built] [code generated]
./node_modules/core-js/es/index.js 8.89 KiB [built] [code generated]
./node_modules/core-js/web/index.js 398 bytes [built] [code generated]
webpack 5.53.0 compiled successfully in 4035 ms
Now I want to deploy it using Nginx. I am using the below formula but am unable to do so.
server {
listen 80;
server_name exceladdin.test.com;
root /home/rhythm/excel_addin;
location / {
try_files $uri /src/ /node_modules/core-js/modules/*.js /node_modules/core-js/internals/*.js /node_modules/core-js/stable/index.js /node_modules/core-js/regenerator-runtime/runtime.js /node_modules/core-js/es/index.js /node_modules/core-js/web/index.js /src/taskpan/taskpan.* /src/commands/commands.* /assets/*.;
proxy_http_version 1.1;
proxy_cache_bypass $http_upgrade;
}
}
Please provide me a solution on how could I deploy this node js Microsoft add-in with Nginx.
Thank you.
While I was building the project dist directory was created. Then I just map those things with Nginx.
server {
listen 80;
server_name exceladdin.test.com;
root /home/rhythm/excel_addin/dist;
location / {
try_files $uri $uri/ =404;
proxy_http_version 1.1;
proxy_cache_bypass $http_upgrade;
autoindex on;
autoindex_exact_size off;
}
}
There need to map js/CSS files correctly in the taskpan.html file after building the project because in the dist directory taskpan.html is not correctly renamed. You may need to change those js/CSS file names in the taskpan.html file. You may also need an SSL certificate to access this from your Microsoft office app.
You may also need to edit the manifest file.

new angular 8 application return http 400

I am facing a strange error. I am creating new clean angular 8 app and successfully built code but try to open application at localhost:4200 (or any port I changed to) app return http 400
I have added build info. Uninstall node js and re-install it and still same
10% building 3/3 modules 0 activei 「wds」: Project is running at http://localhost:4200/webpack-dev-server/
i 「wds」: webpack output is served from /
i 「wds」: 404s will fallback to //index.html
chunk {main} main.js, main.js.map (main) 49.4 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 264 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 10.1 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 4.08 MB [initial] [rendered]
Date: 2019-10-21T10:00:41.976Z - Hash: 8acb354556900c2f8710 - Time: 9192ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
i 「wdm」: Compiled successfully.
May be there is something in your server.js file in nodejs app. Are you allowing requests from all urls ? You need to enable Cross Origin Resource Sharing.

localhost:4200 not working for my angular app

Till yesterday, everything was working good. Using cmd, I type ng serve, go to my browser type localhost:4200 and my website fires up.
Suddenly today, the localhost is not responding. The ng serve is working properly.
Output after typing ng-serve-
10% building 3/3 modules 0 activei 「wds」: Project is running at http://localhost:4200/webpack-dev-server/
i 「wds」: webpack output is served from /
i 「wds」: 404s will fallback to //index.html
chunk {main} main.js, main.js.map (main) 47.8 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 264 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 9.7 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.81 MB [initial] [rendered]
Date: 2019-09-05T04:20:41.402Z - Hash: a7331d4e748902ef88b7 - Time: 19033ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
I tried different browsers, tried reinstalling angular, still the problem persists.
The message that I get on my browser is - This site can't be reached.
You can try changing your host and your port, something like this:
ng serve --host 0.0.0.0 --port 5000
Maybe it will help...
With ng serve instead of opening the URL with http://localhost:4200 open with http://0.0.0.0:4200 .
Ok I found the problem.
After Windows Update, the Firewall Settings were messed up. I restored the default settings and now it's working fine.
Moral of the Story: Use Linux!
Before starting your app making every time first compile.
Steps.
Go to your file location in CMS.
And type ng serve and wait.
Then go to localhost:4200

Running an Angular2 app on EC2

I'd like to run a basic Angular 2 app on an Ubuntu EC2 instance.
In my case, I installed Angular CLI, and created a new site in /var/www
ng new test
then
ng serve --port 8080
It looks like my basic Angular2 app is running fine
** NG Live Development Server is listening on localhost:8080, open your browser on http://localhost:8080 **
Hash: e0094cf33de0e6b8f264
Time: 9090ms
chunk {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 171 kB {4} [initial] [rendered]
chunk {1} main.bundle.js, main.bundle.js.map (main) 5.28 kB {3} [initial] [rendered]
chunk {2} styles.bundle.js, styles.bundle.js.map (styles) 10.5 kB {4} [initial] [rendered]
chunk {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.18 MB [initial] [rendered]
chunk {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]
webpack: Compiled successfully.
I know port 8080 is open in my security groups, because I just ran a basic Node JS app a few minutes ago in /var/www. When I try to go to http://[Public DNS]:8080, Safari says it can't connect. There's also nothing in my apache logs.
Turns out the real issue is this:
https://github.com/angular/angular-cli/issues/6070
I've tried editing the server.js file and running with the --publicHost option, but those aren't working. I'm using non CLI Angular with the default port 3000 and that's working on EC2 (after adding the security group settings).

Resources