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