Getting started

React Most Wanted Wiki

Getting Started

Since I hope that any developer cloning this repo has experience with React JS, I'm going to bypass a lot of the explanations and get straight into the good stuff. If you need additional support, please check the README for links.

For using this repo you can fork it or clone it to your local machine.

To make this app yours, there are several items that need to be taken into consideration.

• Make sure you sign up for a free Firebase account. Cant do anything without this.
• Initialize your project with the proper credentials and project-related information from Firebase. You will find the relevant information within the docs.
• Update the src/config.js file with the appropriate api information, obtained from the Google Firebase Console.
  • You can adjust the Firebase oAuth providers you would like to use by simply removing them from the firebase_providers array.
  • You can change your initial "Theme" which is defaulted to Dark. Make sure you understand how theming is accomplished before making changes.
  • You can change your initial locale from 'en' to one of the other loaded locales, or create your own. These files are located at src/locales and there will be Wiki page for them created at some point.
  • You can also update your Drawer Width by updating the drawer_width value.
• As you work through the components and containers, you will continuously see things like intl.formatMessage({id: 'companies'}). DO NOT try and edit these out. To clear up any confusion of what this does and how it works, go to src/locales/en.js.
  • Including internationalization in your app from day 1 and building with it in mind is a lot easier than trying to add it later. Update messaging, labels, etc. right from the locales files.
• Update the name of your app in the src/locales/en.js file first, then when your are ready, update the other language files.
• Update the name of your app in public/index.html in the appropriate spots (there are 2).
• Update the name of your app in public/manifest.json. This will need a short_name which is not to exceed more than 12 characters, and a name (Full name of your app). More information on the Web App Manifest
• Update the messagingSenderId in public/firebase-messaging-sw.js to your 'messagingSenderId' in your config.
• If your wondering why the logo hasnt changed on the app when you have clearly changed all the files in the public directory, its because you missed one. The quickest way to update the logo is to go to src/components/Icons/RMWIcon.js and update the content of this file with your logo's svg content. Or replace the icon file with your own and rename it in src/components/Drawer/DrawerHeader.js (Don't forget to add it to src/ccomponents/Icons/index.js).
• Functions
  • functions/auth/onCreate.f.js
    • Lines 29, 31 & 32 need to be updated relevant to your app and the email/ message you want to have sent to a "new user" upon account creation.
    • Don't forget to setup the email configs for the firebase functions using firebase functions:config:set gmail.email="[email protected]" gmail.password="secretpassword" (Needs to be a gmail email to work here, and you will most likely need to allow insecure apps from within your gmail email account. Log into the gmail account you are going to use for sending these messages and explicitly change this setting.).
  • functions/auth/onDelete.f.js
    • Lines 16, 20 & 21 need to be updated relevant to your app and the email/message you want to have sent to a user that has just deleted their account.
    • No need to set the functions:config as it is a Global and done once, does not need to be set again.
  • functions/db/publicChats/onCreate.f.js
    • Update line 40 with the full url of your app + /public_chats.
  • functions/db/publicTasks/OnCreate.f.js
    • Update line 39 with the full url of your app + /tasks.
  • functions/db/userChatMessages/onCreate.f.js
    • Update line 61 with the full url of your app + /chats/edit/${senderUid}.
• Update the "name" field in the main package.json file to reflect the name of your app.

While this list will help you on your way, I recommend going through each file and gaining an understanding of what and where everything is. This list is not all inclusive and will most likely be updated shortly with additional information.

Look for additional links to cover topics like Routing and Themes / Localization.