Skip to content

Latest commit

 

History

History
299 lines (175 loc) · 7.78 KB

presentation-week11.md

File metadata and controls

299 lines (175 loc) · 7.78 KB
Raw

Week 11 Presentation

Draft logo

Roles

  • Scrum Facilitator: Chun
  • Devops: Chisha
  • UX Lead: Jo
  • QA: Nafisa

React with a Node server (without using Next.js) - CHISHA 😎

https://www.freecodecamp.org/news/how-to-create-a-react-app-with-a-node-backend-the-complete-guide/

  • Initially, we built our server from scratch
  • Server: ran on localhost/3001 npm run dev
  • Client-side: built from scratch locally. - We had to move into the client directory folder locally then run npm start
  • App would open on localhost/3000
  • Two ports using two servers 3000 and 3001
  • Nested package.jsons npm run all that runs all the servers at once

Issues we were having

Issues:

  • App not deploying to Heroku properly
  • Heroku's production and live stages set up
  • Issues with CORS (Cross Origin Request Server) (where you cannot pass security and sensitive issues from our Slack API around without using secure methods)
  • Confusion of where to install packages in the correct file client (local host) or root (telegran) json.packages
  • Different Node versions having an impact
"engines": {
    "node": ">=14.17.0 <15"
  },

Solution to Issue 💡

We have now decided to have ==one package.json.== We still have two servers (one for react and one for express) ==Client: React and Server: Express==

  • One package.json

Styled Components (Chun)

  1. npm install styled-components
  2. In components dir, create a styled component file, eg: Button.style.js
  3. In this file, create all the logic for creating a button, eg:
import styled from “styled-components”;

export const Button = styled.button`
    width: 100px;
    height: 50px;
    background-color: green;
`
  1. Make a Container.style.js for overall page styling

Extension for styled components: vscode-styled-components

React-router-dom

  • depency we installed to allows our app to navigate between different components while changing the browser URL

  • npm install --save react-router-dom

https://www.techomoro.com/how-to-create-a-multi-page-website-with-react-in-5-minutes/


import { BrowserRouter as Router, Route, Switch } from "react-router-dom";


 <div className="App">
      <Router>
        <Switch>
          <Route path="/" exact component={() => <Home />} />
          <Route path="/connect" exact component={() => <Connect />} />

How we worked:

Tuesday:

  • Setting up the server
  • Testing if we could send messages to Slack
  • Started writing some tests

Wednesday:

  • Deploying to heroku
  • Working on the speech to text functionality
  • UI of some of the pages and using react router

Thursday:

  • Rewritng our repo with just one package.json from an example
  • Style compnonents
  • Got messages to send to our slack channel

Final Tech Stack

Final Tech Stack... TBC

❓

Our NPM Packages

  • Express
  • bodyParser
  • Express pino logger 🍍 🍹
  • Node-Fetch
  • npm-run-all 🏃
  • nodemon
  • node-env-run
  • styled-components

Features Completed

  • Slack integration
    • Write messages to Slack ✔️
    • Receive messages from Slack ❎
    • Emoji React (Send Love) to received messages ❎
    • Distributed app (available in multiple Slack workspaces) ❎
  • SOS quick message option ❎
  • Speech-to-text writing ✔️
  • Simple UI ✔️
  • Written and Video tutorials ❎

Demo ✨

Things Learned 💡

  • Add "notes" to Kanban board and then press "convert to issue"

Things Learned 💡

  • .env file has an EQUALS SIGN BETWEEN THE KEY VALUE PAIRS!! NOT A COLON

✔️

NOT ❎

Milestones

  • Slack message on server start
  • Speech recognition works

gran sends a message

Challenges (Jo)

  • Node versions!! Eventually we did volta install [email protected] to get us all on the same version.
  • Having two package.jsons nested. (NPM package hell!)
  • Realising that we have two servers:

Challenges

  • Web tokens expiring because shared publicly (Github)
  • Massive merge conflicts from refactoring
  • Sending requests via a proxy server
  • React's special way of dealing with env variables

Error messages (Chun)

  • if error message mentions "modules not found", probably need to delete node_modules (rm -rf node_modules) and clear cache (npm cache clear --force). Then npm install. This should work but sometimes also need to delete package-lock.json. Closing and reopening terminal can also help.

Git Tips (Chun)

If you have changed github repo name, do git branch --set-upstream-to=origin/main main to update name locally

npm run build to run production version of app. This shows you any errors that may appear during deployment, gives you chance to sort them out before deploying.

npm install --package-lock-only sorts out package-lock conflicts.

Remember: npm install each time you pull because node_modules is hidden in gitignore (the reason it's in gitignore is it's too heavy to push and pull it to GH every time).

Estimates v Actuals (Chun)

https://github.com/fac21/final-project-telegran/projects/1?fullscreen=true

Gantt Chart (Chun)

https://docs.google.com/spreadsheets/d/1BdTd_8NZ0Ap0MPvyR2PvcSAN7FNQeox44xY42ZnEB4A/edit#gid=0