Publish nestjs application in GAE - google-app-engine

I'm learning nestjs and I followed this step by step.
The application works correctly. But I want to post it as a microservice in my GAE. I'm also able to do this part well, but when I call the address in the GPC, I'm getting the error 502 - Bad Gateway.
I believe it's something in my package.json file. But I have not figured it out yet. The following is the dependencies configuration:
   "dependencies": {
   "# nestjs / common": "^ 5.0.0",
   "# nestjs / core": "^ 5.0.0",
   "# nestjs / microservices": "^ 5.0.0",
   "# nestjs / testing": "^ 5.0.0",
   "# nestjs / websockets": "^ 5.0.0",
   "reflect-metadata": "^ 0.1.12",
   "rxjs": "^ 6.0.0",
   "typescript": "^ 2.8.0",
   "ts-node": "^ 6.0.0",
   "tsconfig-paths": "^ 3.3.1"
   },
This is my start instruction:
"start": "ts-node -r tsconfig-paths/register src/main.ts",
Finally, my app.yaml:
env: flex
runtime: nodejs
service: nestapp

You could start with the AppEngine Typescript sample project:
https://github.com/GoogleCloudPlatform/nodejs-docs-samples/tree/master/appengine/typescript
It has all the typescript compilation tools setup already. The key lines you need in your package.json scripts are:
"build": "tsc -p tsconfig.build.json",
"gcp-build": "npm run build"
"gcp-build" is a reserved task name which is always executed when deploying an AppEngine NodeJS project. This will ensure your TypeScript is compiled to JavaScript on deploy. You can read more about it here:
https://cloud.google.com/appengine/docs/standard/nodejs/running-custom-build-step
Once you have TypeScript and Express running, you can replace Express with Nest! Some other things you'll need to change, the entrypoint in package.json which AppEngine uses to run the app:
"main": "dist/main.js",
And the port in your Nest app src/main.ts:
const PORT = Number(process.env.PORT) || 8080;
await app.listen(PORT);
In your app.yaml remove env: flex just use the standard environment, it's cheaper!
runtime: nodejs10
Putting it all together, your full package.json will look something like this:
{
"name": "appengine-nest",
"description": "An example TypeScript app running on Google App Engine.",
"version": "0.0.1",
"author": "kmturley",
"license": "MIT",
"engines": {
"node": ">=8.0.0"
},
"main": "dist/main.js",
"scripts": {
"prepare": "npm run build",
"pretest": "npm run build",
"build": "tsc -p tsconfig.build.json",
"deploy": "gcloud app deploy",
"lint": "tslint -p tsconfig.json -c tslint.json",
"start": "node ./dist/main.js",
"start:dev": "nodemon",
"start:debug": "nodemon --config nodemon-debug.json",
"test": "repo-tools test app -- dist/main.js",
"gcp-build": "npm run build"
},
"dependencies": {
"#nestjs/common": "^5.6.2",
"#nestjs/core": "^5.6.2",
"express": "^4.16.3",
"nodemon": "^1.18.9",
"reflect-metadata": "^0.1.13",
"rxjs": "^6.3.3",
"ts-node": "^8.0.2",
"tsconfig-paths": "^3.7.0",
"typescript": "^3.0.1"
},
"devDependencies": {
"#google-cloud/nodejs-repo-tools": "^3.0.0",
"#types/express": "^4.16.0",
"tslint": "^5.11.0"
}
}
I've created an example project here:
https://github.com/kmturley/appengine-nest-angular

The changes required to a
nest new <project>
are:
package.json
(main property and some scripts)
{
...
+ "main": "dist/main.js",
"scripts": {
...
- "build": "nest build",
+ "build": "tsc -p tsconfig.build.json",
+ "gcp-build": "npm run build",
...
- "start": "nest start",
+ "start": "node ./dist/main.js",
}
...
}
src/main.ts
(add port environment variable to be listened to)
async function bootstrap() {
const app = await NestFactory.create(AppModule);
- await app.listen(3000);
+ const PORT = Number(process.env.PORT) || 8080;
+ await app.listen(PORT);
}
bootstrap();
Additionally its suggested to add a deploy script on the package.json script
with the devDependency #google-cloud/nodejs-repo-tools
+ "deploy": "gcloud app deploy"
Note: The solution is #Kim T, I just added it formatted in this way because I had troubling reading and executing it fast

