textbook / starter-kit

Starter kit for full-stack JavaScript projects

Welcome!

Hi, I'm Jon. I'm an:

• 🏢 Engineering consultant at Ignition Works and 33 Teams (currently working with HSBC) and mentor at Code Your Future
• 🪂 Extreme programmer into pair programming, test-driving development, and CI/CD
• 👯 Effective collaborator working in balanced teams to deliver delightful products early and often
• 👨‍💻 Adaptable polyglot shipping software in JavaScript and TypeScript (across Angular, Vue and React), Python, Java and Kotlin (with Spring), and even PHP (7, with Laravel)
• 🤖 Automation fan trying to get robots to do the repetitive stuff so humans can focus on what's important

📚 Check out my tutorial series on test-driven development in JavaScript:

1. FTW - the basic principles of TDD, showing unit testing using Jest
2. E2E - expanding to higher level testing, using Cypress for E2E and Jest for integration and unit testing of a simple Create React App UI with Testing Library
3. API - more options for test doubles as we bring in API calls and even random functionality to our React UI
4. Ohm - departing from RPS and building a resistor calculator REST API with Express and SuperTest

starter-kit's Issues

Nested client-side routing doesn't work

Describe the bug

In dev and prod mode, nested client-side routes (e.g. /about/this/site) will fail to render because the requests for the bundled JS get made to the wrong path (e.g. /about/this/runtime.<hash>.js). In prod mode these are handled by the fallback routing, but the response is the content of index.html, not JavaScript. In dev mode, they 404.

Checklist

• I have recreated the issue in the vanilla starter kit (this is a template repo, some issues may be related to code or configuration that has been added outside the starter kit).
• I am using a supported version of Node (all LTS versions, currently 10.x, 12.x and 14.x) and NPM (not Yarn).
• I have installed the correct dependencies (run npm ci if you're unsure, this will clear node_modules/ and install based on the package-lock.json).

To reproduce

1. Start the app in dev (npm run dev) or prod (npm run serve) mode
2. Navigate to http://localhost:3000/about/this/app

Expected behavior

The app should load without errors.

Actual behavior

The app doesn't load.

In prod mode you get errors in the console:

The resource from “http://localhost:3000/about/this/runtime.<hash>.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).

In dev mode you get 404s in the network tab and console.

Setup

Please complete the following information):

• OS: macOS 10.15.6
• Node: 12.18.3
• Browser: Firefox 79.0, Chrome 84.0.4147.135

Additional context

Part of the fix (suggested by @twrichards in CodeYourFuture/cyf-final-project-starter-kit-ldn6#7) is to set the $.output.publicPath in the Webpack configuration, but this breaks the externalised React and React DOM, because that path is added to the CDN links too.

install tailwindcss

**Is your feature request related to a problem? Please
I am trying to add tailwind to the starter kit but didn't manage to do it any help please

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Since there is no other way to contact you

https://stackoverflow.com/questions/76230081/cant-find-modules-and-services-paths

Mind your business and avoid editing my questions unless you have to provide a meaningful answer

Docker E2E tests fail with ERR_CONNECTION_CLOSED

When running the E2E tests in a Docker network, which is used in CI to verify that the production application can build and run correctly in Node 8, 10 and 12, the following error occurs:

> cypress run

Fontconfig warning: "/etc/fonts/fonts.conf", line 100: unknown element "blank"

====================================================================================================

  (Run Starting)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Cypress:    3.8.1                                                                              │
  │ Browser:    Electron 78 (headless)                                                             │
  │ Specs:      1 found (home.test.js)                                                             │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘


────────────────────────────────────────────────────────────────────────────────────────────────────
                                                                                                    
  Running:  home.test.js                                                                    (1 of 1)
ERR_CONNECTION_CLOSED (-100) loading 'https://app/__/#/tests/integration/home.test.js'
Error: ERR_CONNECTION_CLOSED (-100) loading 'https://app/__/#/tests/integration/home.test.js'
    at rejectAndCleanup (electron/js2c/browser_init.js:5879:21)
    at WebContents.failListener (electron/js2c/browser_init.js:5889:11)
    at WebContents.emit (events.js:203:13)

This doesn't seem to be specific to the starter kit, raised with Cypress maintainers as cypress-io/cypress#5482

Server's Babel config means invalid syntax could be emitted

Describe the bug

The use of "node": "current" (introduced in 1ad5199) in the server Babel configuration:

starter-kit/server/.babelrc

Line 4 in e420be3

["@babel/preset-env", { "targets": { "node": "current" } }]

means that, if the Node versions between where the code is built and where the code is running don't match, invalid syntax could be emitted. In general it means that different code could be running in different versions of Node, which could cause hard-to-debug problems in a team.

Checklist

• I have recreated the issue in the vanilla starter kit (this is a template repo, some issues may be related to code or configuration that has been added outside the starter kit).
• I am using a supported version of Node (all LTS versions, currently 12.x, 14.x and 16.x) and NPM (not Yarn).
• I have installed the correct dependencies (run npm ci if you're unsure, this will clear node_modules/ and install based on the package-lock.json).

Note: none of the syntax used in the base kit causes this issue to appear, but it's still an issue with the configuration.

To reproduce

• In src/server.js, switch || to ?? (using the nullish coalescing operator, supported from Node 14):

  -const port = parseInt(process.env.PORT || "3000");
  +const port = parseInt(process.env.PORT ?? "3000");

• Build the app (npm run build) using Node 16, so that { "node": "current" } is 16 and the ?? is retained in dist/server.js
• Run the app (npm start) using Node 12

Expected behavior

The app should start successfully, as Node 12 is a supported version:

starter-kit/package.json

Lines 94 to 95 in e420be3

	"engines": {
	"node": "^12 || ^14 || ^16",

Actual behavior

$ npm start

> [email protected] start path/to/starter-kit
> node dist/server.js

path/to/starter-kit/dist/server.js:9
const port = parseInt(process.env.PORT ?? "3000");
                                        ^

SyntaxError: Unexpected token '?'
    at wrapSafe (internal/modules/cjs/loader.js:915:16)
    at Module._compile (internal/modules/cjs/loader.js:963:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:60:12)
    at internal/main/run_main_module.js:17:47
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `node dist/server.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     path/to/.npm/_logs/2022-02-22T10_29_56_901Z-debug.log

Setup

• OS: macOS 12.2.1
• Node: 12.22.1 (run) and 16.14.0 (build)
• Browser: N/A

Additional context

N/A

Slow Heroku deployment due to Cypress

It's inefficient to download, unzip and install Cypress only to have it go unused and be pruned after the build. In the Dockerfile I disabled the binary install following the instructions here, but I can't seem to do it in the Heroku build.

I've tried:

• "env": {"CYPRESS_INSTALL_BINARY": 0} in app.json: sets runtime environment variables, so not accessible during the build:

  A key-value object for config variables to add to the app’s runtime environment.

• "heroku-prebuild": "export CYPRESS_INSTALL_BINARY=0" in package.json's scripts: doesn't seem to "stick" between the prebuild step and the install step