Skip to content

Latest commit

 

History

History
133 lines (111 loc) · 6.95 KB

README.md

File metadata and controls

133 lines (111 loc) · 6.95 KB
Raw

Realtime App built with React & Meteor

1. Setup

Meteor Project

  • Includes:

    • Place to put code
    • Place to keep track of project dependencies
    • Development webserver

  • Meteor -> keep track of data in our app

  • React -> Take data to product HTML, handle user events

2. React Primer

Project Images Gallery

  • Meteor.startup(() => {}): takes the function, run it when Meteor has started up: meteor has loaded, all HTML & DOM elements are rendered

3. Meteor Overview - Employee Directory

Project Employee Directory

  • Folder:

    • client: to be bundled and served to client
    • server: server code
    • imports: shared between both client & server, executed first, before any client or server code

  • Generate fake data using Faker

  • Subscribe/Publish system

    • meteor remove autopublish to restrict access to backend data

  • react-meteor-data can be used to create a container - a function that update some amount of data being passed to the component whenever a subscription changes -> watch collection, if update, load all new updated records to the react component

  • Update & re-render component without using component-level state

4. URL Shortener

Project URL Shortener

Challenges

  • Way to store links
  • Redirect user from a shortened URL to the original one
  • Record a number of clicks for each URL

Initial Setup

  • Add Bootstrap as a Meteor package: meteor add twbs:[email protected]
  • npm install --save react react-dom
  • Setup Header component
  • Create Links collection in imports/collection to be shared between both client and server
  • Create URL form component, on form submit:
    • Validate URL input from user -> this.refs.inputRef.value
    • Create new token that matches this URL
    • Add the token and original URL to a links collection
  • meteor remove autopublish for setup secure publish/subscribe system

Manipulate data with Meteor

  • meteor remove insecure -> to securely access database & save data
  • Meteor.methods({'method_name': method_function}) and Meteor.call('method_name', args[, callback]) for creating and calling secure methods between client and server
  • Validate user url input
    • Using valid-url npm package and it's isUri(url) function
    • Using check, Match from meteor/check package
      • check: run validation on a var, if a var passes -> check does nothing, else -> throw an error
      • Match: used to run customed validation function

Display list of links

  • Setup publish/subscribe system
  • meteor add react-meteor-data

Intercepting requests with Meteor Middleware

  • Use meteor/webapp - Meteor server, for handling incoming request
    WebApp.connectHandlers.use(req => {/* handle request here */})
    or
    WebApp.connectHandlers.use(middleware)
  • Install connect-route for routing (similar to Express routing) -> creates a middleware that takes in HTTP request, check route then does according actions
  • Update number of clicks using Mongo Modifier {$inc: {}} inside the update() method, eg. Links.update(link, { $inc: { clicks: 1 }})

5. Collaborative Markdown Editor

Project dir Markdown Bin

Main features

  • User can navigate between different pages -> react-router
  • Need a full authentication system, using builtin Meteor methods
  • bins collection belongs specifically to only the owner/editor of a bin
  • //TODO
    • Explore more on user management
    • Let users choose to display bins that they own or they are shared with

Dependencies

  • meteor add react-meteor-data
  • meteor add twbs:[email protected]
  • meteor remove insecure
  • meteor remove autopublish
  • npm install react react-dom react-addons-pure-render-mixin

User Authentication

All already written by Meteor

  • Get Blaze (or generally other rendering libraries) to work with React to make use of Blaze account authentication forms
    • Let React renders a DOM element
    • Use React life cycle methods for calling function automatically
    • Find that particular DOM node and use another library to render to it (eg. inside componentDidMount())
    • Need to manually clean up that part rendered by other libraries (eg. using componentWillUnmount())
  • Install dependencies for this: meteor add accounts-ui accounts-password
  • Try using native implementation of bcrypt: meteor npm install --save bcrypt (faster than JS-implementation used by default in Meteor)

Create collection Bins

  • Schema: createdAt, content, ownerId, sharedWith
  • Access current user by using this.userId inside of the Meteor methods
  • Use of function keyword vs ()=>{}:
    • this inside an arrow function is the surrounding context
    • Use function keyword, this can be referred to the runtime context, so we can use this.userId
  • Setup publish/subscribe system for providing bins from the server and displaying bins on the client
    • Use createContainer() from meteor/react-meteor-data to subscribe the bins collection to the BinsList React component
  • Handle bin element onClick -> use arrow function (only function definition without invoking) onClick={() => this.onBinRemove(bin)} instead of passing a this.onBinRemove(bin) function (this is invoked with probably incorrect bin argument) right in the JSX -> can pass the correct bin argument into that function

Using React-Router for navigation

  • Use of BrowserRoute, Route, Switch
  • Access url params from React component using props.match.params.paramName
  • Alternative for anchor tag: Link from react-router-dom
  • Use this.props.history.push("url_str") to redirect the user

Hook up the main editor

  • Using React Codemirror
  • Note on react-codemirror bug -> editor doesn't re-render the component when state changes
    • Use "@skidding/react-codemirror": "^1.0.0" for npm package instead of the original one
    • Using import CodeMirror from '@skidding/react-codemirror';
  • Install dependencies:
    • npm install --save react-codemirror
    • meteor add sgslo:cmstyle for styling the editor
  • Use onEditorChange(content) to update and store bin content when user changes
  • markdown npm package for translate markdown str into html view
  • Use dangerouslySetInnerHTML={{ __html: rawHtml }} in a component to render html string as HTML. Unsafe because of higher chance for XSS to break the website

Sharing with other users

  • Create component for handle shared email
  • Setup new publication -> publish all the bins that an user has been shared with
    • Meteor.users.find(...) accesses users Mongo collection, auto-created by Meteor to stored registered users
    • Subcribe to the new sharedBins publication for components: BinsMain and BinsList