diff --git a/README.md b/README.md index ee1962d..1b25d67 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ -# WeConnect +# WeConnect Client -This WeConnect repository contains a Node/React/Flux Javascript application. +This WeConnect Client repository contains a React Javascript application. Interested in [volunteering or applying for an internship](https://wevote.applytojob.com/apply)? [Starting presentation here](https://prezi.com/p/6iu9aks7zqvs/?present=1). Please also [read about our values](https://docs.google.com/document/d/12qBXevI3mVKUsGmXL8mrDMPnWJ1SYw9zX9LGW5cozgg/edit) and @@ -9,9 +9,345 @@ To join us, please [review our openings here](https://wevote.applytojob.com/appl Our current version is here [https://WeVote.US](https://WeVote.US) and we are working on a new version now! -## Installing WeConnect - WORK IN PROGRESS + Our installation process is built to allow engineers all over America to contribute. It may seem complicated, but it allows anyone to be in a position to make suggestions, and get involved. -Installation on MacOs and Linux -1. [Preparing the Environment on Your Machine (MacOS and Linux)](docs/installing/ENVIRONMENT.md) +## Installing the React weconnect-client + +These instruction assume that you are installing on a Mac. If you use Windows or Linux, the installation procedure should be similar. + +This procedure is based on using the free Community edition of WebStorm, which has great Git integration, +a great integrated Node debugger, and has an excellent editor. + +If you have the paid version of WebStorm the instructions should be the same. + +**If you have some other preferred editor, we recommend that you still do this install, and then use your other editor as you wish!** +

+ +### If you don't already have one, create an account in [GitHub](https://github.com/) +[GitHub](https://github.com/) is where WeVote stores the source code for our various projects. +

+ +### Download and install WebStorm +The free Community edition is at https://www.jetbrains.com/webstorm/ + +License it as a free Community installation. + +Once installed, start WebStorm from Launch Pad or Spotlight + +Alt Text + +The first step is to press that "Clone Repository" button to clone the https://github.com/wevote/weconnect-client repository. +Enter the URL and press the Clone button. + +Alt Text + +Now the latest code is on your machine. + +Alt Text +

+ +### Configure the WebStorm display mode +If you like the default white characters on a black background, skip this step. + +Access the settings dialog from the gear icon in the upper right hand side of the WebStorm app. +Set the Theme as you would like, or have it "Sync with OS" (which is my preference), and then save. +

+ +Alt Text +

+ +### About WebStorm plugins +Plugins extend the capability of WebStorm and are worth exploring. If it sounds good, we usually install them, unless the suggestions are for off-topic for what we are useing WebStorm for today. +Plugins suggested by WebStorm are safe to install, and easy to remove if you don't like them. +

+ +### Run 'npm install' +If WebStorm prompts you to run "npm install" feel free to do it anytime. + +Alt Text + +"npm install" updates all the dependencies (node_modules i.e. libraries) that we import from other projects, and should never be a problem. + +"npm install" will often show lots of outdated libraries, and vulnerabilities ... WeVote gets +reports on these issues, and we resolve them periodically. Don't worry about the warnings at this poin.t + + + +### Install Homebrew (If it is not already installed) +If your version of WebStorm displays a green arrow to the left of the following command, +click it to install [Homebrew](https://brew.sh/). + +```bash +/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" +``` +Clicking the command results in the following output in the terminal +window. You will need your login password to allow MacOS to install +Homebrew. When it prompts you for an ENTER you can click in the terminal, and press Enter. + +``` +/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" +stevepodell@Steves-MBP-M1-Dec2021 weconnect-client % /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" +==> Checking for `sudo` access (which may request your password)... +Password: +==> This script will install: +/opt/homebrew/bin/brew +/opt/homebrew/share/doc/homebrew +/opt/homebrew/share/man/man1/brew.1 +/opt/homebrew/share/zsh/site-functions/_brew +/opt/homebrew/etc/bash_completion.d/brew +/opt/homebrew + +Press RETURN/ENTER to continue or any other key to abort: +``` +Homebrew will load the "formulae", (their cutesy name for scripts that install all sorts of +free open source programs). If you already had Homebrew installed, it will update +any ("taps" which are "formulae" that were already installed). + +When Homebrew completes it will leave the "RunMarkdown" terminal window at +a MacOS (Linux) prompt. + +You will now use Homebrew to install some more applications. +

