How do we manage local development and production environments? about pair-frontend

[MitchWilkins]

I think it is important to have a clear vision. What does this accomplish? What are the key components? How do people work on them? That could be added or could replace the README page.

I think the Slack channel is good and the communication through the issues tab is effective.

There is a projects tab next to the pull requests tab that we could use to organize tasks/stories. There are also things like trello to help with that too.

[ThomasBullock]

Gulp js is really good for this. https://scotch.io/tutorials/automate-your-tasks-easily-with-gulp-js Are you open to setting this up with the Sass version of Bootstrap? It's modular so would help with collaboration plus makes it easy it remove bootstrap features you don't need.

[JacksonBates]

Thanks @ThomasBullock.

Pardon my ignorance - but the create-react-app tool this was built with uses webpack in it's build process. Do you think that will cause issues, or do they play nicely together?

[ThomasBullock]

Don't worry about ignorance - I'd never heard of webpack :) Looking into it though it appears they do play together. http://stackoverflow.com/questions/33558396/gulp-webpack-or-just-webpack . Whether you need gulp remains to be seen however as maybe webpack can do it all and save you adding yet another FE technology. I don't know enough about webpack. Is it handling your css or just the js?

[hristijankiko]

Why would you use two build tools? gulp and webpack. I think one is good enough, and webpack is the perferred one for working with React. Or is there a feature that gulp has and webpack doesn't that I'm not aware of?

[JacksonBates]

If you run npm install in your forked repo, you'll be able to see the node_modules etc.

The webpack config is in node_modules/react-scripts/config:

Theres one for dev and for prod - so we should take a look through those carefully to determine what's going on and what we need to do.

[JacksonBates]

Ok, I've been thinking about this...looking for feedback / ideas:

We want to ensure that when a contributor runs this on localhost using npm start, that it communicates with a dev version of the backend as well - which means the backend repo should also be running with npm start and mongod should be running.

Then it should GET, POST, and DELETE to and from the dev backend. This likely means that dev frontend and dev backend shouldn't both choose port 3000...

Running npm build should create a deployable version that communicates with the production backend.

Does that sound like I'm on the right track?

[planigan]

That's the right track, yes. Of note, though, the magic that create-react-app is doing, I start the backend locally and then start the front end, it finds the conflicting ports and asks to use another, choosing 3001. This is not ideal and should be fixed, but I thought it was pretty nifty that it did that.

[JacksonBates]

@planigan that is pretty cool - I hadn't tried running them concurrently yet, but that will serve as a workaround until we change one of the ports. Once I've merged the current backend PR I'll have the cognitive space to think this one through to its conclusion :)

[jenovs]

I think there should be two options for contributors - full setup with db etc. and light setup with some hardcoded mock data for people who just want to fix some CSS. Default of course should be light one.

One option I think could be creating config file with something like this:

let serverUrl = 'real_server_url'; // ??? Not sure if this should be hardcoded here
if (process.env.NODE_ENV === 'development') {
  serverUrl = '/path/to/file/with/hardcoded/data/'
  // serverUrl = 'http://localhost:3456'  <-- uncomment for use with real server on port 3456
}

module.exports = serverUrl;

Then in App.js and Campers.js require this config file and replace http://this.is.heroku.server with required variable:

fetch(`${serverUrl}/api/v1/posts`)

Just thoughts.

[planigan]

Could also do something like:

let serverUrl = 'real_server_url'; // ??? Not sure if this should be hardcoded here
if (process.env.NODE_ENV === 'development') {
  serverUrl = process.env.MONGODB_URI || '/path/to/file/with/hardcoded/data/'
}

module.exports = serverUrl;

Then use dotenv and an .env file for configuration.

[jenovs]

So I implemented my suggestion in code and made a PR.
Seems to work.

[JacksonBates]

Cool - I'll check tomorrow. I'm working on the delete button at the moment :)