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.
Related
I have one repository on GitHub. It includes common packages, an API and a web app.
In the API and in the web app I use the common packages. For that I use yarn workspaces. So I can give the common packages a name in their package.json files and then use them by "common-package-name": "*". This works locally.
I have app.yaml files in the API and in the web app directory. I use GitHub actions to deploy the two apps. But I get the following error:
npm ERR! 404 Not Found - GET https://registry.npmjs.org/#bujus%!f(MISSING)common - Not found
npm ERR! 404
npm ERR! 404 '#bujus/common#*' is not in this registry.
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.
#bujus/common is the first common package.
I do not have pushed the common packages to npm registry and do not want to do so. Is there a solution to this?
In addition, I build the app in the GitHub action and thought that Appengine would just execute the start command which would execute the build files in the dist folder, but apparently it wants to install or just check the dependencies.
The root package.json:
{
"name": "#bujus/root",
"version": "1.0.0",
"private": true,
"license": "UNLICENSED",
"workspaces": [
"tool-presets",
"common",
"common-frontend",
"api",
"school-app"
],
"scripts": {
"build-development": "turbo run build-development",
"build-production": "turbo run build-production",
"lint": "turbo run lint --continue",
"prettify": "turbo run prettify --continue",
"start-development": "turbo run start-development",
"test": "turbo run test"
},
"devDependencies": {
"#bujus/tool-presets": "*",
...
},
"packageManager": "yarn#1.22.17"
}
The common package.json
{
"name": "#bujus/common",
"version": "1.0.0",
"license": "UNLICENSED",
"main": "./dist/common.es.js",
"scripts": {
"build-development": "vite build --mode development",
"build-production": "vite build",
"lint": "eslint --fix --ext .html,.js .",
"prettify": "prettier --write \"./**/*.{html,js}\""
},
"dependencies": {
...
}
}
The webapp package.json
{
"name": "#bujus/school-app",
"version": "1.0.0",
"license": "UNLICENSED",
"scripts": {
"build-production": "vite build",
"lint": "eslint --fix --ext .html,.js,.jsx .",
"prettify": "prettier --write \"./**/*.{html,js,jsx}\"",
"start-development": "vite"
},
"dependencies": {
"#bujus/common": "*",
"#bujus/common-frontend": "*",
...
}
}
I added on scripts on package.json:
yarn build
yarn serve
yarn start (to run yarn build and yarn serve)
But the problem is when I run yarn start, the terminal cannot run yarn serve but yarn build is successfully running:
When I run them separately, both are working:
{
"dependencies": {
"#babel/cli": "^7.17.10",
"#babel/core": "^7.18.2",
"#babel/preset-env": "^7.18.2",
"#babel/preset-react": "^7.17.12",
"lite-server": "^2.6.1"
},
"scripts": {
"build": "babel src --out-dir public -w",
"serve": "lite-server --baseDir public",
"start": "yarn build & yarn serve"
}
}
You need to add a second "&" in yarn build && yarn serve
I have created a react app using create-react-app and I am using less for css. My app builds correctly, but none of the less files are loaded in build/static folder
I am using customize-cra with react-app-rewired to add a loader for less files.
config-overrides.js file
const {
override,
addLessLoader
} = require('customize-cra');
const path = require('path');
module.exports = override(
addLessLoader({
paths: [path.resolve(__dirname, 'src/')],
javascriptEnabled: true,
sourceMap: true,
})
);
scripts in package.json
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test --passWithNoTests",
"eject": "react-scripts eject",
"release": "CI=true react-app-rewired test --coverage && npm run build && npm run package && npm run posttest",
},
dependencies
"less": "^4.1.1",
"less-loader": "^8.0.0",
"react-scripts": "4.0.2",
"webpack": "4.44.2",
"customize-cra": "^1.0.0"
The error that I was getting was
Module build failed (from ./node_modules/less-loader/dist/cjs.js): TypeError: this.getOptions is not a function
Referred this post and lowered the version of less-loader to 5.0.0 and it started working
It's my first time running a build to deploy a react website. When I run npm run build, nothing happens. I tried running npm run build:all and I do get a build directory created but with no index.html file.
My current package.json is:
"eslint": "eslint \"src/**/*.js\"",
"start": "concurrently \"npm run dev:server\" \"npm run dev:bundle\"",
"test": "jest",
"dev:server": "cross-env NODE_PATH=./src nodemon --exec \"babel-node src/server/server.js\" --ignore .reactful.json --ignore public/",
"dev:bundle": "webpack -wd",
"verify-tests": "jest --coverage",
"build:react": "cross-env NODE_ENV=production webpack --progress -p",
"build:node": "babel src -d build --config-file ./babel-node.config.js --copy-files",
"build:all": "npm install && npm run build:react && npm run build:node",
"prod:start": "cross-env NODE_ENV=production NODE_PATH=./build pm2 start -i max build/server/server.js --update-env --name react-testProd",
"prod:stop": "pm2 stop react-testProd",
"prod:reload": "pm2 reload --update-env react-testProd",
"prod:logs": "pm2 logs --update-env react-testProd",
"build": "webpack --config webpack.config.js"
My current webpack config is:
resolve: {
modules: [path.resolve('./src'), path.resolve('./node_modules')],
},
entry: {
main: ['./src/renderers/dom.js'],
},
output: {
path: path.resolve('public', 'bundles'),
filename: isDev ? '[name].js' : '[name].[chunkhash].js',
},
Any idea what is wrong with this?
I cant see anything particularly wrong but you can try using CopyWebpackPlugin
module.exports = {
plugins: [
new CopyWebpackPlugin([
{ from: './index/html', to: 'relative/path/to/dest/' }
])
]
}
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.