Getting Started: Setting Up a Local Dev Environment - and related bug fixes

We strongly recommend running Linux either on a USB, dual boot, emulator, or as your primary OS. Running local dev environment on Windows has been managed a few times, but it is extremely temperamental and time consuming to set up and maintain as new errors tend to pop up almost daily.

Setting Up The Development Environment

  1. install meteor

Install Meteor.js | Meteor API Docs

  1. create a fork of this repository and then

    `git clone https://github.com/your-github-username/fl-maps >>> git clone -b master --single-branch https://github.com/your-github-username/fl-maps

  2. Set up git

    • git remote add upstream https://github.com/focallocal/fl-maps
      // make sure there are 2 remotes (origin that points to your fork and upstream for the original repo)
      git remote -v
    
    • every time you start working on a new feature, run: git pull upstream master which ensures you are always working with the most updated version of the project.

    • create a new branch git checkout -b new-feature-name

  3. To get the most recent settings.json file Request Access here. Message @AndyatFocallocal, @tmcnulty, @ArtyS, or another active member if it’s not approved in a few hours and you want to get coding.

After you obtain the most recent settings.json file and place it in the project’s folder
- settings.json has a property named 'mapType': 'gatherings' ,
you can change ‘gatherings’ to ‘btm’ to work on Focallocal or Brighter Tomorrow

(If the settings.json file doesn’t work (i.e, you can’t start the project by running npm run start), tag the @ReactMeteor team and the 1st person to see you message will offer support)

  1. run the project

    meteor npm install
    npm run start // see notes below if it fails to run
    
  2. make changes

  3. run tests (npm test or npm run test-watch)

  4. if all the tests have passed, run

      git add .
      git commit -m 'description of what has changed'
      git push origin your_working_branch_name
    
  5. go to github and create a new pull request from your fork (make sure it’s against the fl-maps/master branch)

(make sure it’s against the fl-maps/master branch) >>> (make sure it’s against the fl-maps/master branch)

If it Errors

** !if you encounter any errors related to sass-loader, run the following command! **

meteor npm rebuild node-sass --force

Currently you’ll see a Compiled with warnings. message, ignore it.

Step (5) Warnings

For step (5) be sure you don’t run meteor npm install twice. Just do it once followed by npm run start and it will work.

Detailed Explanation If run twice you may get several warnings such as these:
npm WARN bootstrap@4.1.1 requires a peer of jquery@1.9.1 - 3 but none is installed. You must install peer dependencies yourself.
  npm WARN react-google-maps@9.4.5 requires a peer of @types/googlemaps@^3.0.0 but none is installed. You must install peer dependencies yourself.
  npm WARN react-google-maps@9.4.5 requires a peer of @types/markerclustererplus@^2.1.29 but none is installed. You must install peer dependencies yourself.
  npm WARN react-google-maps@9.4.5 requires a peer of @types/react@^15.0.0 || ^16.0.0 but none is installed. You must install peer dependencies yourself.
  npm WARN uniforms@1.24.3 requires a peer of graphql@>=0.8.2 <1.0.0 but none is installed. You must install peer dependencies yourself.
  npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules/fsevents):
  npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

If you try to install them by:

meteor npm install jquery @types/googlemaps@^3.0.0 @types/markerclustererplus@^2.1.29 @types/react@^16.0.0 graphql@0.13.2

… then during the npm run start step, compile will fail with errors such as these:

ERROR in ./imports/both/i18n/en/categories.json
Module parse failed: Unexpected token < in JSON at position 149
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token < in JSON at position 149
...

ERROR in chunk main [entry]
...
W20190111-19:03:18.261(8)? (STDERR)     ERROR in /home/sum/sum/job/remoteok/focallocal/fl-maps/node_modules/graphql/index.mjs
2:0-49 Can't reexport the named export 'graphql' from non EcmaScript module (only default export is available)
...
W20190111-19:03:18.272(8)? (STDERR)     2:0-49 Can't reexport the named export 'graphqlSync' from non EcmaScript module (only default export is available)
...
W20190111-19:03:18.292(8)? (STDERR)     39:0-61:50 Can't reexport the named export 'DEFAULT_DEPRECATION_REASON' from non EcmaScript module (only default export is available)
...
W20190111-19:03:18.300(8)? (STDERR)     39:0-61:50 Can't reexport the named export 'GraphQLBoolean' from non EcmaScript module (only default export is available)

Updating Node & npm

If you’ve tried the above, and things still aren’t working you may need to update your version of node & npm. First, check your version of node by running node -v, and take note of it. The current version of node as of writing this is 11.9.0.

To update node, install the package n, by running the command: npm install -g n. After the installation, run n latest. note: you may need to run sudo n latest, if on Mac or Linux.

Updating npm is quite simple, the command being: npm install -g npm.

After updating the packages, close your current terminal and open a new one, so that the changes may take effect. Confirm the update by typing node -v.

Setting Up Discourse on Localhost

Our ReactJS and MeteorJS platform loads inside an i-frame inside Discourse and opensource forum and community building software, plugging their community building tools and god-tier admin section into our build. Here’s the thread for setting up Discourse on Localhost which will be needed for many tasks.

Navigating Localhost

The searchbar at the top on localhost is different from the one on the live website which comes from Discourse, so the navigation links there won’t get you where you want to go (although there are some fun easter eggs there).

You can find the map here:

All the pages and their relation on the map/reactjs side are listed here: https://github.com/focallocal/fl-maps/blob/master/public/dcs-website.json

Common Bugs

Please create a new post somewhere in the Web Dev Category for all bugs you encounter, even if you successfully solve it yourself

When solved @ tag Andy at Focallocal and i’ll add it here to help everyone who joins in the future.

Hi, I can’t find the #meteor-maps thread. Can anyone please paste a link to it? Is it in slack or in this website? I can’t find it in either one.

Thanks.

Oh, good spot. We haven’t moved that over. I’ll add it to the documentation files. If anyone can’t access that file please send me a message

Hi Andy,

I finally got it running with the settings.json file that Tom gave to me. Where do you think I should put the file? Is our discussion here safe from external users?

1 Like

Well done for persevering.

We’re a public forum and I’m not really sure where to put the file for new users… perhaps on our Google drive and those already in the team can send a link directly to anyone new who joins. What do you think?

How about I put the settings.json file to Google Drive and then give the link to whoever sends me a request? I will add access to the file in Google Drive from their emails. What do you think?

PS: How do I ensure that the settings.json file is always updated?

1 Like

that sounds good. i’ll put it on our shared one so that any of the dev team can share a link so others won’t have to wait so long. It’s not often updated so that issue shouldn’t come up often.

1 Like

So here’s my first task:

Under Item 4, put the following:

To get the most recent settings.json file, contact Brenda @zdbrenda, send her your email address, and after she has confirmed that your email address is added, open the file in Google Drive through the following link:

https://drive.google.com/file/d/185XxGU-p0r8pyGbU19pLWKM7gCNA5p8N/view?usp=sharing

If the settings.json file doesn’t work (i.e, you can’t start the project by running npm run start), please contact us.

What do you think?

PS: Please confirm that the link above only works with authorized email addresses.

1 Like

Perfect. I’ve just added it to our shared GDrive account and given access to you and a few others. Its good to have it available from a few people in case you are away on holiday or something. I wasn’t able to access your file so i took the one Tom shared in Slack, you didn’t need to make any changes to it did you?

1 Like

No, I didn’t modify anything. I am glad that it’s working.

1 Like

me also. welcome to coding with our community :slight_smile:

1 Like

@AndyatFocallocal @zdbrenda
At last I have managed to setup my local dev env and ran focallocal for the first time but there are a bit of strange things happening so kindly help me to fix those to be on the right track.

  • I have setup everything according to the pinned post above. However setting the ‘mapType’: ‘btm’ runs the btm site not the focallocal one also ‘mapType’: ‘gatherings’ runs the gatherings site. So, I wonder what is the correct setting for Focallocal site?

  • changing ‘mapType’: ‘*’ runs versions of the site that seems to be older I think (I deduced that may be I am wrong) so please clarify.

  • clicking on the big white arrow on the long dark gray bar does not take me to the local forum however gives a Error 522 connection timeout in all mapType cases as elaborated on the attached image below.

  • without touching anything the systems(i.e. maps) seems to be working in all mapType cases however, while running the npm tests I got 57 tests failing! If this is OK it is OK for me but if this is unusual kindly tell me what I may be doing wrong?

Kind Regards

Ah, ok. I got it. I think you’ve loaded up the Master branch while the currently live one is masterwithoutdcs . I know that’s not ideal, I’d like to rename them both, I forget why that was more complicated than I’d hoped.

Is that accurate?

PHM will look a little different as it loads in an iframe within Discourse, so the forum won’t be visible on your local host. The forum in BTM is currently not hooked up correctly and that’s a priority to get fixed.

Oh my :slight_smile: no problem I will clone the correct branch. BUT kindly updated the pinned post when you have time to spare for the sake of new commers.

Yes it is accurate, I followed the pinned post exactly :slight_smile:

Ok I got it now. there is no need for the forum as we(the react/meteor team member) will not modify or do any development in forums all our concern is the rest of the site am I correct ?

Also, I think and correct me if I am wrong my pull request should me against the masterwithoutdcs branch not the master branch am I correct ?

the React team do sometimes work on the React integration. for example setting BTM up to connect correctly would be a React team task as the changes needed are to the React Maps codebase.

1 Like

yes that is. sorry for the confusion. well done getting set up, it can be tricky :slight_smile:

1 Like

Thanks @AndyatFocallocal, no worries, now done and running yaaay :slight_smile:

1 Like

This is how I solved the issue of failing to download/install node-pre-gyp/bcrypt when running meteor npm install.

  1. I tried to run bcrypt -v but couldn’t find it. Then I was getting errors like following when running npm install bcrypt
npm ERR! code 1

npm ERR! path /Users/dan/Documents/fl-maps/fl-maps/node_modules/bcrypt

npm ERR! command failed

npm ERR! command sh -c node-pre-gyp install --fallback-to-build

npm ERR! CXX(target) Release/obj.target/bcrypt_lib/src/blowfish.o

npm ERR!   CXX(target) Release/obj.target/bcrypt_lib/src/bcrypt.o

npm ERR!   CXX(target) Release/obj.target/bcrypt_lib/src/bcrypt_node.o

npm ERR! Failed to execute '/usr/local/bin/node /usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js build --fallback-to-build --module=/Users/dan/Documents/fl-maps/fl-maps/node_modules/bcrypt/lib/binding/bcrypt_lib.node --module_name=bcrypt_lib --module_path=/Users/dan/Documents/fl-maps/fl-maps/node_modules/bcrypt/lib/binding --napi_version=7 --node_abi_napi=napi' (1)

npm ERR! node-pre-gyp info it worked if it ends with ok

npm ERR! node-pre-gyp info using node-pre-gyp@0.9.1

npm ERR! node-pre-gyp info using node@14.16.1 | darwin | x64

npm ERR! node-pre-gyp info check checked for "/Users/dan/Documents/fl-maps/fl-maps/node_modules/bcrypt/lib/binding/bcrypt_lib.node" (not found)

npm ERR! node-pre-gyp http GET https://github.com/kelektiv/node.bcrypt.js/releases/download/v2.0.1/bcrypt_lib-v2.0.1-node-v83-darwin-x64-unknown.tar.gz

npm ERR! node-pre-gyp http 404 https://github.com/kelektiv/node.bcrypt.js/releases/download/v2.0.1/bcrypt_lib-v2.0.1-node-v83-darwin-x64-unknown.tar.gz

npm ERR! node-pre-gyp ERR! Tried to download(404): https://github.com/kelektiv/node.bcrypt.js/releases/download/v2.0.1/bcrypt_lib-v2.0.1-node-v83-darwin-x64-unknown.tar.gz 

npm ERR! node-pre-gyp ERR! Pre-built binaries not found for bcrypt@2.0.1 and node@14.16.1 (node-v83 ABI, unknown) (falling back to source compile with node-gyp) 

npm ERR! node-pre-gyp http 404 status code downloading tarball https://github.com/kelektiv/node.bcrypt.js/releases/download/v2.0.1/bcrypt_lib-v2.0.1-node-v83-darwin-x64-unknown.tar.gz 
  1. I am working on a macbook, so I referred to this page for installing bcrypt on mac os:

https://macappstore.org/bcrypt/

  1. I ran ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 2> /dev/null and brew install bcrypt to install bcrypt and it worked.

  2. I deleted my package-lock.json file.

  3. I ran rm -rf node_modules to remove my node modules folder

  4. I ran npm install to reinstall other dependencies

  5. I ran meteor npm install and now it is working :sunglasses:

2 Likes

@zdbrenda thanks for sharing your process. It’ll be very helpful to others in the future :slight_smile: