Refactor project types & add Next.js

[AWolf81]

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

• [x] 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.
• [x] 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
• [x] 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.
• [x] Add triangle next icon as Aaron proposed
• [x] 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[bot]]

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% <ø> (ø)	:arrow_up:
src/components/CreateNewProjectWizard/MainPane.js	0% <0%> (ø)	:arrow_up:
src/services/dependencies.service.js	25% <0%> (-1.32%)	:arrow_down:
...rc/components/TaskDetailsModal/TaskDetailsModal.js	0% <0%> (ø)	:arrow_up:
...nts/DevelopmentServerPane/DevelopmentServerPane.js	0% <0%> (ø)	:arrow_up:
src/services/project-type-specifics.js	83.33% <0%> (-16.67%)	:arrow_down:
src/components/TaskRunnerPane/TaskRunnerPane.js	0% <0%> (ø)	:arrow_up:
src/services/process-logger.service.js	33.33% <33.33%> (ø)
src/actions/index.js	93.39% <50%> (-0.89%)	:arrow_down:
src/reducers/tasks.reducer.js	61.46% <58.82%> (+1.46%)	:arrow_up:
... and 5 more

[superhawk610]

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]

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