Can't Figure Out How to Deploy MERN Stack Application to Render. "Failed" After Build But No Error Given - deployment

Previous Heroku user here. I'm forced to try other deployment options due to Heroku removing their Free Tier a few months back. I've deployed a few MERN stack applications to Heroku in the past, but I'm having trouble figuring out how to deploy to render.com. Currently I have my app I'm trying to deploy (here) working perfectly in my local environment, but fails when I try deploying to Render as a Web Service. This is the log I get when trying to deploy:
Jan 18 07:20:13 PM ==> Cloning from https://github.com/tgoandrex/wheres-waldo...
Jan 18 07:20:14 PM ==> Checking out commit 3ccd89a93398215a5b71d9b3bd65ac89f461fc15 in branch main
Jan 18 07:20:20 PM ==> Running build command 'npm build'...
Jan 18 07:20:21 PM ==> Generating container image from build. This may take a few minutes...
Jan 18 07:21:42 PM ==> Uploading build...
Jan 18 07:22:11 PM ==> Build uploaded in 22s
Jan 18 07:22:12 PM ==> Build successful 🎉
Jan 18 07:22:12 PM ==> Deploying...
After "Deploying..." it just stays there forever and above that it just says "Failed" with no further information. I cannot find any good documents on MERN stack deployment for Render. Is there a way of making this work or should I try another free option elsewhere that provides better support for MERN stacks?
Settings on Render:
Build Command: npm build
Start Command: npm start
package.json:
{
"name": "wheres_waldo",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"body-parser": "^1.20.1",
"concurrently": "^7.6.0",
"cors": "^2.8.5",
"express": "^4.18.2",
"mongodb": "^4.13.0",
"mongoose": "^6.8.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.4.2",
"react-scripts": "^5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "concurrently \"react-scripts start\" \"cd server && node server.js\"",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"dotenv": "^16.0.3"
}
}

Related

Sanity Deployment on Vercel Issue: Cannot find module 'sanity' even though package is installed

So i'm trying to deploy sanity/nextjs on vercel. It runs fine locally but for the production build I keep getting the same error.
Here's the main error:
> build
> next build
info - Linting and checking validity of types...
Failed to compile.
./sanity/sanity.config.ts:1:28
Type error: Cannot find module 'sanity' or its corresponding type declarations.
> 1 | import {defineConfig} from 'sanity'
| ^
2 | import {deskTool} from 'sanity/desk'
3 | import {visionTool} from '#sanity/vision'
4 | import {schemaTypes} from './schemas'
Error: Command "npm run build" exited with 1
My sanity package.json:
{
"name": "nft-drop",
"private": true,
"version": "1.0.0",
"main": "package.json",
"license": "UNLICENSED",
"scripts": {
"dev": "sanity dev",
"start": "sanity start",
"build": "sanity build",
"deploy": "sanity deploy",
"deploy-graphql": "sanity graphql deploy"
},
"keywords": [
"sanity"
],
"dependencies": {
"#sanity/vision": "^3.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-is": "^18.2.0",
"sanity": "^3.0.0",
"styled-components": "^5.2.0"
},
"devDependencies": {
"#sanity/cli": "^3.2.3",
"#sanity/eslint-config-studio": "^2.0.1",
"eslint": "^8.6.0",
"prettier": "^2.8.3",
"typescript": "^4.0.0"
},
"prettier": {
"semi": false,
"printWidth": 100,
"bracketSpacing": false,
"singleQuote": true
}
}
My main folder package.json:
{
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"#next/font": "^13.1.2",
"#sanity/image-url": "^1.0.1",
"#thirdweb-dev/react": "^3.6.9",
"#thirdweb-dev/sdk": "^3.6.9",
"ethers": "^5.7.2",
"next": "latest",
"next-sanity": "^4.0.6",
"react": "18.2.0",
"react-dom": "18.2.0"
},
"devDependencies": {
"#sanity/cli": "^3.2.3",
"#types/node": "18.11.3",
"#types/react": "18.0.21",
"#types/react-dom": "18.0.6",
"autoprefixer": "^10.4.12",
"postcss": "^8.4.18",
"tailwindcss": "^3.2.4",
"typescript": "4.9.4"
}
}
Thanks for your help.
I've checked that I have the 'sanity' package installed. I've added the recommended 'vercel.json' file and I also have the #sanity/cli installed. I've checked my local env setup to make sure that was also on vercel.
Maybe i've overinstalled the sanity packages in trying to solve it?
This is my first time using sanity, nextjs, and vercel so I've run out of ideas and haven't found the same issue answered elsewhere yet.
I had this issue as well, and it seems to be related to Sanity v3 which only came out a month ago - I rolled back to sanity v2 and it fixed the deployment issue
You can try to add .vercelignore in the root file and add sanity in there to ignore the whole folder
The fix is to move your sanity client config file (aka wherever you have your .env variables setup - in my case: sanity.ts) into a lib folder in the root directory. If the file itself is in the root directory, it will not build.
Updating the import statement from
import {defineConfig} from 'sanity'
to
import {defineConfig} from 'sanity/lib/exports'
worked for me.

