Refactor project types & add Next.js #292

AWolf81 · 2018-10-14T20:31:56Z

Related Issue:
#59

Summary:
This branch is based on branch nextjs-flow (flow for workflow). I first started with this and I pushed it just for completeness. After merging the refactor branch we can safely delete the other branch.
I've merged the process-logging branch into this branch so it was easier to develop the refactoring.

Created a configuration file inside src/config/project-types.js which contains three objects for storing the following information:
- devServer task name
- devServer command args & port handling with "template" variable
Modified isDevServerTask, getDevServerTaskForProjectId & getTaskType to use the configuration object.

As mentioned in the issue comment I first had the idea of having a function inside of the configuration object but I don't like that.
Now I'm using the string $port inside of the configuration that will be replaced with the real port number in code. Just top-level replacement of $port is not working but I think we could add this later. Also not sure if we need to support deeply nesting as it is only working for one level e.g.

{
  env: {
    PORT: '$port'
  }
}

Will be replaced to (if available port is 3000):

{
  env: {
    PORT: 3000
  }
}

I think this is also the first step for improving the Gatsby workflow. Do we have an issue for Gatsby improvement? I think I read that on Gitter but I'm not sure what should be improved.

Things to improve / discuss:

Nextjs logo is a bit small and I don't like that we're having Next.js text twice. Maybe we could remove the second text. (see screeshot below)
Is the approach with the configuration in one file OK? I think that's better than the dynamic require. I'm also not sure if configuration is the right word for it. It's more like a mapping but I don't have a better word.
I tried to create a common structure with the configuration object but there is at least one position that is still adding some noise. e.g. task.saga line 179 adds additionalArgs to the command if test task running. We could also add this to the configuration but I think we can modify this later.
Should we swallow some log messages from Next.js? I think we don't need that many messages.

Todo

Check Gatsby Format & Test on master. It fails on this branch. This issue is not related to this branch. Same behaviour on master. Needs to be tackled separately.
I need to file an issue at create-next-app because with-out my fork it wasn't working with the projectDirectory passed to the script npx create-next-app c:\users\alexander\Guppy-dev\test wasn't working. Maybe I can create a PR there if no other solution is available. OK, added a comment here
Check Package.json of Next.js project and why there is start task missing. There is a start task but it's not visible in Guppy as Melanie mentioned. Checked start script Seems like it requires to run build before. So dev is the right command to start the development server. Start is not displayed as we're only filtering by task name so it gets removed from tasks list. I'll update this so we're more specific e.g. start & create-react-app. OK, I've modified this so the filtering is working but there is another issue because start from next.js is also a long-running script which launches a local server we're having trouble with it. I'll open an issue for it so I can describe it in detail.
Add triangle next icon as Aaron proposed
Modify comment for isDevServer as proposed by j-f1

Screenshots/GIFs:
Project create with Next.js

Next.js project

(failed build because I tested task stopping.)

codecov · 2018-10-14T20:32:40Z

Codecov Report

Merging #292 into master will increase coverage by 0.44%.
The diff coverage is 51.42%.

@@            Coverage Diff             @@
##           master     #292      +/-   ##
==========================================
+ Coverage   20.09%   20.54%   +0.44%     
==========================================
  Files         235      237       +2     
  Lines        3648     3690      +42     
  Branches      368      369       +1     
==========================================
+ Hits          733      758      +25     
- Misses       2648     2667      +19     
+ Partials      267      265       -2

Impacted Files	Coverage Δ
src/config/app.js	`100% <ø> (ø)`	⬆️
src/components/CreateNewProjectWizard/MainPane.js	`0% <0%> (ø)`	⬆️
src/services/dependencies.service.js	`25% <0%> (-1.32%)`	⬇️
...rc/components/TaskDetailsModal/TaskDetailsModal.js	`0% <0%> (ø)`	⬆️
...nts/DevelopmentServerPane/DevelopmentServerPane.js	`0% <0%> (ø)`	⬆️
src/services/project-type-specifics.js	`83.33% <0%> (-16.67%)`	⬇️
src/components/TaskRunnerPane/TaskRunnerPane.js	`0% <0%> (ø)`	⬆️
src/services/process-logger.service.js	`33.33% <33.33%> (ø)`
src/actions/index.js	`93.39% <50%> (-0.89%)`	⬇️
src/reducers/tasks.reducer.js	`61.46% <58.82%> (+1.46%)`	⬆️
... and 5 more

melanieseltzer

This is awesome! I definitely think adding support for Next is valuable. I have some notes and suggestions, and also a question:

create-next-app has a start task in package.json (running next start) but it's not getting picked up to display in Guppy. Is it because the word 'start' is flagged as a dev server task name (for CRA)?

Also, responses to your questions:

Nextjs logo is a bit small and I don't like that we're having Next.js text twice. Maybe we could remove the second text.

Personally I don't mind it and actually quite like the way it looks, but I can see how it could bother people. It might look weird to just have the logo without text, if the other two follow a different look?

Is the approach with the configuration in one file OK?

I like it better than dynamic requires 👍 Interested to hear other people's thoughts on this though.

Should we swallow some log messages from Next.js? I think we don't need that many messages.

I think that might be a good idea if it's an easy thing to do, but I don't think it's critical. Although for the dev task in particular, it would be cool to replicate the progress bar - I wonder if there's a way to do that?

melanieseltzer · 2018-10-15T03:31:09Z

src/reducers/tasks.reducer.js

@@ -251,7 +256,7 @@ export const getTaskDescription = (name: string) => {

 export const isDevServerTask = (name: string) =>
  // Gatsby and create-react-app use different names for the same task.
-  name === 'start' || name === 'develop';
+  devServerTaskNames.indexOf(name) !== -1;


Nit: add next.js to comment

// Gatsby, create-react-app and next.js use different names for the same task.

Also any reason not to use includes() here rather than indexOf()? I find it a lot more intuitive.

Yes, you're right. includes is better as it's more intuitive. I'll change the comment & the includes later today.

Perhaps “Each framework uses a different name for the task that starts the development server”? That way, it doesn’t have to be changed for each new framework.

@j-f1 Even better :)

src/sagas/task.saga.js

melanieseltzer · 2018-10-15T03:59:04Z

src/components/CreateNewProjectWizard/MainPane.js

+                      <Spacer inline size={10} />
+                      <ButtonWithIcon
+                        showStroke={projectType === 'nextjs'}
+                        icon={<GatsbyIcon src={nextjsIconSrc} />}


I think since GatsbyIcon is getting re-used now on something non Gatsby, we should generalize it (and ReactIcon) and have width and height props:

<IconImage width={'...'} height={'...'} src={...} />

const IconImage = styled.img` width: ${props => props.width || '32px'}; height: ${props => props.height || '32px'}; `;

Oh, good catch. That was my mistake I should have created a NextjsIcon - I missed that point.
I think I'll do the mapping as mentioned in line 83. So we only have the IconImage and map over the configuration keys to render the project type selection icons.

melanieseltzer · 2018-10-15T03:59:40Z

src/components/CreateNewProjectWizard/MainPane.js

@@ -79,6 +80,7 @@ class MainPane extends PureComponent<Props> {
                    isFocused={activeField === 'projectType'}
                  >
                    <ProjectTypeTogglesWrapper>
+                      {/* Todo: Make it easier to add new flows - e.g. map over an array to generate the UI*/}


superhawk610 · 2018-10-15T19:48:58Z

Looking around, I've seen this Next.js logo used a couple places, I think it would fit slightly better with the existing icons?

AWolf81 · 2018-10-31T20:59:20Z

@melanieseltzer I think I've addressed your review changes. Could you please have a look?

The only open things are:

Using my fork for create-next-app. I think we can change it later to the base repo once we're having a feedback from the maintainer (11 days with-out feedback).
The second dev server start script is a problem as it's not detected as long running (see separate issue)
Script description needs to be per project type (see separate issue)

I think we can tackle the open stuff afterwards.

melanieseltzer

LGTM, I like the new triangle icon! Approving with some small non-critical comments. I think it can be merged as is since you've created the separate issues.

melanieseltzer · 2018-11-01T00:20:02Z

src/sagas/task.saga.js

+          );
+        }
+      }
+      // todo: add top level substiution - not used yet but maybe needed later e.g. { env: $port } won't be replaced.