+ +### Install Node +This project has a few scripts that run in Node, get the latest version of at least 22.0
+If you have an earlier version of Node installed, you will need to reinstall it. + +Check your node version via the terminal (This computer was at V18, and needed to be upgraded. Node had been previously installed with +Homebrew. "homebrew" is in the path to the Node executable (`/opt/homebrew/bin/node`), so we know it was installed with Homebrew.) + +``` +stevepodell@Steves-MacBook-Air weconnect-client % which node +/opt/homebrew/bin/node +stevepodell@Steves-MacBook-Air weconnect-client % node -v +v18.10.0 +stevepodell@Steves-MacBook-Air weconnect-client % +``` + +If your computer did not have Node installed with Homebrew, you will have to research how to upgrade your installation of Node. + +If Node was installed with Homebrew or you have never installed Node, continue... + +```bash + stevepodell@Steves-MacBook-Air weconnect-client % brew install node@22 + ... + ==> Caveats + node@22 is keg-only, which means it was not symlinked into /usr/local, + because this is an alternate version of another formula. + + If you need to have node@22 first in your PATH, run: + echo 'export PATH="/usr/local/opt/node@22/bin:$PATH"' >> ~/.zshrc + + For compilers to find node@22 you may need to set: + export LDFLAGS="-L/usr/local/opt/node@22/lib" + export CPPFLAGS="-I/usr/local/opt/node@22/include" + ==> Summary +🍺 /usr/local/Cellar/node@22/22.11.0: 2,628 files, 83.7MB + ==> Running `brew cleanup node@22`... + Disable this behaviour by setting HOMEBREW_NO_INSTALL_CLEANUP. + Hide these hints with HOMEBREW_NO_ENV_HINTS (see `man brew`). + stevepodell@Steves-MacBook-Air weconnect-client % +``` +If Homebrew asks you to make the following 4 manual changes to link in Node. Execute these 4 lines in your terminal. +```bash +stevepodell@Steves-MacBook-Air weconnect-client % echo 'export PATH="/usr/local/opt/node@22/bin:$PATH"' >> ~/.zshrc +stevepodell@Steves-MacBook-Air weconnect-client % echo 'export PATH="/usr/local/opt/node@22/bin:$P +stevepodell@Steves-MacBook-Air weconnect-client % export LDFLAGS="-L/usr/local/opt/node@22/lib" +stevepodell@Steves-MacBook-Air weconnect-client % export CPPFLAGS="-I/usr/local/opt/node@22/include" +stevepodell@Steves-MacBook-Air weconnect-client % +``` +Then confirm the version of Node is greater than V22, open a new terminal window (with the "+" icon) and type + +``` +stevepodell@Steves-MacBook-Air weconnect-client % node -v +v22.11.0 +stevepodell@Steves-MacBook-Air weconnect-client % +``` +

+ +### Set up your Git remotes within WebStorm + +Alt Text + +At WeVote we use different naming conventions for `origin` and `upstream` than you might be familiar with from other projects, so you +will need to rename the default git origin (which at WeVote is your private branch in GitHub +) + +Alt Text + +Edit the origin line, and change the name to upstream, then press OK + +Alt Text + +Then press the + button and set up the new value for β€œorigin”. +(DON’T USE SailingSteve β€” use your GitHub handle β€” the GitHub username that is in the URL after you sign in to GitHub .) + +Alt Text + +You may have to authenticate with GitHub at this point, after authenticating, continue... + +When done, your remotes will look something like this (with your GitHub handle instead of SailingSteve!) + +Alt Text + +At this point you are poised to make Git branches and pull requests. +

+ +### Load all the Node packages that we use in the weconnect-client +If you haven't already done this via a prompt from Webstorm, type +``` +stevepodell@Steves-MacBook-Air weconnect-client % npm install +``` +You can run this command as often as you want, and it will cause no harm. +

