Remove express backend, replace with react-scripts (#253)

* start to mock out replacing server with create-react-app

* fix markdown rendering

* fix prop-type error

* start to cleanup package.json

* Removed some unused dependencies, upgrade others

* set base path

* simplify package.json scripts

* fixed pre-rendering

* update sample.env, disable jekyll, optimize path

* add bundle analyzer, switch some imports to lazy() for chunking, revert changes to fA icon import which dramatically increased bundle size

* invert link

* added descriptions to each page

* update readme

* update workflows

* improve readme

* update not found to fix warning

* start to mock out better tests

* switch back to dayjs from moment, reduce combined bundle size by 12%

* let react-scripts and react-snap handle setting public url

* clean up readme

* fix double description

* update tests

* lint

* add comments, remove unused deps

* removed some unused dependencies

* more dependency cleanup

.eslintrc

@@ -4,32 +4,34 @@
   "env": {
     "browser": true,
     "node": true,
-    "mocha": true
-  },
-  "globals": {
-    "BASE_PATH": "readable",
-    "GA_ID": "readable",
-    "NODE_ENV": "readable"
+    "jest": true
   },
   "rules": {
-    "no-console": ["error", { "allow": ["warn", "error", "info"] }],
+    "jsx-a11y/anchor-is-valid": ["error", {
+      "components": ["Link"],
+      "specialLink": ["to", "hrefLeft", "hrefRight"],
+      "aspects": ["noHref", "invalidHref", "preferButton"]
+    }],
+    "jsx-a11y/click-events-have-key-events": 0,
+    "jsx-a11y/href-no-hash": "off",
+    "jsx-a11y/no-static-element-interactions": 0,
+    "no-console": ["error", {
+      "allow": ["warn", "error", "info"]
+    }],
     "no-underscore-dangle": 0,
     "react/destructuring-assignment": 0,
+    "react/jsx-filename-extension": [1, {
+      "extensions": [".js", ".jsx"]
+    }],
     "react/jsx-one-expression-per-line": 0,
-    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
     "react/jsx-props-no-spreading": 0,
-    "react/jsx-wrap-multilines": [1, {"declaration": true, "assignment": true, "return": true}],
-    "jsx-a11y/no-static-element-interactions": 0,
-    "jsx-a11y/click-events-have-key-events": 0,
-    "jsx-a11y/href-no-hash": "off",
-    "jsx-a11y/anchor-is-valid": [ "error", {
-            "components": [ "Link" ],
-            "specialLink": [ "to", "hrefLeft", "hrefRight" ],
-            "aspects": [ "noHref", "invalidHref", "preferButton" ]
-          }],
+    "react/jsx-wrap-multilines": [1, {
+      "declaration": true,
+      "assignment": true,
+      "return": true
+    }]
   },
   "plugins": [
-    "mocha",
     "react"
   ]
-}
+}

.github/workflows/github-pages.yml

@@ -19,10 +19,8 @@ jobs:
       run: npm ci
     - name: Build and Deploy
       env:
-        PORT: 3000
         NODE_ENV: production
-        BASE_PATH: /personal-site
-        GA_ID: UA-68649021-1
+        REACT_APP_GA_TRACKING_ID: UA-68649021-1
         GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       run: | 
           git config user.name mldangelo

.github/workflows/node.js.yml

@@ -27,14 +27,11 @@ jobs:
     - run: npm ci
     - name: Lint
       run: npm run lint
-    - name: Build
-      run: npm run build --if-present
+    - name: Build and Statically Render
+      run: npm run predeploy
       env:
-        PORT: 3000
         NODE_ENV: development
-        BASE_PATH: /personal-site
     - name: Test
       run: npm test
       env:
-        PORT: 3000
         NODE_ENV: development

.gitignore

@@ -1,6 +1,9 @@
-# npm related 
+# prefer npm over yarn 
 yarn.lock
 
+# eslint
+.eslintcache
+
 # Logs
 logs
 *.log

README.md

@@ -1,20 +1,20 @@
 # Personal Website
 
-## [mldangelo.com](http://mldangelo.com) and serverless [mldangelo.github.io/personal-site](https://mldangelo.github.io/personal-site/)
+## [mldangelo.github.io/personal-site](https://mldangelo.github.io/personal-site/) and express-powered [mldangelo.com](http://mldangelo.com)
 
