MomsCanCodepgh Hackathon Application

nvm install 10.11.0
nvm use 10.11.0
nvm alias default 10.11.0
node -v

should return: V10.11.0

Git clone https://github.com/alteredco/RealUp.git

npm install 
npm start

Open the Cypress application

./node_modules/.bin/cypress open

• Click 'Run all specs' from the Cypress application
• Test set starts to rolling on Test Runner

Cypress opens the tests in a browser installed on your system. It's called Test Runner: on the left side you can see your test set and on the right side your application to be tested.

• Check the test results form the Test Runner

Test cases can be found from the integration folder.

cd RealUp/cypress/integration

Problems solving: If Cypress application will not start, check that you have run: 'npm install' and 'npm start'. If Cypress application doesn't open after npm commands, you can try to install it to your local computer and try to open again with the following commands:

npm install cypress --save-dev
./node_modules/.bin/cypress open

If test case is red, the next step is to study test from the Test Runner and check why it didn't passed. Choose the not passed test from the Test Runner and click the steps through and try to find the reason. Test Runner shows each step of the test and you can see the result what has happened in each steps. Maybe some of the code has changed and caused a problem or the application has a bug.

npm install --save react-router

this --save, saves the dependcies of react-router (or the package of your choice) to package.json (and so does not break the app after you push to your-branch, merge to master and re-pull latest master with git pull origin master).

components folder (for our app componenets for example as ):

/components/button
/components/modal
/components/nav
/components/form

pages folder (for our app pages such as):

pages/Home
pages/explanations
pages/exercises
pages/about

Always create a branch first

git branch your-branch
git checkout your-branch

This will create and switch to your branch Never push to master and merge a non working app to master.

git add .
git commit -m "my changes are..."
git push origin your-branch

-In github create a pull request - this will check the branch against master and allow you to resolve conflicts either online in github browser, or on your local instance of the app.

-When satisified, (perhaps after changing locally and doing a new commit and push to your branch) merge the branch to master.

##Git cheat sheet:

Git Status

will show you are on branch <your branch….> always pull down the most recent version of master before you start any changes

Git checkout master 

git pull

Now you are on latest version but you can’t code in master so create or if already there switch to your branch

To switch from master to your branch (and create it, if it does not exist)

git checkout -b your-branch

or if does exist and you just need to switch to your branch….

git checkout your-branch

Now you can start making your changes….

 Git add .

 Git commit -m “desc of changes to be specific as possible”

 Git push origin <your branch> 

Never push to Master!

Go to the GitHub repo in the browser now to create a pull request, check for conflicts, if no conflict merge to master and your done.

After merging to master on the browser…

 Git Status

Git checkout master 

*(this is really important - you must pull down latest master, to see your new changes that are newly merged in master and make sure you have a working app or you could have introduced bugs. also if you don’t do this you will be working on a older version that everyone else!!!). This will switch to masterbranch

BUT YOUR CODE in visual code HAS NOT SWITCHED YET!!!! This can be confusing and causes people to loose changes as they think they have latest master but they don’t.

 git pull 

—>>>>> to get what is in the master to show in visual code so you don’t end up commit older version of code

When you checkout master, you also have to pull (also a pull is same as a git Fetch followed by git Merge).

This sounds complicated but believe me this works!! There are many more commands we may beed to use, but this is the every day, team coding startegy!

Directions: https://materializecss.com/getting-started.html Add the CDN css and js files to Index.html.

npm install -g cordova

Change the scripts in package.json

Assumption:

Regular build will be for react app. Cordova build will be for cordova app. There wont be 2 builds at same time.

+ "start": "npm run remove:www && react-scripts start",
- "start": "react-scripts start"
+ "build": "npm run remove:www && react-scripts build",
- "build": "react-scripts build"
+ "build:cordova": "npm run remove:www && react-scripts build && node __script.js && move build www",
"test": "react-scripts test --env=jsdom",
+ "eject": "npm run remove:www && react-scripts eject",
- "eject": "react-scripts eject"
+ "remove:www": "if exist www rd /s /q www"