+ +### Make a live copy of .env-template to the .env file + +Right-click on the `config-template.js` file in Webstorm, and copy it, then paste it as `config.js` + +Alt Text +Alt Text + +Open `config.js` in WebStorm by double-clicking on it + +Alt Text + +Modify the `DATABASE_URL` line by substituting your Postgres username and password, and then save. + +Here is a filled in example: + +``` +DATABASE_URL=postgresql://jerrygarcia:jerryspassword@localhost:5432/WeConnectDB?schema=public +``` +

+ + +### Not now, but when you want to add a column in the future +**Don't do this now!** + +But someday, when you add a column or a new schema (table)... + +After editing or creating your schema/?.prisma file + +run `prisma migrate dev` + +### Add a Run Configuration in WebStorm to start the weconnect-client + +Open the pull-down that initially says "Current File", and select Edit Configurations +
+Alt Text
+ +In the Run/Debug Configurations dialog, press the "+" button and then select "Node.js" +Alt Text
+Then fill in the run configuration... +1) Enter `Start weconnect-client` in the Name field +2) Enter `weconnect-client.js` in the File field. +3) And press "OK" to save +
Alt Text +

+ +### Create a run config to start postgres +Next create a run config to start postgres +1) Add another "New Configuration", this time for a Shell Script (close to the bottom of the list of configurations on the right) +2) In this "Run/Debug Configurations" dialog, add a name "Start Postgres" +3) In the "Script Path" paste in `/usr/local/opt/postgresql@14/bin/postgres` + in the "Script Options" paste in `-D /usr/local/var/postgresql@14` +4) Remove any text in the "Interpreter Path" field. +5) Make sure "Execute in the terminal" is checked +6) Then press OK to save + +Alt Text + +(This run configuration is the equivalent of typing + +````/usr/local/opt/postgresql@14/bin/postgres -D /usr/local/var/postgresql@14```` + +in the terminal.) +

+ +### Install pgadmin4, a Mac based browser app for the postgres database +``` +stevepodell@Steves-MacBook-Air weconnect-client % brew install --cask pgadmin4 +``` +This will take a few minutes, when it completes launch the app from Launch Pad or Spotlight + +Register the server as WeVoteServer + +Alt Text + +And in the Connection tab set the Host name as localhost β€” also add your postgres Username and Password, then save + +Alt Text +

+ +On the left pane "Object Explorer" right click on "Databases" and add the "WeConnectDB" + +### Use the Prisma ORM to "migrate" the database and table definitions to the postgres server + +Generate the schema from prisma/schema.prisma to node_modules +``` +stevepodell@Steves-MacBook-Air weconnect-client % prisma generate +Prisma schema loaded from prisma/schema.prisma + +βœ” Generated Prisma Client (v5.22.0) to ./node_modules/@prisma/client in 73ms + +Start by importing your Prisma Client (See: https://pris.ly/d/importing-client) + +Help us improve the Prisma ORM for everyone. Share your feedback in a short 2-min survey: https://pris.ly/orm/survey/release-5-22 + +stevepodell@Steves-MacBook-Air weconnect-client % +``` + +Initialize the generated schema into the postgres database server. +``` +stevepodell@Steves-MacBook-Air weconnect-client % prisma migrate dev --name init +Environment variables loaded from .env +Prisma schema loaded from prisma/schema.prisma +Datasource "db": PostgreSQL database "WeConnectDB", schema "public" at "localhost:5432" + +Applying migration `20241126190549_init` + +The following migration(s) have been created and applied from new schema changes: + +migrations/ + └─ 20241126190549_init/ + └─ migration.sql + +Your database is now in sync with your schema. + +βœ” Generated Prisma Client (v5.22.0) to ./node_modules/@prisma/client in 104ms + + +stevepodell@Steves-MacBook-Air weconnect-client % +``` +

+ + +### Start the app! +First start postgres via the run configuration + +Alt Text + +Then start weconnect-client.js with the run configuration. +

