mike-works / pwa-fundamentals

👨‍🏫 Mike & Steve's Progressive Web Fundamentals Course
https://frontendmasters.com/courses/progressive-web-apps/
Other
270 stars 117 forks source link

Can't get it working on Windows #815

Open arthurmmedeiros opened 4 years ago

arthurmmedeiros commented 4 years ago

Hi there, First of all I have to say that I am very excited to do this tutorial, but I got stuck in the first exercise =/

Turns out these guys were having the same issue I'm facing, but there was no answer for the issue https://github.com/mike-works/pwa-fundamentals/issues/47

After 3 hours trying to make it work I decided to open this thread.

So, I have all the packages and tools installed in my machine. By looking at that post above I figured I needed OpenSSL installed, and also Git Bash to run the commands (why??).

npm run watch:api seems to be working

however, npm run watch returns me this

concurrently --names 'API,UI' -c 'bgBlue,bgMagenta' 'npm run watch:api' 'npm run watch:ui'

['API] ''npm' is not recognized as an internal or external command,
['API] operable program or batch file.
[UI'] 'run' is not recognized as an internal or external command,
[UI'] operable program or batch file.
[3] ''npm' is not recognized as an internal or external command,
[3] operable program or batch file.
[2] The filename, directory name, or volume label syntax is incorrect.
[4] 'run' is not recognized as an internal or external command,
[4] operable program or batch file.
[3] 'npm exited with code 1
[UI'] run exited with code 1
['API] 'npm exited with code 1
[5] The filename, directory name, or volume label syntax is incorrect.
[4] run exited with code 1
[2] watch:api' exited with code 1
[5] watch:ui' exited with code 1
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @mike-works/pwa-fundamentals@0.0.0-development watch: `concurrently --names 'API,UI' -c 'bgBlue,bgMagenta' 'npm run watch:api' 'npm run watch:ui'`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @mike-works/pwa-fundamentals@0.0.0-development watch 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:

Any idea what be causing it? Again, this is the same error someones described in that other post, but there was no answer explaining how to solve it.

Would it be possible to have a tutorial showing how to set up the environment on windows?

Also... why using NPM and Yarn? Should we not be using only one of them?

BennieCopeland commented 4 years ago

What I've done to get this working so far:

  1. I generated a certificate using Pluralsights Self Signed Cert tool and saved it as a PFX
  2. Used Leader SSL online converter to get a PEM file. (DO NOT USE FOR PRODUCTION CERTS)
  3. Split the PEM file into cert.pem and key.pem files in the private folder of the solution
  4. Change the package.json watch script to "watch": "concurrently --names 'API,UI' -c 'bgBlue,bgMagenta' \"npm run watch:api\" \"npm run watch:ui\"",
  5. Change "/server/api-server/index.js" file to the following to remove the need for openssl:
    
    const fs = require('fs');
    const chalk = require('chalk');
    const express = require('express');
    const cors = require('cors');
    const path = require('path');
    const https = require('https');
    const bodyParser = require('body-parser');
    const router = require('./router');
    const Db = require('./db');
    const NotificationManager = require('./utils/notification');

const TLS_KEY_PATH = path.join(dirname, '..', '..', 'private', 'key.pem'); const TLS_CERT_PATH = path.join(dirname, '..', '..', 'private', 'cert.pem');

function startAndListen(app, port) { return new Promise((resolve) => { app.listen(port, () => { resolve(); }); }) }

var corsOptions = { credentials: true, origin: function (origin, callback) { callback(null, true); } }

let httpsOptions = { key: fs.readFileSync(TLS_KEY_PATH), cert: fs.readFileSync(TLS_CERT_PATH) };

class ApiServer { constructor() { this.db = new Db(); this.notifications = null; }

_startApi() { this.app = express(); this.app.disable('x-powered-by'); this.app.use(bodyParser.json()); this.app.use(cors(corsOptions)); this.app.use('/api', router(this)); this.app.use('/images', express.static(path.join(dirname, '..', 'images'))); this.app.use('/', express.static(path.join(dirname, '..', '..', 'dist'))); return startAndListen(https.createServer(httpsOptions, this.app), 3100); } start() { return this.db.start() .then(() => { this.notifications = new NotificationManager(this); }) .then(() => this._startApi()) .then(() => { process.stdout.write(chalk.magenta('💻 API has started on https://localhost:3100/api')); }); } }

let api = new ApiServer(); api.start();