How do I deploy an updates project and publish on github? - reactjs

The issues I am having the past few days is that I can not update my 
https://filipzafran.github.io/Best-TO-DO-App-in-the-history-of-the-universe/  website page.
Although the gh-pages branch is updated with the new code, it still shows the old one.
I have:
 - deleted and created again the gh-pages
 - pushed a new commit 
 - re-merged with master
 - cleared browser history (catche)
 - read numerous solutions
Still cant make it publish the new code on my gh-pages website.
I feel like there might have to do with depolyment.
Do I need to deploy again?
Because when I do, from master, it gives me a long error:
redux-todo-step_by_step git:(master) npm deploy
Usage: npm <command>
where <command> is one of:
access, adduser, audit, bin, bugs, c, cache, ci, cit,
clean-install, clean-install-test, completion, config,
create, ddp, dedupe, deprecate, dist-tag, docs, doctor,
edit, explore, fund, get, help, help-search, hook, i, init,
install, install-ci-test, install-test, it, link, list, ln,
login, logout, ls, org, outdated, owner, pack, ping, prefix,
profile, prune, publish, rb, rebuild, repo, restart, root,
run, run-script, s, se, search, set, shrinkwrap, star,
stars, start, stop, t, team, test, token, tst, un,
uninstall, unpublish, unstar, up, update, v, version, view,
whoami
npm <command> -h quick help on <command>
npm -l display full usage info
npm help <term> search for help on <term>
npm help npm involved overview
Specify configs in the ini-formatted file:
/home/ficho/.npmrc
or on the command line via: npm <command> --key value
Config info can be viewed via: npm help config
npm#6.14.7 /home/ficho/.nvm/versions/node/v13.8.0/lib/node_modules/npm
Did you mean this?
repo
This is my repo.

Assuming you have a deploy script in your package.json, to successfully execute it you have to type in npm run deploy as deploy isn't an npm command per se.
In npm, run is the command that allows you to execute your custom scripts.
Here's an example of a package.json and relative commands...
{
"name": "raci-api",
"version": "0.4.0",
"description": "raci API",
"main": "src/server.js",
"scripts": {
"start:dev": "nodemon src/server.js -e \"NODE_END=development\"",
"start:production": "node src/server.js -e \"NODE_ENV=production\"",
"lint": "eslint src/**/*.js",
"lint:fix": "eslint --fix src/**/*.js",
"docs:serve": "npx http-server -c-1 docs -o",
},
"author": "",
"license": "ISC",
"repository": {
"type": "git",
"url": "yourRepoURL"
},
"dependencies": {
"yourDependencies": "here"
},
"devDependencies": {
"yourDevDependencies": "here"
}
}
In this case, to properly serve the app (E.G. in loopback) you have to use npm run start:dev.

Related

Need to understand best way to configure react and cypress

