App Skeleton using Next.js, Node/Express, React #78

timmyichen · 2019-10-17T23:16:32Z

I have read Chapter's contributing guidelines.
My pull request has a descriptive title (not a vague title like Update README.md).
My pull request targets the master branch of Chapter.

This PR adds the basic skeleton of the app using the following technologies (mentioned in the stack conversation #2 :

React.js
Next.js for SSR
Node/Express

In addition:

it adds TypeScript to make the development process more smooth.
Dockerize the dev environment (more consistent experience across contributors)

Some other things it does that I enjoy but is a personal taste and is also RFC:

Adds alias for client and server to avoid ../../.. in the codebase
Adds express-async-handler and express-response-errors for better async support and error handling in express routes
Runs prettier on the code when making commits

Misc notes:

I left a lot of the defaults in for package.json, let me know if those should be changed (e.g. version)

TODO:

fix some typing for express-response-errors
update README
add example route using the above express packages
move tslint -> eslint

Please let me know your thoughts!

timmyichen · 2019-10-17T23:17:10Z

cc @timrodz @Zeko369 per our discussion on Discord

timrodz

I have reviewed your changes, and I'm happy with what I've seen. I only have some feedback to offer re: tsconfig & tslint - See comments for more information.

EDIT: Awesome work on this! 💯

tsconfig.json

timrodz · 2019-10-17T23:27:07Z

tslint.json

@@ -0,0 +1,14 @@
+{


Should we be using tslint or eslint? Source: Dev.to - Happy to talk about my implementation of eslint w/ typescript, although the post explains it clearly.

I have heard tslint will be discontinued soon

Yep - That's also mentioned in the post I linked.

it will be better to use eslint IMHO as like u guys said it will be deprecated soon

eslint it is then! I added it as a todo to the PR, does anyone want to make a PR to this branch for setting up eslint? I can probably get to it this weekend but if anyone wants to jump on it I'd be more than happy to hand over the reins 😃

tslint is now eslint - let me know what you guys think!

latchkostov

Looks good

ed42311 · 2019-10-17T23:54:34Z

Overall Looks stellar. Pulled it and ran it I see:

One thing that I would say is that it sounds like TS is not yet part of the collective consciousness, but I'm all for it. There would be stumbling, but only at the beginning. 🚀

francocorreasosa · 2019-10-18T00:04:10Z

Nice work! What do you think about using yarn instead of npm? So we leave the door open to use a monorepo with yarn workspaces.

server/index.ts

mandaputtra

body-parser aren't needed anymore it already on express 4.x

package.json

Zeko369 · 2019-10-18T05:39:06Z

Could we maybe use ts-node-dev, it does the same thing but looks nicer (no huge nodemon config), just ts-node-dev index.ts

timmyichen · 2019-10-18T07:49:55Z

Nice work! What do you think about using yarn instead of npm? So we leave the door open to use a monorepo with yarn workspaces.

Thanks! :) Can you tell me more about the advantages of yarn over npm? From what I understand, npm has caught up significantly over the past few years to the point where they're pretty comparable, but I am also not well versed in this either.

Zeko369 · 2019-10-18T07:52:39Z

Yarn workspaces and offline installs are something's that npm doesn't have and that are pretty useful. Also for lazy people you can do yarn script instead of npm run script

server/lib/next.ts

Lobarr · 2019-10-18T15:13:20Z

Good work @timmyichen. There's a minor issue in that the speccy script doesn't work as that dependency is not in the dev dependencies - requires an additional install. I also have some ideas on stuff to add to this PR such as adding the speccy docs to the docker-compose, adding a script to start docker-compose dev environment, etc. Is it okay to submit a PR to your branch?

timmyichen · 2019-10-18T15:34:18Z

Good work @timmyichen. There's a minor issue in that the speccy script doesn't work as that dependency is not in the dev dependencies - requires an additional install. I also have some ideas on stuff to add to this PR such as adding the speccy docs to the docker-compose, adding a script to start docker-compose dev environment, etc. Is it okay to submit a PR to your branch?

Whoops, thanks! I was a bit too hasty with fixing those merge conflicts 🙃 and PRs to my branch are most welcome, yes!

README.md

ScottBrenner · 2019-10-18T18:55:43Z

docker-compose.yml

+version: '3'
+services:
+  app:
+    image: node:10-alpine


If the "end product" of this project is a Docker container, how about geting started on creating a Dockerfile for it - instead of defining configurations within Docker Compose?

(copied from discord)

docker-compose will really shine when we add additional images, e.g. for postgres or redis or any other service we might need. i think dockerfiles are really only necessary if we're adding special config to a base image (at the moment the base node10 image should be sufficient for what we need)

but also, a dockerfile is probably a good idea for setup including npm install

a dockerfile is probably a good idea for setup including npm install

Yes, in future we will add many dependencies which then require npm install. Can you please go ahead and create dockerfile and link to Docker Compose

.eslintignore

ScottBrenner · 2019-10-19T00:49:44Z

Seeing this error with docker-compose up:

$ docker-compose up
Creating chapter_app_1 ... done                                                                                                                            Attaching to chapter_app_1
app_1  |
app_1  | > chapter@1.0.0 dev /usr/chapter
app_1  | > ./node_modules/nodemon/bin/nodemon.js --watch 'server/**/*.ts' --exec 'npm run dev:server'
app_1  |
app_1  | sh: ./node_modules/nodemon/bin/nodemon.js: not found
app_1  | npm ERR! file sh
app_1  | npm ERR! code ELIFECYCLE
app_1  | npm ERR! errno ENOENT
app_1  | npm ERR! syscall spawn
app_1  | npm ERR! chapter@1.0.0 dev: `./node_modules/nodemon/bin/nodemon.js --watch 'server/**/*.ts' --exec 'npm run dev:server'`
app_1  | npm ERR! spawn ENOENT
app_1  | npm ERR!
app_1  | npm ERR! Failed at the chapter@1.0.0 dev script.
app_1  | npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
app_1  | npm WARN Local package.json exists, but node_modules missing, did you mean to install?
app_1  |
app_1  | npm ERR! A complete log of this run can be found in:
app_1  | npm ERR!     /root/.npm/_logs/2019-10-19T00_48_01_021Z-debug.log
chapter_app_1 exited with code 1

Anyone else seeing this? Maybe I missed something, not super familiar with JavaScript stuff.

edit: nvm

This reverts commit 8075dc4.

timmyichen · 2019-10-19T01:47:11Z

I made a bad commit - just reverted it - will debug tonight - my bad!

…EADME"" This reverts commit cf502e5.

* chore: added speccy to docker compose dev environment * chore: added speccy to dev deps, added/updated scripts, fixed husky warning * test: added test for SomeComponent * docs: updated scripts and added testing * chore: setup jest testing

pages/index.tsx

package.json

Lobarr

Looks good IMO.

wuilliam321 · 2019-10-19T16:46:32Z

I think we are not going to use Typescript, isn't?

Zeko369 · 2019-10-19T17:08:50Z

@wuilliam321 We're still discussing it, but the current concusses is that we'll use JS in TS file for now, so we get the tooling and a bit of type safety, so that we have a balance of something that looks like JS and tooling associated with TS

ScottBrenner · 2019-10-19T17:59:15Z

docker-compose.yml

@@ -0,0 +1,20 @@
+version: '3'
+networks: 
+  chapter:


Don't necessarily need to specify a network like this, by default Compose sets up a single network.

$ docker-compose up WARNING: Some networks were defined but are not used by any service: chapter

ScottBrenner · 2019-10-19T18:00:02Z

docker-compose.yml

+  speccy:
+    image: node:10-alpine
+    command: 'npm run speccy:watch'
+    volumes:


Recommend creating a single top-level volume and having it referenced in the services, instead of declaring it twice.

Good catch!

#2)

ScottBrenner · 2019-10-20T05:01:40Z

README.md

+
+### Installing Docker
+
+Click [here](https://docs.docker.com/v17.12/install/) for the Docker installation site.  Scroll down to "Supported Platforms" and follow the instructions to download & install Docker Desktop for your operating system (or Docker CE for linux).


Suggested change

Click [here](https://docs.docker.com/v17.12/install/) for the Docker installation site. Scroll down to "Supported Platforms" and follow the instructions to download & install Docker Desktop for your operating system (or Docker CE for linux).

Click [here](https://docs.docker.com/install/#supported-platforms) for the Docker installation site and follow the instructions to download & install Docker Desktop for your operating system (or Docker CE for linux).

17.12 is outdated, 19.03 is the current version. This link ☝️ always goes to the latest.

ScottBrenner · 2019-10-20T05:03:09Z

docker-compose.yml

+    command: 'npm run dev'
+    working_dir: /usr/chapter/
+    volumes:
+      - data:/usr/chapter/


Suggested change

- data:/usr/chapter/

- data:/usr/chapter

Styling - matching the path of the other service's volume

I've gone ahead and removed all remaining tailing slashed in PR his original pr

tsconfig.json

package.json

nodemon.json

vaibhavsingh97 · 2019-10-21T12:04:10Z

docker-compose.yml

+version: '3'
+services:
+  app:
+    image: node:10-alpine


a dockerfile is probably a good idea for setup including npm install

Yes, in future we will add many dependencies which then require npm install. Can you please go ahead and create dockerfile and link to Docker Compose

* fix(setup) Add note for linux users about docker-compose problem with PWD * fix(client) Use named functions for components * fix(setup) Turn of ts noImplicitAny * fix(setup) Use es6 imports in next config * fix(docker) Remove top level volumes * fix(setup) add newline to end of package.json

basic app skeleton

2289b3b

update readme

c7219dc

timrodz suggested changes Oct 17, 2019

View reviewed changes

latchkostov approved these changes Oct 17, 2019

View reviewed changes

mandaputtra reviewed Oct 18, 2019

View reviewed changes

server/index.ts Outdated Show resolved Hide resolved

mandaputtra suggested changes Oct 18, 2019

View reviewed changes

cesarnml reviewed Oct 18, 2019

View reviewed changes

package.json Outdated Show resolved Hide resolved

timmyichen added 5 commits October 18, 2019 07:24

remove body parser

a15d9ad

tsconfig target esnext

6753c6d

pull upstream

a809c58

nodemon -> dev dep

5c148b6

api route examples

81dc4ad

viniciusalonso reviewed Oct 18, 2019

View reviewed changes

server/lib/next.ts Show resolved Hide resolved

custom typing for responseErrorHandler

8e8dd6b

oops fix speccy location

f95841a

timmyichen mentioned this pull request Oct 18, 2019

Use docker-compose for setting up the development flow #77

Closed

tslint -> eslint

919ba98

timmyichen changed the title ~~App Skeleton using Next.js, Node/Express, React [WIP/RFC]~~ App Skeleton using Next.js, Node/Express, React Oct 18, 2019

ScottBrenner reviewed Oct 18, 2019

View reviewed changes

README.md Outdated Show resolved Hide resolved

ScottBrenner suggested changes Oct 18, 2019

View reviewed changes

README.md Outdated Show resolved Hide resolved

ScottBrenner reviewed Oct 18, 2019

View reviewed changes

.eslintignore Outdated Show resolved Hide resolved

timmyichen added 2 commits October 18, 2019 17:44

add dockerfile, update installation instructions in README

8075dc4

emptyline at end of eslintignore

e9f9853

Revert "add dockerfile, update installation instructions in README"

cf502e5

This reverts commit 8075dc4.

timmyichen and others added 5 commits October 19, 2019 02:13

Revert "Revert "add dockerfile, update installation instructions in R…

54d4c99

…EADME"" This reverts commit cf502e5.

fix dockerfile and use npm ci

9511365

update readme, update nodemon watch files

23cb967

add next to the docs

d26ed0c

Add suggestions/fixes to skeleton (#1)

fedb1c1

* chore: added speccy to docker compose dev environment * chore: added speccy to dev deps, added/updated scripts, fixed husky warning * test: added test for SomeComponent * docs: updated scripts and added testing * chore: setup jest testing

timmyichen changed the title ~~App Skeleton using Next.js, Node/Express, React~~ App Skeleton using Next.js, Node/Express, React [WIP] Oct 19, 2019

no more dockerfile, update docs

dce1d61

timmyichen changed the title ~~App Skeleton using Next.js, Node/Express, React [WIP]~~ App Skeleton using Next.js, Node/Express, React Oct 19, 2019

sinharaksh1t reviewed Oct 19, 2019

View reviewed changes

pages/index.tsx Show resolved Hide resolved

sinharaksh1t reviewed Oct 19, 2019

View reviewed changes

package.json Outdated Show resolved Hide resolved

Lobarr reviewed Oct 19, 2019

View reviewed changes

add js and jsx extensions to configs

977c6c5

ScottBrenner reviewed Oct 19, 2019

View reviewed changes

mandaputtra approved these changes Oct 20, 2019

View reviewed changes

chore: removed unnecessary network, switched to using top level volume (

996eb57

#2)

ScottBrenner reviewed Oct 20, 2019

View reviewed changes

timmyichen mentioned this pull request Oct 21, 2019

Mvp/skeleton timmyichen/chapter#3

Merged

vaibhavsingh97 suggested changes Oct 21, 2019

View reviewed changes

Zeko369 merged commit 93f6aad into freeCodeCamp:master Oct 21, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

App Skeleton using Next.js, Node/Express, React #78

App Skeleton using Next.js, Node/Express, React #78

timmyichen commented Oct 17, 2019 •

edited

Loading

timmyichen commented Oct 17, 2019

timrodz left a comment •

edited

Loading

timrodz Oct 17, 2019

Utkarshbhimte Oct 18, 2019

timrodz Oct 18, 2019

MirzaChilman Oct 18, 2019

timmyichen Oct 18, 2019

timmyichen Oct 18, 2019

latchkostov left a comment

ed42311 commented Oct 17, 2019

francocorreasosa commented Oct 18, 2019

mandaputtra left a comment

Zeko369 commented Oct 18, 2019

timmyichen commented Oct 18, 2019 •

edited

Loading

Zeko369 commented Oct 18, 2019

Lobarr commented Oct 18, 2019 •

edited

Loading

timmyichen commented Oct 18, 2019

ScottBrenner Oct 18, 2019

timmyichen Oct 18, 2019

vaibhavsingh97 Oct 21, 2019

ScottBrenner commented Oct 19, 2019 •

edited

Loading

timmyichen commented Oct 19, 2019

Lobarr left a comment

wuilliam321 commented Oct 19, 2019

Zeko369 commented Oct 19, 2019

ScottBrenner Oct 19, 2019 •

edited

Loading

ScottBrenner Oct 19, 2019 •

edited

Loading

Lobarr Oct 19, 2019 •

edited

Loading

ScottBrenner Oct 20, 2019

ScottBrenner Oct 20, 2019

Zeko369 Oct 21, 2019

vaibhavsingh97 Oct 21, 2019


		### Installing Docker

		Click [here](https://docs.docker.com/v17.12/install/) for the Docker installation site. Scroll down to "Supported Platforms" and follow the instructions to download & install Docker Desktop for your operating system (or Docker CE for linux).

	Click [here](https://docs.docker.com/v17.12/install/) for the Docker installation site. Scroll down to "Supported Platforms" and follow the instructions to download & install Docker Desktop for your operating system (or Docker CE for linux).
	Click [here](https://docs.docker.com/install/#supported-platforms) for the Docker installation site and follow the instructions to download & install Docker Desktop for your operating system (or Docker CE for linux).

App Skeleton using Next.js, Node/Express, React #78

App Skeleton using Next.js, Node/Express, React #78

Conversation

timmyichen commented Oct 17, 2019 • edited Loading

timmyichen commented Oct 17, 2019

timrodz left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

latchkostov left a comment

Choose a reason for hiding this comment

ed42311 commented Oct 17, 2019

francocorreasosa commented Oct 18, 2019

mandaputtra left a comment

Choose a reason for hiding this comment

Zeko369 commented Oct 18, 2019

timmyichen commented Oct 18, 2019 • edited Loading

Zeko369 commented Oct 18, 2019

Lobarr commented Oct 18, 2019 • edited Loading

timmyichen commented Oct 18, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ScottBrenner commented Oct 19, 2019 • edited Loading

timmyichen commented Oct 19, 2019

Lobarr left a comment

Choose a reason for hiding this comment

wuilliam321 commented Oct 19, 2019

Zeko369 commented Oct 19, 2019

ScottBrenner Oct 19, 2019 • edited Loading

Choose a reason for hiding this comment

ScottBrenner Oct 19, 2019 • edited Loading

Choose a reason for hiding this comment

Lobarr Oct 19, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

timmyichen commented Oct 17, 2019 •

edited

Loading

timrodz left a comment •

edited

Loading

timmyichen commented Oct 18, 2019 •

edited

Loading

Lobarr commented Oct 18, 2019 •

edited

Loading

ScottBrenner commented Oct 19, 2019 •

edited

Loading

ScottBrenner Oct 19, 2019 •

edited

Loading

ScottBrenner Oct 19, 2019 •

edited

Loading

Lobarr Oct 19, 2019 •

edited

Loading