I build a Node.js REST implementation using this tutorial .And now i am having problems deploying it on heoroku , local works fine .
Heroku logs :
I believe the problem is with my directory structure. The "main" key
of package.json and and the rest endpoints in index.js are not right
Next I was successfully able to deploy my app on Heroku but I am getting the error.My implementation is as follows :
EDIT : I removed the Procfile , compared to shown in following pics ,as I added the "start" key in package.json
Local :
Directory Structure - /webapp is the root directory :
I have package.json file at root directory and /server with different
version (about which i am not sure how they should be actually for my
ngClient and heroku confiurations )
Files contents of root , /webapp :
package.json
{
"name": "web_first_package",
"version": "0.0.0",
"description": "first node package for project storm",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start":"/myRESTApp/server/server.js"
},
"engines": {
"node": "6.9.x",
"npm": "3.10.x"
},
"author": "Divyanshu Jimmy",
"license": "ISC",
"dependencies": {
"body-parser": "^1.15.2",
"express": "^4.14.0",
"jwt-simple": "^0.5.1",
"morgan": "^1.7.0"
}
}
package.json in /myRESTApp/server:
{
"name": "web_first_package",
"version": "0.0.0",
"description": "first node package for project storm",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"engines": {
"node": "6.9.x",
"npm": "3.10.x"
},
"author": "Divyanshu Jimmy",
"license": "ISC",
"dependencies": {
"body-parser": "^1.15.2",
"express": "^4.14.0",
"jwt-simple": "^0.5.1",
"morgan": "^1.7.0"
}
}
Node version : 6.9.2 NPM Version : 3.10.9
Change start script to node ./myRESTApp/server/server.js.
Related
I'm trying to deploy my nextjs app to git hub page. but the production is very slow. and everytime it publishes shows only the read.md. the way I deployed is below.
installed the gh-pages into devDependencies.
added replacer.js with following code..
const replace = require("replace-in-file");
const options = {
//you may need to modify the file address to suite your project
files: "./build/index.html",
from: [/src="\//g, /href="\//g],
to: ['src="./', 'href="./'],
};
(async function () {
try {
const results = await replace(options);
console.log("Replacement results:", results);
} catch (error) {
console.error("Error occurred:", error);
}
})();
updated next.config.js is below
module.exports = {
Images: {
domains: ["/public", "fakestoreapi.com"],
env: {
PUBLIC_URL: "https://imangi.github.io/amazon-clone",
assetPrefix: "./",
},
},
};
updated package.json file is as below.
{
"name": "amazon-clone",
"version": "1.0.0",
"homepage": "https://imangi.github.io/amazon-clone",
"description": "amazon clone with react & next.js",
"main": "index.js",
"scripts": {
"replaceFilePaths": "node replacer.js",
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "next",
"build": "next build && next export -o build && npm run replaceFilePaths",
"deploy": "gh-pages -d build",
"predeploy": "npm run build",
"export": "next export -o build && npm run replaceFilePaths",
"start": "next start"
},
"author": "Imangi Nanayakkara",
"license": "ISC",
"dependencies": {
"#heroicons/react": "^1.0.6",
"#reduxjs/toolkit": "^1.8.2",
"#tailwindcss/line-clamp": "^0.4.0",
"firebase": "^9.8.2",
"firebase-admin": "^10.2.0",
"next": "^12.1.6",
"next-sitemap": "^3.0.5",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-redux": "^8.0.2",
"react-responsive-carousel": "^3.2.23"
},
"devDependencies": {
"autoprefixer": "^10.4.7",
"gh-pages": "^4.0.0",
"postcss": "^8.4.14",
"tailwindcss": "^3.1.2"
}
}
Executed the following command:
npm run deploy
pushing _next folder with .nojekyll file to gh-pages branch.
Not sure what I am doing wrong. I am trying to setup a monorepo with lerna & nextjs and have been following a tutorial but get stuck at this point.
My file structure looks exactly as specified in the tutorial:
lerna.json
package.json
packages
--- components (React Components)
--- package.json
--- ...
--- frontend (NEXTJS APP)
--- package.json
--- ...
It worked fine so far, but now when I try to import components in my frontend nextjs application, it gives me a Module not found Error:
./pages/index.js:4:0
Module not found: Can't resolve 'components'
My package.json in the / (root) folder:
{
"name": "root",
"private": true,
"devDependencies": {
"lerna": "^4.0.0"
}
}
package.json in packages/frontend (NextJS App) :
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"components": "0.0.0",
"next": "11.1.2",
"next-transpile-modules": "^8.0.0",
"react": "17.0.2",
"react-dom": "17.0.2"
},
"devDependencies": {
"eslint": "7.32.0",
"eslint-config-next": "11.1.2"
}
}
package.json in the /packages/components folder:
{
"name": "components",
"version": "0.0.0",
"description": "> TODO: description",
"author": "Anton",
"homepage": "",
"license": "ISC",
"main": "dist/index.js",
"directories": {
"lib": "lib",
"test": "__tests__"
},
"files": [
"lib"
],
"scripts": {
"test": "echo \"Error: run tests from root\" && exit 1",
"dev": "microbundle watch --jsx React.createElement"
},
"source": "lib/index.js",
"devDependencies": {
"microbundle": "^0.13.3"
}
}
I have been following the linked tutorial pretty much to the dot, I'm really not sure what's going on here, but then again, I am a beginner/low intermediate and would appreciate some help!
Had the same issue following the tutorial here.
The gotcha was that you have to run lerna bootstrap again from the root of the monorepo. For me this fixed it.
I have been attempting to publish an npm package for react but keep running into issues. More specifically, after I publish my package and go to test it, the installed package has errors related to the jsx.
I built the published package with create-react-app and then added an additional package.json in the specific directory I wanted to publish.
I assume my issues are because create-react-app expects you to use the root package.json and not a separate one within the project. So this leads me to believe there are Webpack or Babel configurations I need to handle. I am having trouble finding this information.
The directory I am trying to publish only has 3 files other than my package.json which looks like this
{
"name": "...",
"version": "1.0.0",
"description": "...",
"main": "index.js",
"peerDependencies": {
"react": "^17.0.1",
"react-dom": "^17.0.1"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"license": "ISC",
"keywords": []
}
this has so far been unsuccessful. I have also attempted the following
{
"name": "...",
"version": "1.0.0",
"description": "...",
"main": "index.js",
"peerDependencies": {
"react": "^17.0.1",
"react-dom": "^17.0.1"
},
"babel": {
"presets": [
"#babel/preset-react"
]
}
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"license": "ISC",
"keywords": []
}
Im not sure what I am missing
You can use the create-react-library for creating packages for React and publishing those to NPM.
I have existing React Apps which are published to production web servers but I want to run them from the desktop using Electron. However, I do not want to disturb the React App package.json. I attempted to decouple an existing online tutorial by paachu on Medium but was unsuccessful. It kept failing trying to locate "main...chunk.css" and other resources needed by the React App.
With that said, I have a working React App in directory ./projx/reactApp I would like to create an Electron App in ./projx/electronApp that will build and create a packaged executable using electron-builder. The dev environment is not necessary at this time in that I only need a release package to distribute. Here is a package.json that almost works:
{
"name": "wrappedReact",
"version": "1.0.0",
"main": "./src/electron.js",
"scripts": {
"preclean": "cross-env rm -rf build",
"react-prebuild": "cross-env cp -r ../reactApp/build build",
"build-tsapp": "tsc ./src/electron.ts",
"electron-prebuild": "mv ./src/*.js ../build",
"electron-build": "npm run electron-prebuild && electron-builder",
"build": "npm run preclean && npm run electron-build",
"startdev": "concurrently \"tsc ./src/electron.ts -w\" \"cross-env
NODE_ENV=dev nodemon --exec \"\"wait-on http://localhost:3000 &&
electron src/electron.js\"\""
},
"author": "sfanjoy",
"homepage": "./",
"electron-pack": "build --em.main=build/electron.js",
"build": {
"appId": "com.example.reactApp",
"productName": "ReactApp",
"copyright": "Copyright © 2019 sfanjoy",
"files": [
"build/**/*",
"node_modules/**/*"
],
"directories": {
"buildResources": "assets"
},
"win": {
"target": "portable",
"icon": "assets/app.ico"
}
},
"dependencies": {
"#types/electron": "^1.6.10"
},
"devDependencies": {
"#types/electron": "^1.6.10",
"concurrently": "^4.1.1",
"cross-env": "^5.2.1",
"electron-builder": "^21.2.0",
"electron-is-dev": "^1.1.0",
"nodemon": "^1.19.1",
"typescript": "^3.5.2",
"wait-on": "^3.2.0"
}
}
I think the solution is with electron-builder if it would allow you to inject the ./src/electron.js into the prebuilt reactApp\dist\win-unpacked\resources\app.asar. I could then copy the reactApp/build directory, inject into the asar, and call electron-builder.
This by far (IMO) is the best starting setup (Boilerplate) I have come accross:
https://github.com/nateshmbhat/electron-react-ts-starter/
I want to create lerna monorepo which includes a few packages. But i don't want to compile every package with tsc. This means that i want to export tsx-ts files directly in package.json files' "main" section. And consume these ts files directly from main package. So i can debug what i write in chrome dev tool.
Can you help me.
This is one of my packages' package.json file:
{
"name": "w-cmp-lib",
"version": "1.0.0",
"description": "",
"main": "index.ts",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "16.3.2"
}
}