build and install word officejs add ins

i have developed a task pane word addin with yo and js
the thing is when i built it i have html files and manifest.xml file but i don't know how to install these files inside word (windows)
i used this command from package.json:
npm run build
my package.json
{
"name": "office-addin-taskpane-js",
"version": "0.0.1",
"repository": {
"type": "git",
"url": "https://github.com/OfficeDev/Office-Addin-TaskPane-JS.git"
},
"license": "MIT",
"config": {
"app_to_debug": "word",
"app_type_to_debug": "desktop",
"dev_server_port": 3000
},
"scripts": {
"build": "webpack --mode production",
"build:dev": "webpack --mode development",
"dev-server": "webpack serve --mode development",
"lint": "office-addin-lint check",
"lint:fix": "office-addin-lint fix",
"prettier": "office-addin-lint prettier",
"start": "office-addin-debugging start manifest.xml",
"start:desktop": "office-addin-debugging start manifest.xml desktop",
"start:web": "office-addin-debugging start manifest.xml web",
"stop": "office-addin-debugging stop manifest.xml",
"validate": "office-addin-manifest validate manifest.xml",
"watch": "webpack --mode development --watch"
},
"dependencies": {
"core-js": "^3.9.1",
"regenerator-runtime": "^0.13.7"
},
"devDependencies": {
"#babel/core": "^7.13.10",
"#babel/preset-env": "^7.12.11",
"#babel/preset-typescript": "^7.13.0",
"#types/office-js": "^1.0.180",
"#types/office-runtime": "^1.0.17",
"acorn": "^8.5.0",
"babel-loader": "^8.2.2",
"copy-webpack-plugin": "^9.0.1",
"eslint-plugin-office-addins": "^2.0.0",
"file-loader": "^6.2.0",
"html-loader": "^2.1.2",
"html-webpack-plugin": "^5.3.2",
"office-addin-cli": "^1.3.5",
"office-addin-debugging": "^4.3.8",
"office-addin-dev-certs": "^1.7.7",
"office-addin-lint": "^2.0.0",
"office-addin-manifest": "^1.7.7",
"office-addin-prettier-config": "^1.1.4",
"os-browserify": "^0.3.0",
"process": "^0.11.10",
"source-map-loader": "^3.0.0",
"ts-loader": "^9.2.5",
"typescript": "^4.3.5",
"webpack": "^5.50.0",
"webpack-cli": "^4.8.0",
"webpack-dev-server": "4.7.3"
},
"prettier": "office-addin-prettier-config",
"browserslist": [
"ie 11"
]
}
can anyone help me build it the right way then install it?
thanks
First of all, you need to run the dev server. The scripts section lists available commands you could use for that:
"dev-server": "webpack serve --mode development",
So, you could use the following command line:
npm run dev-server
Then you can launch the host application, the scripts section defines the following entries for that:
"start": "office-addin-debugging start manifest.xml",
"start:desktop": "office-addin-debugging start manifest.xml desktop",
"start:web": "office-addin-debugging start manifest.xml web",
Depending on your choice (whether it is a desktop application or browser) you could choose one to run. For example:
npm run start:desktop
In that case the desktop edition of Excel will be run and the add-in sideloaded.
You can read more about that in the Overview of debugging Office Add-ins article.