Related

Deploy Next.JS web-app that used Yarn to Google App Engine

I'm trying to deploy a web-app that I've built using templates from a friend. I'm quite unfamiliar with React/NextJS frameworks so I'm unsure with the differences between yarn and npx.
I've used yarn next-build to get the app running locally and it works fine. However, now I'm trying to deploy it to Google App Engine on NodeJS and I can't get it working.
This is the project structure:
/dist/functions/next
/nginx
/node_modules
/packages
/public
.gcloudignore
.nowignore
.prettierrc
.yarnrc
app.yaml
babel.config.js
firebase.json
landing.now.json
lerna.json
package-lock.json
package.json
yarn.lock
This is app.yaml:
runtime: nodejs10
handlers:
- url: /.*
script: auto
This is package.json:
{
"name": "streamplate-landing",
"description": "Your universal health app",
"version": "1.0.0",
"private": true,
"author": "Streamplate",
"devDependencies": {
"#babel/cli": "^7.10.3",
"cpx": "^1.5.0",
"cross-env": "^7.0.2",
"firebase-tools": "8.4.3",
"husky": "^4.2.5",
"lerna": "^3.22.1",
"lint-staged": "^10.2.11",
"prettier": "^2.0.5",
"rimraf": "^3.0.2",
"polished": "^3.4.4"
},
"workspaces": [
"packages/common",
"packages/landing",
"packages/landing-gatsby"
],
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start",
"clean": "lerna clean --yes && rimraf node_modules",
"preweb": "cpx \"packages/common/src/assets/image/**/*.*\" \"packages/landing/static\" -C",
"next-dev": "yarn workspace next-landing run dev",
"next-build": "rimraf dist && yarn workspace next-landing run build",
"next-start": "yarn workspace next-landing run start",
"next-export": "yarn workspace next-landing run export",
"gatsby-dev": "yarn workspace gatsby-landing run dev",
"gatsby-build": "yarn workspace gatsby-landing run build",
"gatsby-serve": "yarn workspace gatsby-landing run serve",
"prebuild-public": "rimraf \"dist/functions/**\" && rimraf \"dist/public\"",
"prefirebase-serve": "yarn run build-public && yarn run build-funcs && yarn workspace next-
landing run build && yarn run copy-deps && yarn run install-deps",
"firebase-serve": "cross-env NODE_ENV=production firebase serve",
"prefirebase-deploy": "yarn run build-public && yarn run build-funcs && yarn workspace next-
landing run build && yarn run copy-deps",
"firebase-deploy": "cross-env NODE_ENV=production firebase deploy",
"build-public": "cpx \"packages/common/src/assets/**/*.*\" \"dist/public/static\" -C && cpx
\"public/**/*.*\" \"dist/public\" -C && cpx \"packages/landing/public/**/*.*\"
\"dist/public\" -C",
"build-funcs": "babel \"packages/functions\" --out-dir \"dist/functions\"",
"copy-deps": "cpx \"packages/landing/*{package.json,package-lock.json,yarn.lock}\"
\"dist/functions\" -C",
"install-deps": "cd \"dist/functions\" && yarn",
"pregatsby-firebase-serve": "rimraf dist && yarn run gatsby-build && cpx \"packages/landing-
gatsby/public/**/*.*\" \"dist/public\" -C",
"gatsby-firebase-serve": "cross-env NODE_ENV=production firebase serve",
"pregatsby-firebase-deploy": "rimraf dist && yarn run gatsby-build && cpx
\"packages/landing-gatsby/public/**/*.*\" \"dist/public\" -C",
"gatsby-firebase-deploy": "firebase deploy",
"netlify-deploy": "yarn workspace next-landing run netlify-build"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{js,md,css}": [
"prettier --trailing-comma es5 --single-quote --write"
]
}
}
Add the next export into scripts area in your package.json
"scripts": {
...
"build": "next build && next export"
...
after execution yarn build the out directory will be generated and added into your project.
While initializing firebase use out directory as your public.

How do I Create Electron App from existing React Project without disturbing the React Project

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/

How can I add the CopyWebpackPlugin to create-react-app without ejecting?

I am building a react application and I want to copy all image files from the source destination to the build destination. I am following some tutorials and so far managed to use react-app-wired and the CopyWebpackPlugin
I am getting no errors and no files are being copied.
This is my config-overrides.js
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = function override(config, env) {
if (!config.plugins) {
config.plugins = [];
}
config.plugins.push(
new CopyWebpackPlugin(
[
{
from: 'src/images',
to: 'public/images'
}
])
);
return config;
};
This is my package.json
{
"name": "public",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.18.0",
"copy-webpack-plugin": "^4.5.2",
"css-loader": "^1.0.0",
"prop-types": "^15.6.2",
"react": "^16.4.2",
"react-app-rewired": "^1.5.2",
"react-axios": "^2.0.0",
"react-dom": "^16.4.2",
"react-router-dom": "^4.3.1",
"react-scripts": "1.1.4",
"react-slick": "^0.23.1",
"slick-carousel": "^1.8.1",
"typeface-montserrat": "0.0.54",
"webfontloader": "^1.6.28"
},
"scripts": {
"build-css": "node-sass-chokidar src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
"start-js": "react-app-rewired start",
"start": "npm-run-all -p watch-css start-js",
"build-js": "react-app-rewired build",
"build": "npm-run-all build-css build-js",
"test": "react-app-rewired test --env=jsdom",
"eject": "react-scripts eject"
},
"devDependencies": {
"npm-run-all": "^4.1.3",
"style-loader": "^0.22.1"
}
}
My folder structure is
src/images
src/images/file.jpg
src/images/slider/1.png
src/images/slider/2.png
public/images (empty) so far
Assuming you just want to move files from -/src/<somewhere> to ./<somewhereElse> at build time.
You could just add an extra step to your build script in package.json. The step below is completely in your control and does not mess with any create-react-app scripts or configuration.
For example, I used the ncp package, but if you want more granular control, you can also create your own "step" with ncp or even with raw node fs api.
Here is a way to replicate what I did:
Setup
npx create-react-app img-upload
cd img-upload/
yarn add --dev ncp
Test Data
create src/images/ folder structure and put in files
ls -R src/images/
src/images/:
badge.jpg folder1
src/images/folder1:
applause.gif blank.png
Package.json
I only edited the part: "build": "ncp './src/images' './public/images' && react-scripts build",
{
"name": "img-upload",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-scripts": "1.1.5"
},
"scripts": {
"start": "react-scripts start",
"build": "ncp './src/images' './public/images' && react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"devDependencies": {
"ncp": "^2.0.0"
}
}
Test:
Before running build:
ls public
favicon.ico index.html manifest.json
After running build: yarn build
ls public
favicon.ico images index.html manifest.json
ls -R public/images
public/images/:
badge.jpg folder1
public/images/folder1:
applause.gif blank.png
ls build
asset-manifest.json favicon.ico images index.html manifest.json service-worker.js static
ls -R build/images
build/images/:
badge.jpg folder1
build/images/folder1:
applause.gif blank.png
Suggestion
I am assuming you ultimately need these files in build directory. If so, you can just switch your build script.
"build": "react-scripts build && ncp './src/images' './build/images'",
That way you won't pollute your public folder, which you may want to keep in your source control.
It is definitely not recommended to modify the node_modules/react-scripts/config/webpack.config.dev.js file as this will break when this particular package is updated. Also most probably you would be having node_modules ignored in your version control system, meaning this config wont be shared across developers or backed up.
Although I haven't tried myself personally you could use something like this : https://github.com/timarney/react-app-rewired to override the Webpack config.
You can have a look at the tutorial here : https://medium.com/#timarney/but-i-dont-wanna-eject-3e3da5826e39
Mine worked like this:
const { override, addWebpackPlugin } = require('customize-cra');
module.exports = {
webpack: override(
addWebpackPlugin(
new CopyWebpackPlugin({
patterns: [
{ from: 'src/config', to: 'config' }
],
})
)
)
With that, I'm taking the contents of my config folder and creating an equal one in the build also called config.
I think the problem is because you are using webpack-dev-server together with copy-webpack-plugin. If that's true, the copy-webpack-plugin will copy files to virtual directory which webpack-dev-server works. So that, In this situation, you need to add one more plugin to make it happen
If you want webpack-dev-server to write files to the output directory
during development, you can force it with the
write-file-webpack-plugin.
import WriteFilePlugin from 'write-file-webpack-plugin';
webpack config:
config.plugins.push(
new CopyWebpackPlugin(
[
{
from: 'src/images',
to: 'public/images'
}
])
);
config.plugins.push(new WriteFilePlugin());
You can visit the official document for more information: https://webpack.js.org/plugins/copy-webpack-plugin/
Hope this works!

Heroku Express Creat-React-App Mlab deployment - cannot GET

Looking for some help. I've just deployed my first react/express/mongo app to heroku but it loads up with cannot GET and I can't seem to see any errors which indicate why.
This is my folder structure:
My top level package.json file looks like
{
"name": "russia_2018",
"version": "1.0.0",
"description": "",
"main": "index.js",
"engines": {
"node": "9.5.0"
},
"scripts": {
"build": "concurrently \"cd client && yarn build\" \"cd server &&
yarn build\"",
"clean": "concurrently \"rimraf node_modules\" \"cd client && rimraf
node_modules build\" \"cd server && rimraf node_modules build\"",
"heroku-postbuild": "yarn build",
"install": "(cd client && yarn) && (cd server && yarn)",
"start": "concurrently \"cd client && PORT=3000 yarn start\" \"cd
server && PORT=3001 yarn start\"",
"start:prod": "cd server && yarn start:prod",
"heroku-postbuild": "cd client && yarn && yarn run build"
}
Procfile:
web: yarn start:prod
Server package.json
{
"name": "server",
"version": "1.0.0",
"description": "",
"main": "server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "babel . --ignore node_modules,build --out-dir build",
"start": "nodemon -r babel-register server.js",
"start:prod": "node server.js",
"seeds": "mongo < db/seeds.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"nodemon": "^1.17.5"
},
"dependencies": {
"babel-cli": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"body-parser": "^1.18.3",
"express": "^4.16.3",
"mongod": "^2.0.0",
"mongodb": "^3.1.1"
}
}
And server.js:
const express = require('express');
const app = express();
const path = require('path');
const parser = require('body-parser');
const MongoClient = require('mongodb').MongoClient;
const createRouter = require('./helpers/create_router.js');
const staticFiles = express.static(path.join(__dirname,
'../../client/build'))
app.use(staticFiles)
app.use(parser.json())
MongoClient.connect('mongodb://full-url...
||'mongodb://localhost:27017'', (err, client) => {
if(err){
console.log(err);
}
const db = client.db('russia');
const games = db.collection('games');
const gamesRouter = createRouter(games);
app.use('/api/games', gamesRouter);
app.use('/*', staticFiles)
app.listen(process.env.PORT || 3001, function(){
console.log('listening on port 3001');
})
});
I can't see where the error is coming from as the logs show that the app has connected to the home route fine. The only line which looks like it may be an error is Stopping all processes with SIGTERM but the app continues to connect after that.
Thanks
Seems like heroku is never getting your build folder. Your procfile species this command for herkou to call on deploy web: yarn start:prod. Looking at your top level package.json it seems that start:prod only does this "start:prod": "cd server && yarn start:prod" which does not include any instructions about building the react app.
You may need change your procfile to call a command which will build the client folder for you and then start the server once that's done.
You can also build the folder locally, and remove it from the client side .gitignore so that heroku can just start the server and already have the build folder available.
You may have already seen this article, but if not, it's a very good read on the topic.

github pages displaying readme, not index.js

I have a basic React app. No backend. I want to set it up on github pages. I followed this article, twice. https://medium.freecodecamp.org/surge-vs-github-pages-deploying-a-create-react-app-project-c0ecbf317089
Both times, Github Pages displays the README.md file instead of the index.html file in my public folder. Here is an image of the file directory for the app. Any thoughts?
Here is what I have in package.json if it matters:
{
"name": "react-blog",
"version": "0.1.0",
"private": true,
"homepage": "https://jackseabolt.github.io/react-blog/",
"dependencies": {
"react": "^16.0.0",
"react-dom": "^16.0.0",
"react-scripts": "1.0.14"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy" : "npm run build&&gh-pages -d build"
},
"devDependencies": {
"gh-pages": "^1.0.0"
}
}
Your issue is likely that you are using your master branch as the source. In the settings tab on your Github project page, change the source to use the gh-pages branch.
See https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#step-4-ensure-your-projects-settings-use-gh-pages

Resources