I am trying to build a JS application with unit tests.
So when i give npm run build build should be successful only if all the Jest tests have passed.
I have two npm scripts now.
One for testing and one for building production build
"scripts": {
"build": "sudo webpack --mode=production",
"test": "jest"
}
A simple solution which will work with all environments including windows is appending both the scripts with && operator.
So the created new script will be like build:test below
"scripts": {
"build:test": "npm run test && npm run build ",
"build": "sudo webpack --mode=production",
"test": "jest",
}
&&
operator will see to that npm run build will be executed only if npm run test exits with successful return code and jest takes care of returning error code to terminal when any tests fail.
I deployed a create-react-app on GitHub Pages using a mix of these 2 tutorials (https://create-react-app.dev/docs/deployment & https://github.com/gitname/react-gh-pages). It's working just fine.
But this webpage is supposed to evolve regularly, I have some content to add.
Is there a way to modify the deployed app? How can I push the changes I would make in my local directory to gh-pages (production mode)? Do I need to run npm build again after my additions?
For the moment I have the development mode on master branch. I think it's the build mode on gh-pages, although I don't have any other branch.
Thank you for your help.
What I did to deploy:
Terminal
$ npm install --save gh-pages
$ git init
$ git remote add origin https://github.com/REMOTE
$ npm run deploy
Package.json
{
"homepage": "https://USER-PAGE.github.io/",
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -b master -d build",
},
"devDependencies": {
"gh-pages": "^2.1.1"
}
}
To modify the site just make the changes and then git add, commit and push like one would normally do to the required branch.
Then again run the command:
npm run deploy
Look like installation of the bcrypt failed since I can see in the log message Cannot find module 'bcrypt', that is mean it was not installed.
I was add .npmrc file with unsafe-perm=true and add 00_change_npm_permissions.config with the following content:
files:
"/opt/elasticbeanstalk/hooks/appdeploy/post/00_set_tmp_permissions.sh":
mode: "000755"
owner: root
group: root
content: |
#!/usr/bin/env bash
chown -R nodejs:nodejs /tmp/.npm
But none of the solutions are working. Any suggestions?
I was able to fix it by modifying a little bit scripts in package.json this way:
"scripts": {
"build": "tsc",
"dev": "ts-node ./src/server.ts",
"bcrypt": "npm install bcrypt",
"start": "npm run bcrypt && node server.js",
"prod": "npm run build && npm run start"
},
I am getting these two errors in my Expo IDE:
Warning: You are using npm version 5.6.0. There may be bugs in this version, use it at your own risk. We recommend version 4.6.1.
Warning: Expo version in package.json does not match sdkVersion in manifest.
Warning: 'react' peer dependency missing. Run npm ls in C:\users\matt\sites\rg-calendar to see full warning.
If there is an issue running your project, please run npm install in C:\users\matt\sites\rg-calendar and restart.
Whn I run npm ls I have a load of missing packages, I the run npm install but I just get unmet dependancy errors.
My app.json file is:
{
"expo": {
"name": "RGUC",
"icon": "./img/calendarIcon.png",
"version": "1.0.0",
"slug": "rguc-calendar",
"sdkVersion": "21.0.0",
"ios": {
"bundleIdentifier": "com.rguc.calendar"
},
"android": {
"package": "com.rguc.calendar"
}
}
}
I have the same react-native version in my package.json:
{
"name": "rgcalendar",
"version": "0.1.0",
"private": true,
"devDependencies": {
"babel-eslint": "^8.2.2",
"eslint": "^4.18.2",
"eslint-config-airbnb": "^16.1.0",
"eslint-plugin-import": "^2.9.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.7.0",
"flow-bin": "^0.69.0",
"jest-expo": "21.0.0",
"react-native-scripts": "1.8.1",
"react-test-renderer": "16.0.0"
},
"main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
"scripts": {
"start": "react-native-scripts start",
"eject": "react-native-scripts eject",
"android": "react-native-scripts android",
"ios": "react-native-scripts ios",
"test": "node node_modules/jest/bin/jest.js --watch",
"lint": "eslint --fix *.js",
"flow": "flow"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"expo": "^21.0.0",
"react": "16.0.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-21.0.2.tar.gz",
"react-native-calendars": "^1.16.1",
"react-native-fontawesome": "^5.7.0",
"react-native-vector-icons": "^4.5.0",
"react-navigation": "^1.0.3",
"react-navigation-redux-helpers": "^1.0.1",
"react-redux": "^5.0.6",
"redux": "^3.7.2",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.2.0"
}
}
I am using NVM:
9.5.0
* 8.10.0 (Currently using 64-bit executable)
6.11.1
4.6.1
4.4.0
How can I publish my expo project?
For downgrading NPM use this command: npm install -g npm#4 it will install 4.6.1 (at this moment).
The current Expo version is 26. Expo 21 is based on react-native 0.48 and that on react 16.0.0 So maybe you have some modules which are not compatible with that versions anymore.
For the unmet dependencies try the following: remove (or move) the node_modules folder and run npm install again also try npm cache clean.
Maybe upgrading your react versions also solves the issues.
Finally for publishing, you could install the Expo XDE which makes it much easier. Of course first you must get rid of any compile errors (not the warnings) before beeing able to publish your Expo project.
With my experience, I can say that npm version 5.6.0 is buggy. Use npm 4.6.1, its fully stable. You can do it by npm uninstall npm#5.6.0 && npm install npm#4.6.1. After that, do npm -v to see if 4.6.1 is displayed or its still 5.6.0. If this works, you will see 4.6.1 instead of 5.6.0. Let me know if this fixes your issue.
For publishing your Expo project, simply follow the steps from this link as it is -> https://docs.expo.io/versions/v19.0.0/workflow/building-standalone-apps
Background
I currently have an npm script that looks something like
"dev":"yarn install && concurrently -k \"npm run webpack\" \"cd dist/ && node App.js\" \"npm run test\" \"npm run lint\""
Logically this runs webpack, starts the app, lints, and tests in parallel.
npm webpack in that script has --watch set
Note: this is for dev.
The Problems
This tries to run the app before it has webpacked
This won't re-run the app when webpack repacks due to watch
The Goal
Run npm run webpack once
When it outputs (meaning the watch fired and finished) run the other three commands
when something crashes inform me, don't waste time running stuff that won't work, but try again when I fix the file.
The Real Problem
I don't know what I don't know. I suspect the real answer will be in the webpack config itself potentially, or there's a better tool than concurrently/watch for my use case, or the core idea on how I've designed this is just crazy. Maybe I want to create a devServer.js that uses webpack dev middleware to serve these instead? how would that pull in linting and testing then?
I don't know what a beautiful version of this build would look like.
What I Really Need
A great tutorial/guide/blog post about how this 'Should' go.
Here's what I would do; perhaps there's a better way:
"scripts": {
"dev": "yarn install && concurrently -k \"npm run webpack\" \"npm run watch\"",
"watch": "onchange \"dist/**/" -- concurrently -k \"cd dist/ && node App.js\" \"npm run test\" \"npm run lint\""
}
This uses onchange. npm run dev starts webpack and onchange in parallel. onchange monitors for any file changes in dist/ and runs your tasks when any files change.
The limitation of this approach is that your tasks will not run until files change in dist. You can work around this by deleting dist/ before running webpack. (Use rimraf to do this in a cross-platform way.) Example:
"dev": "yarn install && rimraf dist && concurrently -k \"npm run webpack\" \"npm run watch\""
You can just use rm -rf dist if you don't care about Windows support.