Parse error Unexpected token '�' at 1:1 ��{ on flutter app when running firebase deploy

encounter the below message when trying to firebase deploy from root project
Error: Parse Error in ...\firestore.indexes.json
Unexpected token '�' at 1:1
��{
I have a flutter app, upon which I also have a functions folder. Below is the file position:
AppFolder
functions
.eslintrc.js
index.js
package.json
etc
lib
files relative to flutter app
test
test files relative to flutter app
web firestore.indexes.json
firebase.json
etc
I am running on windows 11 in a newly built pc (so maybe sth is missing?), other devs are running on mac, I have changed the EOF sequence to LF on the 3 files of the functions folder, I have also run these two commands inside the functions folder
npm install firebase-functions#latest firebase-admin#latest --save
npm install -g firebase-tools
npm version is 8.1.2
node version is v16.13.1
firestore.indexes.json is:
{
"indexes": [
{
"collectionGroup": "something1",
"queryScope": "COLLECTION",
"fields": [
{
"fieldPath": "created",
"order": "DESCENDING"
},
{
"fieldPath": "something2",
"order": "DESCENDING"
}
]
},
{
"collectionGroup": "something3",
"queryScope": "COLLECTION",
"fields": [
{
"fieldPath": "something4",
"order": "ASCENDING"
},
{
"fieldPath": "something5",
"order": "DESCENDING"
}
]
}
],
"fieldOverrides": []
}
.elslint.js is
module.exports = {
"root": true,
"env": {
es6: true,
node: true,
},
"extends": [
"eslint:recommended",
"google",
],
"rules": {
quotes: ["error", "double"],
},
"parserOptions": {
"ecmaVersion": 2020,
},
};
and package.json is
"name": "functions",
"description": "Cloud Functions for Firebase",
"scripts": {
"lint": "eslint .",
"serve": "firebase emulators:start --only functions",
"shell": "firebase functions:shell",
"start": "npm run shell",
"deploy": "firebase deploy --only functions",
"logs": "firebase functions:log"
},
"engines": {
"node": "14"
},
"main": "index.js",
"dependencies": {
"axios": "^0.24.0",
"device-detector-js": "^3.0.0",
"firebase": "^9.2.0",
"firebase-admin": "^10.0.1",
"firebase-functions": "^3.16.0"
},
"devDependencies": {
"eslint": "^8.1.0",
"eslint-config-google": "^0.14.0",
"firebase-functions-test": "^0.3.3"
},
"private": true
}
Please keep in mind that in an older pc running windows 10 and I can deploy by changing only to the LF and running the above commands.
Just try to make a new text file and copy the content of generated file inside the new one. Then override the new file with firestore.indexes.json
Its obvious that the generated json file has some formatting problem.
I recently had this problem and found that it was resolved by changes to the firebase.json file:
Seek "predeploy":
Delete the code so that the outcome is "predeploy": []
After this, run the firebase deploy function again, and everything should be fine.
Thank you to Max for sharing this solution with me : )

How to host an express page on github using github-pages?

I have been trying to post a simple express based website to Github pages. Previously, I was able to post a react based front-end website, using the "homepage", "predeploy", "deploy" and yarn build command. I understand that the react-scripts build takes care of the "process.env.PORT" and is able to get it, how can I replicate a similar process for an express backend. I have been searching the internet and the web for a while, however, the previous questions, I found them to be outdated. Any help would be greatly appreciated.
The package.json where react works look like this:
{
"name": "test",
"version": "0.1.0",
"private": true,
"homepage": "https://{github_username}.github.io/{github_repo}/",
"dependencies": {
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"gh-pages": "^3.1.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.1",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"predeploy": "yarn build",
"deploy": "gh-pages -d build"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Github pages doesn't allow you to host dynamic content. gh-pages package creates a new branch and uploads static content, making the illusion that it is hosting a React app dynamically, even though it is running HTML, CSS, and only client JS.

Heroku push rejected failed: npm ERR! 404 Not Found: event-stream#3.3.6. This causes a build fail

I am getting the error:
Heroku push rejected failed to define node.js node not defined in package.json
My app works locally, this is an Express MongoDB using handlebars. My gitignore has node_modules in it and the strange part is I am using nodemon and not node.
package.json:
{
"name": "Jukebox",
"version": "1.1.0",
"engines": {
"node": "11.3.0",
"npm": "6.4.1"
},
"private": true,
"scripts": {
"start": "node ./bin/www",
"dev": "nodemon ./bin/www"
},
"dependencies": {
"cookie-parser": "~1.4.3",
"debug": "~2.6.9",
"dotenv": "^6.1.0",
"express": "~4.16.0",
"hbs": "~4.0.1",
"http-errors": "~1.6.2",
"method-override": "^3.0.0",
"mongoose": "^5.3.6",
"morgan": "~1.9.0",
"nodemon": "^1.18.4"
},
"description": "Jukebox is an app where users can add their favorite songs for others to discover. There will be a maximum number of 32 songs that can be added. When user selects genre the artists of that genre will populate the grid and a button will appear to add artist.",
"main": "app.js",
"repository": {
"type": "git",
"url": "git+https://github.com/chuckderosier/Jukebox.git"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/chuckderosier/Jukebox/issues"
},
"homepage": "https://github.com/chuckderosier/Jukebox#readme"
}
You need to specify a Node.js version within your package.json that matches
the runtime you’re developing and testing with.
Do the following:
Within your cmd line type: node --version and see what version of Node you're developing with.
Add an engines section within your package.json specifying your node version from step 1. For example something similar to this:
"engines": {
"node": "10.3.0"
}
For more information checkout the Heroku documentation for Nodejs buildpacks