Alt Text + +As you can see when you press the Green start arrow, the server starts up in a terminal window where you can see +logging. Any `console.log()` lines that you put in the code will appear in this JavaScript console for this Node based server (which has no DOM). + +Alternatively if you press the green bug icon, you start a debugging session, where you can set breakpoints, examine threads, and examine data +in a familiar way to what you might be used to with Chrome Dev Tools (Inspect) or debugging in PyCharm. + +Alt Text +

+ +### View the app in the Chrome browser + +When you navigate in Chrome to `http://localhost:4000/` you will see the client view of app (in these early days the UI is +generated on the server via the Pug UI package), this UI of course is rendered as a DOM within Chrome, +and as with any web app, right-clicking on the page and choosing Inspect, will allow you to run the Chrome Dev Tools. + +Alt Text + + diff --git a/docs/images/CodeInstalledInWebStorm.png b/docs/images/CodeInstalledInWebStorm.png new file mode 100644 index 0000000..dd19f5f Binary files /dev/null and b/docs/images/CodeInstalledInWebStorm.png differ diff --git a/docs/images/GitOriginMine.png b/docs/images/GitOriginMine.png new file mode 100644 index 0000000..2010c2b Binary files /dev/null and b/docs/images/GitOriginMine.png differ diff --git a/docs/images/GitRemoteOriginBefore.png b/docs/images/GitRemoteOriginBefore.png new file mode 100644 index 0000000..3b41427 Binary files /dev/null and b/docs/images/GitRemoteOriginBefore.png differ diff --git a/docs/images/GitRemoteUpstreamAfter.png b/docs/images/GitRemoteUpstreamAfter.png new file mode 100644 index 0000000..f891cce Binary files /dev/null and b/docs/images/GitRemoteUpstreamAfter.png differ diff --git a/docs/images/GitRemotesDone.png b/docs/images/GitRemotesDone.png new file mode 100644 index 0000000..61f3042 Binary files /dev/null and b/docs/images/GitRemotesDone.png differ diff --git a/docs/images/ManageRemotesMenu.png b/docs/images/ManageRemotesMenu.png new file mode 100644 index 0000000..3d4254b Binary files /dev/null and b/docs/images/ManageRemotesMenu.png differ diff --git a/docs/images/NpmInstall.png b/docs/images/NpmInstall.png new file mode 100644 index 0000000..dc26a5e Binary files /dev/null and b/docs/images/NpmInstall.png differ diff --git a/docs/images/WebStormAppearanceSettings.png b/docs/images/WebStormAppearanceSettings.png new file mode 100644 index 0000000..2ab4f9e Binary files /dev/null and b/docs/images/WebStormAppearanceSettings.png differ diff --git a/docs/images/WebstormCloneRepository.png b/docs/images/WebstormCloneRepository.png new file mode 100644 index 0000000..c5022d7 Binary files /dev/null and b/docs/images/WebstormCloneRepository.png differ diff --git a/docs/images/WebstormCopySelection.png b/docs/images/WebstormCopySelection.png new file mode 100644 index 0000000..d080d57 Binary files /dev/null and b/docs/images/WebstormCopySelection.png differ diff --git a/docs/images/WebstormEditConfig.png b/docs/images/WebstormEditConfig.png new file mode 100644 index 0000000..6cf18e5 Binary files /dev/null and b/docs/images/WebstormEditConfig.png differ diff --git a/docs/images/WebstormPaste.png b/docs/images/WebstormPaste.png new file mode 100644 index 0000000..7f5a003 Binary files /dev/null and b/docs/images/WebstormPaste.png differ diff --git a/src/js/config-template.js b/src/js/config-template.js index c771d6d..2f78ae1 100644 --- a/src/js/config-template.js +++ b/src/js/config-template.js @@ -1,7 +1,7 @@ /* eslint-disable */ // Note that we import these values where needed as "webAppConfig" module.exports = { - // weconnect React server for the "weconnect" web app + // weconnect React server for the "weconnect-client" web app NAME_FOR_BROWSER_TAB_TITLE: 'WeConnect', ORGANIZATION_NAME: 'WeVote', PROTOCOL: 'http://', // 'http://' for local dev (if not using SSL), or 'https://' for live server