-My personal website. Easily modifiable, and built using modern javascript with Node.js, React, Express, React-Router, Hot Module Reloading, Webpack and many other technologies.
+My personal website. A simple, easily modifiable, statically-exportable [React](https://reactjs.org/) application that deploys automatically for free using [github pages](https://pages.github.com/). Built using modern javascript, based on [create-react-app](https://github.com/facebook/create-react-app) with React-Router, SCSS, [github actions](https://github.com/features/actions), and many other useful libraries.
 
-The `main` branch of this repository contains a simplified version of my website intended for serverless hosting on github pages. To view the source for the version hosted at [mldangelo.com](https://mldangelo.com), checkout the [server](https://github.com/mldangelo/personal-site/tree/server) branch.
+The `main` branch of this repository contains a statically-exportable simplified version of my website intended for serverless hosting on github pages. To view the source for the version hosted at [mldangelo.com](https://mldangelo.com), checkout the [server](https://github.com/mldangelo/personal-site/tree/server) branch.
 
 ## A note on adapting this repository to your own personal website
 
-Many people have contacted me about adapting this website. I have tried to make things as simple as possible. There are still bugs. I am sorry. If you find a bug, please email me (help@mldangelo.com) or submit an issue or a pull request.
+Many people have contacted me about adapting this website. I have tried to make things as simple as possible. There are still bugs. I am sorry. If you find a bug, please email me (help@mldangelo.com), submit a pull request (I'll buy you a coffee as a thank you), or submit an issue.
 
 ## Dependencies
 
 Tested with:
 
-* node >= v12, v14. [nvm](https://github.com/nvm-sh/nvm#installing-and-updating) recommended for managing node versions.
+* node >= v12, v14. [nvm](https://github.com/nvm-sh/nvm#installing-and-updating) is recommended for managing node versions.
 
 ## Set up
 
@@ -25,51 +25,61 @@ You may wish to fork this repository or remove my remote origin and add your own
     ```bash
     git clone git://github.com/mldangelo/personal-site.git
     cd personal-site
-    nvm install
+    nvm install # this is optional - make sure you're running >= node 12 with `node --version`
     npm install
     ```
 
-2. Next, you should create a `.env` file. To do this, run:
+2. Run the following command to build the react application and serve it with hot module reloading:
 
     ```bash
-    cp sample.env .env
+    npm start
     ```
 
-    and set values as appropriate. Most people will not need to make changes.
+    Your web browser should automatically open to `<ip>:<port>:<path>` default: [http://localhost:3000/personal-site](http://localhost:3000/personal-site). Continue reading to learn how to set these variables.
+
+This completes set up instructions. Please continue reading to learn how to modify this site to make it your own.
+
+## Checklist
 
-3. Run the following command to build the react application and serve it with hot module reloading:
+1. Create a `.env` file. To do this, run:
 
     ```bash
-    npm run dev
+    cp sample.env .env
     ```
 
-    Navigate to `<ip>:<port>` default: [http://localhost:7999](http://localhost:7999) to view my website.
+    and set values as appropriate. Most people will not need to modify this file.
 
-    This completes set up instructions. Please continue reading to learn how to modify this site to make it your own.
+2. Start by changing text in the sidebar. This file is located at `src/components/Template/Nav.js`.
+3. Add an image of yourself in `public/images/me_icon.jpg`. If you decide to change the filename, be sure to go back to the sidebar and change the image path there as well.
+4. Modify the text in `src/pages/Index.js`
+5. Modify the files in `src/data/resume/` next. When you're finished, go back and modify all of the other files in the `src/data/` directory.
+6. You've finished modifying >95% of the pages. Search through the rest of the files for references to `Michael` or `Angelo` and change values to your name.
+7. Change the description in `public/index.html`. You may also wish to add a new favicon or remove it. [This](https://realfavicongenerator.net/) website may be helpful.
+8. Change `homepage` in `package.json` to reflect where you plan to host the site. This is important for static exporting via react-snap. If you plan to use a custom url, create `public/CNAME` and enter your URL. You can run:
 
-## Checklist
+    ```bash
+    echo "YOUR_URL[.com]" > public/CNAME
+    ```
+
+    as a shortcut.
 
-1. Start by changing text in the sidebar. This file is located at `src/components/Template/Nav.js`.
-2. Add an image of yourself in `public/images/me_icon.jpg`. If you decide to change the filename, be sure to go back to the sidebar and change the image path there as well.
-3. Modify the text in `src/views/Index.js`
-4. Modify the files in `src/data/resume/` next. When you're finished, go back and modify all of the other files in the `src/data/` directory.
-5. You've finished modifying >95% of the pages. Search through the rest of the files for references to `Michael` or `Angelo` and change values to your name.
-6. Change the description in `server/views/index.tpl.html`. You may also wish to add a new favicon or remove it. [This](https://realfavicongenerator.net/) website may be helpful.
-7. Decide how and where you are going to host this project. I recommend purchasing your own domain name from [Google Domains](https://domains.google). If you would like to host on github pages, run `npm run deploy`. This will generate a new branch called `gh-pages`. Then go to `https://github.com/[your github username]/personal-site/settings` and configure accordingly:
+    I recommend purchasing your own domain name from [Google Domains](https://domains.google). If you would like to host on github pages, run `npm run deploy`. This will generate a new branch called `gh-pages`. Then go to `https://github.com/[your github username]/[your repository name]/settings` and configure accordingly:
 
-    ![github hosting instructions](docs/gh-pages.png)
+    <center><img src="docs/gh-pages.png"></center>
 
-8. Configure your domains DNS record. See [here]( https://help.github.com/articles/using-a-custom-domain-with-github-pages/) for more information.
-9. Change `homepage` in `package.json` to reflect where you plan to host the site. This is important for react-snap. If using a custom url, modify the [CNAME](/public/CNAME) file to point to your URL. If you plan to deploy to a /[path]
-(e.g. [https://mldangelo.github.io/personal-site/](https://mldangelo.github.io/personal-site/)), you should modify `BASE_PATH` in your `.env` and `sample.env` files and restart the express server. Note that you will now have to navigate to `localhost:[port]/[BASE_PATH]` when developing.
+9. Optionally, configure your domains DNS record. See [here]( https://help.github.com/articles/using-a-custom-domain-with-github-pages/) for more information.
 
 ## Deploying to Github Pages
 
+Modify the environmental variables and git remote url in [.github/workflows/github-pages.yml](.github/workflows/github-pages.yml)
+
+Make a commit and push your changes to main. That's it.
+
+If you would like to deploy manually, you can:
+
 1. Change `NODE_ENV` to `production` in `.env`
 2. Run `npm run deploy`
 
-That's it.
-
 Please feel free to reach out to me by filing an issue or at [help@mldangelo.com](mailto:help@mldangelo.com) for help configuring your project.
 
 ## Contributors