I just have a question around best method to start my react app when I run cypress test. Right now the way its setup for me I need to start my server then run cypress test. I would like a single command to start react app -> run Cypress test.
I am new to both react and cypress
My package.json looks like this
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "cypress run",
"eject": "react-scripts eject"
},
Currently I need to run npm start then in another window npm test
I tried to start and run test in a single line but I could not get it to work. It just started react app and did nothing else.
I wrote this up recently as part of a series on TDD in JS, you can read the full article on my blog.
First, install some useful helper dependencies:
$ npm install concurrently cross-env wait-on
Then add some extra scripts to the package.json:
"e2e:ci": "concurrently -k -s first \"npm:e2e:ci:*\"",
"e2e:ci:app": "cross-env BROWSER=none PORT=4321 npm start",
"pree2e:ci:run": "wait-on -t 30000 http-get://localhost:4321",
"e2e:ci:run": "cross-env CYPRESS_BASE_URL=http://localhost:4321 npm run e2e",
So what does that do? When we run npm run e2e:ci, the concurrently script is going to run two things in parallel for us:
e2e:ci:app: Run the app using npm start, with some environment variables set via cross-env (this allows it to work on *nix and Windows):
BROWSER=none stops the browser from popping up and taking over the screen [this is the default behaviour of a React app created by CRA, which the article was using]; and
PORT=4321 runs the app on the specified port (so we can still have a version running on port 3000 without causing any conflicts).
e2e:ci:run: Run the E2E tests in a two-step process:
The pre script runs first, and uses wait-on to wait for up to 30,000ms for the app to be running on the specified port; then
If that works (i.e. the app starts in less than 30s) run the actual tests, with the baseUrl configuration overridden to point to the right place.
The other configuration options passed to concurrently itself are:
-k, meaning stop all of the other processes when one exits (in this case we expect our tests to exit at some point and want to stop the app when they do); and
-s first, meaning that the output of the overall command is the output of the first one to exit (i.e. output from the e2e:ci command should be the output from the tests).
Building on the answer by jonrsharpe, I also needed to launch my (golang, though the implementation language doesn't really matter) api server, and I'm running tests via wdio. It uses the same toolset as his answer but with an extra step:
"e2e:ci": "concurrently -k -s first \"npm:e2e:ci:*\"",
"e2e:ci:server": "cross-env SERVER_PORT=40001 ./launchServer.sh",
"pree2e:ci:app": "wait-on -t30000 http-get://localhost:40001/state",
"e2e:ci:app": "cross-env BROWSER=none PORT=40002 npm start",
"pree2e:ci:run": "wait-on -t 30000 http-get://localhost:40002",
"e2e:ci:run": "npx wdio run ./wdio.conf.js --baseUrl http://localhost:40002"
The two extra scripts are:
e2e:ci:server which runs a script to launch the server
pree2e:ci:app just waits until the server is running. Note that it's not just waiting on "/" -- my api server 404s on root requests, and wait-on needs to get a 2xx response, so the http-get url needs to be a valid api endpoint ("/state").
It's also worth noting that wdio just uses an extra command line argument to set the base url instead of the env var in the original cypress solution.

How to access cypress environment variable passed in from command line

Scenario:
I have cypress tests that we run on multiple environments( more than 8), each environment with a separate domain, so we have configured all the domains in cypress.json file under env, now I need to pass the domain dynamically, i.e, from command line and be able to pick it and run the tests on respective domain. but I'm not sure how I can grab that value passed in command line.
Note: I have tried process.env method but did not work.
Code looks like this :
Cypress.json
{
"env": {
"domain1": xyz.com,
"domain2": abc.com,
"domain3": 123.com
}
}
package.json :
{
scripts: {
"test": "npm run cypress open --env domian= $1
}
}
$1 is suppose to get me the command line argument"
From my files under integration folder, Cypress.env(Cypress.env().domain) will/should fetch me the right domain.
However I'm receiving $1 as domain value.
Please help.
Can you share how $1 is supposed to reference the env file? I don't understand that part.
In the meantime, here is an alternative answer to your problem. (just tested it out)
You can write several test scripts which each provide a different domain address.
{
scripts: {
"test1": "npm run cypress open --env domian=xyz.com",
"test2": "npm run cypress open --env domian=abc.com",
"test3": "npm run cypress open --env domian=123.com"
}
}

Why can I pull my gas script to local by clasp?

Premise · What I want to realize
I'm trying to clone my gas script by clasp from local, but I'm not going well...
testing environment
MacOS Mojave
10.14.6
node.js
12.12.0
npm
6.11.3
clasp
2.3.0
bash
3.2.57
What I did
1. make the directory and move into it
$ mkdir /path/to/gasSample
$ cd /path/to/gasSample
2. init npm
$ init npm
{
"name": "gcaltotalling",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
3. install clasp via npm
$ npm install clasp
$ clasp --version
2.3.0
4. login to clasp
$ clasp login
Logging in globally...
🔑 Authorize clasp by visiting this url:
https://accounts.google.com....
Authorization successful.
$ ls -la
... .
... ..
... .clasp.json
... package.json
5. clone the target gas script
$ clasp clone [scriptId]
Project file (.clasp.json) already exists.
Problems occurring · Error messages
$ clasp pull
Could not find script.
Did you provide the correct scriptId?
Are you logged in to the correct account with the script?
that's all
I got the errors. What shoud I do?
Could you lend me a hand? Thank you for your reading.
Your output in point 5 means, you specified a wrong script-ID before. When repeating the command, you get that output. Simply delete that file and run clasp clone again. Pay attention to use the script-ID and not the project-key.
Suppose that you are managing the project in VSC. Here the fatastic things that you can do with CLASP:
I have a GAS project with (let's say) ID "A" after clasp login you can clone the project from GAS to VSC with clasp clone ID ("A")
I have a GAS project with ID "A" after clasp clone in VSC you can pull (from inside VSC) the project from GAS to VSC with clasp pull
I have a GAS project with ID "A" in VSC you can push (from inside VSC) the project from VSC to GAS with clasp push
I have a GAS project with ID "A" in VSC you can push (from inside VSC) in another GAS project (let's say ) ID "B" the whole project: the steps are - modifiy clasp.json inside VSC (change ID from A to B) and into the VSC terminal run clasp push. Important! you have to create project with ID "B" before to run clasp command

how to setup --max-http-header-size with webpack-dev-server

I'm trying to setup my webpack instance with webpack-dev-server.
I pass into scripts a setting for increase header size "--max-http-header-size=100000".
"dev": "npm run options-to-dev && env targets=manager && node --max-http-header-size=100000 webpack-dev-server --host 0.0.0.0 --progress --config webpack.config.js"
on execution script "dev" I got an error
$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
^^^^^^^
SyntaxError: missing ) after argument list
at Module._compile (internal/modules/cjs/loader.js:891:18)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
at Module.load (internal/modules/cjs/loader.js:811:32)
at Function.Module._load (internal/modules/cjs/loader.js:723:14)
at Function.Module.runMain (internal/modules/cjs/loader.js:1043:10)
at internal/main/run_main_module.js:17:11
without "node --max-http-header-size=100000" webpack working perfect.
Problem was in my file webpack-dev-server file. I pass instead webpack-dev-server this line ../../node_modules/webpack-dev-server/bin/webpack-dev-server.js
"dev:windows": "npm run options-to-dev && env targets=customer && node --max-http-header-size=100000 ../../node_modules/webpack-dev-server/bin/webpack-dev-server.js --host 0.0.0.0 --progress --config webpack.config.js"
If you want to run webpack-dev-server with that option then use following:
{
"scripts": "NODE_OPTIONS='--max-http-header-size=100000' webpack-dev-server"
}
A little mention about it can be found at the bottom of this documentation page: https://webpack.js.org/configuration/dev-server/
Hard to find without using search option ;)
It took me some time to figure out. Its essential not a problem with webpack devserver, nuxt or other framework running on top.
Its node that enforces the limit due to avoiding DDOS attacks for any webserver running on a node.
You can when starting node giving the argument --max-http-header-size to change the value.
But many of us that use a framework, react, or nuxt on top is not starting node ourserlf so it is hard to find exactly what to do and having to start everything ourselves is not trivial.
cross-env is really nice, allowing you to set environment variables and node do accept a NODE_OPTIONS environment variable where custom arguments all can be set.
See the example I used o a nuxt project here:
"scripts": {
"build": "nuxt-ts build",
"dev": "cross-env NODE_OPTIONS=--max-http-header-size=200000 DEBUG='express:*' authority=.... resourceApi=... nuxt-ts --port 3001",
"generate": "nuxt-ts generate",
"precommit": "npm run lint",
"start": "nuxt-ts start --port 3001"
},
where I changed the normal dev:"nuxt-ts" option to use cross-env and setting max HTTP header.
Hopefully, this can help others.

build angularjs 2 with angularjs-cli on codeanywhere

I am getting invalid host header problem while i am trying to server my application by ng serve --host 0.0.0.0 . I have tried the following.
1.install -g angular-cli
2. cd to that app-directory
3. change port in angular-cli.json
"defaults": {
"styleExt": "css",
"component": {},
"serve": {
"port": 1337
}
}
ng serve --host 0.0.0.0
Requested url in browser is http://port-1337.angular2-jobproject0889272.codeanyapp.com/
I was looking to sovle a different problem and came across an answer that may work for you.
ng serve --port 8080 --host 0.0.0.0 --disableHostCheck true
Angular-cli GitHub
If I'm understanding your question correctly, your issue could be stemming from Webpack's security impl.
As the Angular CLI uses Webpack by default to bundle your app, you have to abide by its requirements when using "ng serve". App bundles produced by Webpack now require the Host header of the request to match the listening address OR the host provided in the public option.
The public option is a --public flag passed with the "ng serve" command. On CodeAnywhere you should most likely care to indicate a port # as well. A valid "ng serve" command could look like this:
$ ng serve --host 0.0.0.0 --port 3000 --public myproject-myusername.codeanyapp.com
(For HTTPS service, CodeAnywhere requires you use port 3000)
You can find your specific value for the --public flag in your CodeAnywhere IDE by right-clicking on your project's tree view Connection icon and selecting the "info" option.
To simplify things, you can set this up in your package.json file and then start the Angular server with the command:
$ npm start
For example, you can modify the "start" element of the package.json "scripts" entry as follows:
"scripts": {
"ng": "ng",
"start": "ng serve --host 0.0.0.0 --port 3000 --public myproject-myusername.codeanyapp.com"
}
Hopefully this info is applicable to the issue you are facing. Good Luck!

Resources