+ "start": "npm run remove:www && react-scripts start",
- "start": "react-scripts start"
+ "build": "npm run remove:www && react-scripts build",
- "build": "react-scripts build"
+ "build:cordova": "npm run remove:www && react-scripts build && node __script.js && mv build www",
"test": "react-scripts test --env=jsdom",
+ "eject": "npm run remove:www && react-scripts eject",
- "eject": "react-scripts eject"
+ "remove:www": "rm -rf www"

Package.json final version MAC looks like:

"start": "npm run remove:www && react-scripts start",
"build": "npm run remove:www && react-scripts build",
"build:cordova": "npm run remove:www && react-scripts build && node __script.js && mv build www",
"test": "react-scripts test --env=jsdom",
"eject": "npm run remove:www && react-scripts eject",
"remove:www": "rm -rf www"

Package.json final version WINDOWS looks like:

"start": "npm run remove:www && react-scripts start", 
"build": "npm run remove:www && react-scripts build", 
"build:cordova": "npm run remove:www && react-scripts build && node __script.js && move build www", 
"test": "react-scripts test --env=jsdom", 
"eject": "npm run remove:www && react-scripts eject", 
"remove:www": "if exist www rd /s /q www" 

create-react-app builds into build folder. But cordova needs application content to be in www folder. So above build:cordova will move the build folder to www.

www is cordova build folder thats needs to built for cordova app only. so this folder should be removed when building for react app. so remove:www validation is added to the scripts.

let FS= require('fs');

// read the index.html from build folder let data = FS.readFileSync('./build/index.html', 'utf8');

function insertContent(fullContent, beforeWhat, newContent) { // get the position before which newContent has to be added const position = fullContent.indexOf(beforeWhat);

// since splice can be used on arrays only
let fullContentCopy = fullContent.split('');
fullContentCopy.splice(position, 0, newContent);

return fullContentCopy.join('');

}

 will add the <meta> tags needed for cordova app

const afterAddingMeta = insertContent(data, "<link", <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">+ <meta name="format-detection" content="telephone=no">+ <meta name="msapplication-tap-highlight" content="no">);

will add <script> pointing to cordova.js const afterAddingScript = insertContent(afterAddingMeta, "<script", <script type="text/javascript" src="cordova.js"></script>);

updates the index.html file

FS.writeFile('./build/index.html', afterAddingScript, 'utf8', (err)=> { if(err) { throw err }; })

This script will add the necessary tags to index.html for cordova build.

cd out of create react app folder
cordova create <alternateAppName>
(Use different name to your react app name)
-->Creating a new cordova project.

copy the config.xml from cordova project to react-with-cordova project.
Note: May need to copy other folders based on the project requirements. For this project I dont need rest.

Note: May need to change id value in <widget id="com.example.sample"> of config.xml based on project name.

cd

## React App
### Start React app

npm start

Starts the regular create-react-app on localhost:3000/

### Build for React app

npm run build

Builds production build for react app. Also creates the build folder in your app.

## Cordova App
### Build for Cordova app
npm run build:cordova

builds the app by appending tags to index.html which will be needed for cordova builds

cordova platform add android

cordova build android 
--->BUILD SUCCESSFUL in 29s
46 actionable tasks: 46 executed
Built the following apk(s):
        /Users/louise/momscancode/realup/platforms/android/app/build/outputs/apk/debug/app-debug.apk
Email this to android phone user to test


Or connect android phone to your PC and enter
 cordova run android

## Option Browser Platform
### Add Browser platform
 cordova platform add browser

### Browser Build
cordova build browser

Note: This build needs www directory which is created from npm run build:cordova
### Run in Browser
cordova run browser

Runs the browser build in browser at localhost:8000 so you can debug

Debug:
After each issue:

npm run build:cordova cordova run android

to create a new apk file 

cordova build android

To Debug:https://geeklearning.io/apache-cordova-and-remote-debugging-on-android/
Enable debug on device, hook it up to your machine, 
then when you run the android app you can go to  chrome://inspect/#devices and inspect the console!

## To add a splashscreen to cordova

cordova plugin add cordova-plugin-splashscreen
https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/

## Heroku

git remote add heroku https://git.heroku.com/realupapp.git

git remote -v (check heroku added as repo)

heroku login git push heroku master

link to heroku app https://realupapp.herokuapp.com/