Complete Walkthrough - Setting up an instance of our platform

[AndyatFocallocal]

Please link to other posts in the documentation section for expanding on simple top level instructions.

Domain Setup

Namecheap is a good choice.

Discourse port mappings: Port Mappings - Common ports and their services

1hr

React App Setup

Server set up on Digital Ocean

General Technical - Overview

Site Operations This node aims to document the overall way the site functions and changes to the codebase update production. Sub nodes appropriate for this article include Testing, Meteor, stats/metrics, and other infrastructure appropriate for modern webapps. Testing is currently an area identified for work. Codebase The codebase is hosted on github. https://github.com/focallocal/fl-maps There are two branches, master and fl-sleeper. This is messay and needs to be cleaned up at some poin…

Setup for Database passwords and secrets

30mins

Fork from main repo on Github

30mins.

Travis CI set to build from Github

Travis: TravisCI - The Build Process

Has some details but not a full walkthrough

This might be a 1 hour.

Installing Discourse

Nothing too scary. Here’s the walkthrough guide. I strongly suggest you follow this and don’t use the 1-click installer from Digital Ocean.

2hrs

Set up Cloudflare

You’ll need to:

• change the nameservers where you registered your domain and set them to point to the two from cloudflare. Click DNS on Cloudflare and scroll to the bottom to the page to find them.
• add 3 txt records for your mail server. We use Mailjet.
• Follow the guide in the section above to add 2 A records pointing to your new Digital Ocean Droplet IPs. These should be DNS only (at least during set up).

1hr

Discourse Initial Setup

Setting up Discourse via the admin section after launching a new site

If you’ve set up your own instance of our Reactjs app and installed a Discourse forum to connect it to, you’re next going to need to put in the correct settings in the admin section before it’ll run properly. Setting up your new account. Visit your chosen domain where Discourse is installed and you’ll see the ‘getting started wizard’ which will guide you through the 1st steps. [image] You should have already installed all the required plugins. If not visit the plugins guide Turn the plug…

1hr

@Marvelxy above this are tasks for you

Hooking Discourse and ReactJS via Docus

Components - Docuss

Our community building and discussion forum uses a pretty slick integration with Discourse the worlds largest opensource forum software. This sync enables us to use Discourse to handling the community building, communications, admin functions, and backend of the most of the platform. Settings in our Github https://github.com/focallocal/fl-maps/blob/master/public/dcs-website.json Docuss Project Github Home Client and Libraries schema Discourse Plugin Plugin In our Discourse settings you’ll…

…

Single Sign On (SSO) set up

SSO sign up and login

All our platforms and resources which require an online user account need to use Discourse’s SSO function which you can read about here This means that users should only need one account to sign in and remain signed in across any different software choices we offer. Where possible the databases should also be synced so users profile details are the same everywhere. Status: Our main build (maps): connected Brightertomorrowmap.com: available but needs reconnected news.focallocal.org: availa…

…

Discourse Plugins Installed

Discourse Plugins (this forum)

Quick Install If you already know what you’re doing here’s the code you need to install the currently used plugins: cd /var/discourse nano containers/app.yml hooks: after_code: - exec: cd: $home/plugins cmd: - git clone https://github.com/paviliondev/discourse-follow.git #- git clone https://github.com/paviliondev/discourse-landing-pages.g$ - git clone https://github.com/discourse/docker_manager.git - git clone https://github.com/davidtaylorhq/d…

This plugin needs to be setup separately:

Custom Layouts Widget Settings

The widgets made possible via the Custom Layouts plugin have a settings page which doesn’t appear to be linked in the admin section of the plugin or component at this time. You can access it directly here: https://publichappinessmovement.com/admin/layouts/widgets (Admin trust level needed)

…

Setup the Admin section on the ReactJS side

Component: Admin Section

Description from Kyle Chapman, who installed the package: A straight forward admin page. Admins can change user roles or delete them. Also, includes links to user posts so that moderators or admins can edit/delete the posts. There is a file that you will want to look at. imports\client\ui\pages\Admin\RolesPermissions\index.js because here you will see how the permissions are set. export const roleOptions = ["admin", "moderator", "user"] export const permissions = { adminPage: ["admin", "mod…

Customise text on ReactJS half of your platform (i18n)

Components: i18n for all text and languages

All text and images on our platforms should be in the i18n folder. This makes it very quick and easy to update it for translation or improving. i18n is a plugin for adding multiple languages. It’s reads the url and returns different text if the url is different. So if we hook it up to i18n/pl/ then redirect polish users to /pl, then the site will load the polish language. We intend to use this to convert our platforms into every language. If you come across any text or titles a platform user c…

This needs to be set separately:

Adding links in React (using React Router and CardLink)

Urls added in the React or Docuss part of the code need to be valid React links. In fl-maps, Docuss relies on React Router to interpret links correctly, so any link not going through React Router won’t work. You can see an example of it being pulled in here (and everywhere else where class CardLink is used). Rather than using “href” please use this: <Link to='/something_here'>Go to somewhere</Link>

…

Logos and images added

ReactJS:
On the React half logos and images are set via adding links to i18n. these can be internal with a relative url to the images folder in our your codebase, or they can be external by using a full url.

Recommended sizes of images should be commented in the codebase, if any aren’t please ask the @ReactMeteor team so they can advise and also add them for others in the future.

Discourse:

[Marvelxy]

Hi @AndyatFocallocal , I have added a prospective timeframe for the tasks related to me. I will look into them in details to see if the prospective times would work.

[AndyatFocallocal]

Great. I’ll send you details of the UX task too. The initial task is to plan how long it will take, and there want our answer by tomorrow if possible. I think the UX would be far easier if we had a platform with everything running on to review. Perhaps you can do that on a localhost version?

[Marvelxy]

Currently, the local version and live version are the same. I will use either.

[AndyatFocallocal]

Ok. You’ll have to install some plugins but i’ve added links to those already.

[Marvelxy]

If I use the live version, would I still need to install those plugins? I’m trying to reduce the time it would cost me.

[AndyatFocallocal]

It depends, if you can find screenshots online which are sufficient for the wireframe then you wont need to install them. If not you will need to so you can play with them for the wireframe.