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
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 have tried to add a github action, which is supposed to test my app using cypress.
This is what my workflowfile looks like:
name: Cypress Tests
on: [push]
jobs:
cypress-run:
runs-on: ubuntu-latest
defaults:
run:
working-directory: ./client
steps:
- name: Checkout
uses: actions/checkout#v2
# Install NPM dependencies, cache them correctly
# and run all Cypress tests
- name: Setup Node
uses: actions/setup-node#v1
with:
node-version: 14
- name: Test
run: |
ls
cat package.json
- name: Cypress run
uses: cypress-io/github-action#v2.11.7
with:
build: npm run build
start: npm start
- name: Test
run: ls
The Test step contains cat package.json which shows, the package.json file, which looks like this:
{
"name": "client",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"cypress:open": "cypress open",
"cypress:run": "cypress run"
},
"dependencies": {
"#reduxjs/toolkit": "^1.6.1",
"axios": "^0.21.4",
"framer-motion": "^4.1.17",
"next": "11.1.2",
"phosphor-react": "^1.3.1",
"qs": "^6.10.1",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-leaflet": "^3.2.1",
"react-redux": "^7.2.5",
"uuid": "^8.3.2",
"cypress": "^8.6.0"
},
"devDependencies": {
"autoprefixer": "^10.3.4",
"cypress": "^8.6.0",
"eslint": "7.32.0",
"eslint-config-next": "11.1.2",
"postcss": "^8.3.6",
"tailwindcss": "^2.2.15"
}
}
As you can see there is a build script, however when the workflow runs it throws this error:
build app command "npm run build"
current working directory "/home/runner/work/mlc/mlc"
/opt/hostedtoolcache/node/14.18.0/x64/bin/npm run build
npm ERR! missing script: build
npm ERR! A complete log of this run can be found in:
npm ERR! /home/runner/.npm/_logs/2021-10-17T11_04_01_715Z-debug.log
Error: The process '/opt/hostedtoolcache/node/14.18.0/x64/bin/npm' failed with exit code 1
I have no idea why this happens, since the package.json sort of proves, that there is a build script.
You have to add: working-directory: client after with: inside Cypress run like this:
-
name: Cypress Tests
on: [push]
jobs: cypress-run:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout#v2
# Install NPM dependencies, cache them correctly
# and run all Cypress tests
- name: Cypress run
uses: cypress-io/github-action#v2
with:
working-directory: client
build: npm run build
start: npm start
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.
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.
When I try to deploy my React app (made with create-react-app) to Heroku (using create-react-app-buildpack) I get the following error:
Failed to compile.
Module not found: Error: Can't resolve 'jquery' in
'/tmp/build_049d73accaf035b451adf36ac44318d3/src/components'
npm ERR! Linux 3.13.0-128-generic
npm ERR! argv
"/tmp/build_049d73accaf035b451adf36ac44318d3/.heroku/node/bin/node"
"/tmp/build_049d73accaf035b451adf36ac44318d3/.heroku/node/bin/npm" "run"
"build"
npm ERR! node v6.11.2
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! life-quality-data#0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
When testing on my computer everything works. I also have jQuery added as a dependency in package.json:
{
"name": "life-quality-data",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.16.2",
"dns": "^0.2.2",
"fetch": "^1.1.0",
"jquery": "^3.2.1",
"node-sass-chokidar": "0.0.3",
"numeral": "^2.0.6",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-router-dom": "^4.2.2",
"react-scripts": "1.0.12",
"xml2js": "^0.4.19"
},
"scripts": {
"build-css": "node-sass-chokidar src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
I think I might be missing a line. Also, could it be the .gitignore? Because on GitHub the node modules are being ignored.