nit: typo (substitution)

melanieseltzer · 2018-11-01T00:46:20Z

src/config/project-types.js

+      // not sure if we need that nesting but I think there could be more to configure
+      args: projectPath => [
+        // used for project creation previous getBuildInstructions
+        'github:awolf81/create-next-app', // later will be 'create-next-app' --> issue not filed yet


Perhaps update the comment for 'github:awolf81/create-next-app' to reference the issue URL, for tracking?

AWolf81 added 7 commits October 9, 2018 23:24

add process logger service

3653634

removed winston

dd5e77e

fixed test

91a20c7

Merge branch 'process-logger' into nextjs-flow

6ae6be3

added next.js project type

aba6966

WIP: Initial refactor. Just Gatsby format & test needs to be checked.

b5ca5d1

fixed flow typing

e16204d

AWolf81 requested review from bennygenel, joshwcomeau, melanieseltzer and superhawk610 October 14, 2018 20:31

melanieseltzer suggested changes Oct 15, 2018

View reviewed changes

AWolf81 added 5 commits October 20, 2018 11:35

replaced icon to triangle logo

030b40c

changed devServer handling

5465689

disabled logging

470ec2e

added NextjsIcon styled component

e91b706

added explanation comment to substituteConfigVariables function

c7fbb21

AWolf81 changed the title ~~[WIP] Refactor project types & add Next.js~~ Refactor project types & add Next.js Oct 20, 2018

This was referenced Oct 20, 2018

Script descriptions per projectType #296

Open

Next.js start script - second long-running task #297

Open

Choice of starter on project creation #47

Open

melanieseltzer approved these changes Nov 1, 2018

View reviewed changes

updated comment

a5f212d

AWolf81 merged commit e7d8057 into master Nov 1, 2018

AWolf81 deleted the refactor-project-types branch November 1, 2018 13:48

AWolf81 mentioned this pull request Nov 2, 2018

[Proposal] next.js support #59

Closed

AWolf81 mentioned this pull request Nov 25, 2018

Gatsby starter #335

Merged

18 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Refactor project types & add Next.js #292

Refactor project types & add Next.js #292

AWolf81 commented Oct 14, 2018 •

edited

Loading

codecov bot commented Oct 14, 2018 •

edited

Loading

melanieseltzer left a comment

melanieseltzer Oct 15, 2018

AWolf81 Oct 15, 2018

j-f1 Oct 15, 2018

melanieseltzer Oct 15, 2018

melanieseltzer Oct 15, 2018

AWolf81 Oct 15, 2018

melanieseltzer Oct 15, 2018

superhawk610 commented Oct 15, 2018

AWolf81 commented Oct 31, 2018

melanieseltzer left a comment

melanieseltzer Nov 1, 2018

melanieseltzer Nov 1, 2018

Refactor project types & add Next.js #292

Refactor project types & add Next.js #292

Conversation

AWolf81 commented Oct 14, 2018 • edited Loading

codecov bot commented Oct 14, 2018 • edited Loading

Codecov Report

melanieseltzer left a 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

superhawk610 commented Oct 15, 2018

AWolf81 commented Oct 31, 2018

melanieseltzer left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

AWolf81 commented Oct 14, 2018 •

edited

Loading

codecov bot commented Oct 14, 2018 •

edited

Loading