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

**URL:** https://publichappinessmovement.com/t/topic/1216
**Category:** Front End - Documentation
**Tags:** documentation, npm, local-dev-environmen, webdev, getting-started
**Created:** [25 April 2019 16:34 UTC](https://publichappinessmovement.com/t/topic/1216 "2019-04-25T16:34:56Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![AndyatFocallocal](https://publichappinessmovement.com/user_avatar/publichappinessmovement.com/andyatfocallocal/32/651_2.png) [@AndyatFocallocal](https://publichappinessmovement.com/u/AndyatFocallocal)
#### Post date: [25 April 2019 16:34 UTC](https://publichappinessmovement.com/t/topic/1216/1 "2019-04-25T16:34:56Z")

</div>

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

[https://www.meteor.com/install](https://www.meteor.com/install)

1. create a fork of this repository and then

2. Set up git

3. To get the most recent settings.json file [Request Access here](https://drive.google.com/open?id=155aTsFHxkt5x4LKxWenrPNtFQG_w_xxv). 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](https://brightertomorrowmap.com)’ to work on Focallocal or [Brighter Tomorrow](https://brightertomorrowmap.com)

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

1. run the project

2. make changes

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

4. if all the tests have passed, run

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:
> 
> ```auto
> 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:
> 
> ```auto
> 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:
> 
> ```auto
> 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](https://publichappinessmovement.com/t/topic/2630) 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:

- /map:  
which on the Meta site goes to here: [https://fl-maps.publichappinessmovement.com/map](https://fl-maps.publichappinessmovement.com/map)

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

# Common Bugs

- [Bcrypt Error](https://publichappinessmovement.com/t/topic/2631)
- [NPM Loop Error](https://publichappinessmovement.com/t/topic/2934/16)
- [Mup issue and file needs renaming](https://publichappinessmovement.com/t/topic/1589/50)

# 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.

---

<div class="post-metadata">

### Author: ![AndyatFocallocal](https://publichappinessmovement.com/user_avatar/publichappinessmovement.com/andyatfocallocal/32/651_2.png) [@AndyatFocallocal](https://publichappinessmovement.com/u/AndyatFocallocal)
#### Post date: [13 June 2019 15:58 UTC](https://publichappinessmovement.com/t/topic/1216/2 "2019-06-13T15:58:45Z")

</div>



---

<div class="post-metadata">

### Author: ![zdbrenda](https://publichappinessmovement.com/user_avatar/publichappinessmovement.com/zdbrenda/32/380_2.png) [@zdbrenda](https://publichappinessmovement.com/u/zdbrenda)
#### Post date: [10 October 2019 17:08 UTC](https://publichappinessmovement.com/t/topic/1216/3 "2019-10-10T17:08:32Z")

</div>

> [@AndyatFocallocal](#):
>
> obtain the most recent _settings.json_ file from slack, its pinned in the #meteor-maps thread, and place it in the project’s folder

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.

---

<div class="post-metadata">

### Author: ![AndyatFocallocal](https://publichappinessmovement.com/user_avatar/publichappinessmovement.com/andyatfocallocal/32/651_2.png) [@AndyatFocallocal](https://publichappinessmovement.com/u/AndyatFocallocal)
#### Post date: [10 October 2019 17:51 UTC](https://publichappinessmovement.com/t/topic/1216/4 "2019-10-10T17:51:28Z")

</div>

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

---

<div class="post-metadata">

### Author: ![zdbrenda](https://publichappinessmovement.com/user_avatar/publichappinessmovement.com/zdbrenda/32/380_2.png) [@zdbrenda](https://publichappinessmovement.com/u/zdbrenda)
#### Post date: [16 October 2019 03:00 UTC](https://publichappinessmovement.com/t/topic/1216/5 "2019-10-16T03:00:47Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![AndyatFocallocal](https://publichappinessmovement.com/user_avatar/publichappinessmovement.com/andyatfocallocal/32/651_2.png) [@AndyatFocallocal](https://publichappinessmovement.com/u/AndyatFocallocal)
#### Post date: [16 October 2019 10:38 UTC](https://publichappinessmovement.com/t/topic/1216/6 "2019-10-16T10:38:41Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![zdbrenda](https://publichappinessmovement.com/user_avatar/publichappinessmovement.com/zdbrenda/32/380_2.png) [@zdbrenda](https://publichappinessmovement.com/u/zdbrenda)
#### Post date: [16 October 2019 15:34 UTC](https://publichappinessmovement.com/t/topic/1216/7 "2019-10-16T15:34:59Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![AndyatFocallocal](https://publichappinessmovement.com/user_avatar/publichappinessmovement.com/andyatfocallocal/32/651_2.png) [@AndyatFocallocal](https://publichappinessmovement.com/u/AndyatFocallocal)
#### Post date: [16 October 2019 16:01 UTC](https://publichappinessmovement.com/t/topic/1216/8 "2019-10-16T16:01:29Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![zdbrenda](https://publichappinessmovement.com/user_avatar/publichappinessmovement.com/zdbrenda/32/380_2.png) [@zdbrenda](https://publichappinessmovement.com/u/zdbrenda)
#### Post date: [16 October 2019 16:37 UTC](https://publichappinessmovement.com/t/topic/1216/9 "2019-10-16T16:37:06Z")

</div>

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](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.

---

<div class="post-metadata">

### Author: ![AndyatFocallocal](https://publichappinessmovement.com/user_avatar/publichappinessmovement.com/andyatfocallocal/32/651_2.png) [@AndyatFocallocal](https://publichappinessmovement.com/u/AndyatFocallocal)
#### Post date: [16 October 2019 17:30 UTC](https://publichappinessmovement.com/t/topic/1216/10 "2019-10-16T17:30:09Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![zdbrenda](https://publichappinessmovement.com/user_avatar/publichappinessmovement.com/zdbrenda/32/380_2.png) [@zdbrenda](https://publichappinessmovement.com/u/zdbrenda)
#### Post date: [16 October 2019 19:41 UTC](https://publichappinessmovement.com/t/topic/1216/11 "2019-10-16T19:41:34Z")

</div>

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

---

<div class="post-metadata">

### Author: ![AndyatFocallocal](https://publichappinessmovement.com/user_avatar/publichappinessmovement.com/andyatfocallocal/32/651_2.png) [@AndyatFocallocal](https://publichappinessmovement.com/u/AndyatFocallocal)
#### Post date: [16 October 2019 19:42 UTC](https://publichappinessmovement.com/t/topic/1216/12 "2019-10-16T19:42:18Z")

</div>

me also. welcome to coding with our community 🙂

---

<div class="post-metadata">

### Author: ![msgfxeg](https://publichappinessmovement.com/letter_avatar_proxy/v4/letter/m/f07891/32.png) [@msgfxeg](https://publichappinessmovement.com/u/msgfxeg)
#### Post date: [24 November 2019 16:24 UTC](https://publichappinessmovement.com/t/topic/1216/13 "2019-11-24T16:24:42Z")

</div>

@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](https://brightertomorrowmap.com)’ runs the [btm](https://brightertomorrowmap.com) 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

---

<div class="post-metadata">

### Author: ![AndyatFocallocal](https://publichappinessmovement.com/user_avatar/publichappinessmovement.com/andyatfocallocal/32/651_2.png) [@AndyatFocallocal](https://publichappinessmovement.com/u/AndyatFocallocal)
#### Post date: [24 November 2019 16:35 UTC](https://publichappinessmovement.com/t/topic/1216/14 "2019-11-24T16:35:48Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![msgfxeg](https://publichappinessmovement.com/letter_avatar_proxy/v4/letter/m/f07891/32.png) [@msgfxeg](https://publichappinessmovement.com/u/msgfxeg)
#### Post date: [24 November 2019 16:44 UTC](https://publichappinessmovement.com/t/topic/1216/15 "2019-11-24T16:44:17Z")

</div>

Oh my 🙂 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 🙂

> [@AndyatFocallocal](#):
>
> 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](https://brightertomorrowmap.com) is currently not hooked up correctly and that’s a priority to get fixed.

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 ?

---

<div class="post-metadata">

### Author: ![AndyatFocallocal](https://publichappinessmovement.com/user_avatar/publichappinessmovement.com/andyatfocallocal/32/651_2.png) [@AndyatFocallocal](https://publichappinessmovement.com/u/AndyatFocallocal)
#### Post date: [24 November 2019 16:56 UTC](https://publichappinessmovement.com/t/topic/1216/16 "2019-11-24T16:56:43Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![AndyatFocallocal](https://publichappinessmovement.com/user_avatar/publichappinessmovement.com/andyatfocallocal/32/651_2.png) [@AndyatFocallocal](https://publichappinessmovement.com/u/AndyatFocallocal)
#### Post date: [24 November 2019 16:58 UTC](https://publichappinessmovement.com/t/topic/1216/17 "2019-11-24T16:58:06Z")

</div>

> [@msgfxeg](#):
>
> the masterwithoutdcs branch not the master branch am I correct ?

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

---

<div class="post-metadata">

### Author: ![msgfxeg](https://publichappinessmovement.com/letter_avatar_proxy/v4/letter/m/f07891/32.png) [@msgfxeg](https://publichappinessmovement.com/u/msgfxeg)
#### Post date: [24 November 2019 23:31 UTC](https://publichappinessmovement.com/t/topic/1216/18 "2019-11-24T23:31:10Z")

</div>

Thanks @AndyatFocallocal, no worries, now done and running yaaay 🙂

---

<div class="post-metadata">

### Author: ![zdbrenda](https://publichappinessmovement.com/user_avatar/publichappinessmovement.com/zdbrenda/32/380_2.png) [@zdbrenda](https://publichappinessmovement.com/u/zdbrenda)
#### Post date: [3 August 2021 01:43 UTC](https://publichappinessmovement.com/t/topic/1216/19 "2021-08-03T01:43:52Z")

</div>

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`

```auto
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/](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 🕶

---

<div class="post-metadata">

### Author: ![AndyatFocallocal](https://publichappinessmovement.com/user_avatar/publichappinessmovement.com/andyatfocallocal/32/651_2.png) [@AndyatFocallocal](https://publichappinessmovement.com/u/AndyatFocallocal)
#### Post date: [10 August 2021 12:39 UTC](https://publichappinessmovement.com/t/topic/1216/20 "2021-08-10T12:39:42Z")

</div>

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

[Next page](https://publichappinessmovement.com/t/topic/1216.md?page=2)
