packtpublishing / full-stack-react-projects Goto Github PK

Thank for the beautiful information provided and the guides, However, as you explain in your book about the authorization and authentication for the access some routes. and during our coding, I notice we set a time limit for the token (JWT token). However, how can I set up an API key for the user to access some route instead of login and generate the token?

For Instance, I have a pubic route and want to Identify each user making a request to that routes base on user ID and API key. Note, API key can not be expired as a token except the user make a change.

I will be so grateful, for any hint or snippet.

Thank you all

I beginning with media streaming chapter... and I am not able to get rid of this error:

**DeprecationWarning**: GridStore is deprecated, and will be removed in a future version. Please use GridFSBucket instead

This is what the mongoose docs say about this.

Mongoose docs:
https://mongoosejs.com/docs/deprecations.html

// Replace this:
const conn = mongoose.createConnection('mongodb://localhost:27017/gfstest');
const gfs = require('gridfs-store')(conn.db);
const writeStream = gfs.createWriteStream({ filename: 'test.dat' });

// With this:
const conn = mongoose.createConnection('mongodb://localhost:27017/gfstest');
const gridFSBucket = new mongoose.mongo.GridFSBucket(conn.db);
const writeStream = gridFSBucket.openUploadStream('test.dat');

How would you modify the code written in this book to work with that. Can you please help. Thx.

const Media = require('../models/media');
const formidable = require('formidable');
const slugify = require('slugify');
const { errorHandler } = require('../helpers/dbErrorHandler');
const fs = require('fs');

const mongoose = require('mongoose');
const Grid = require('gridfs-stream');
Grid.mongo = mongoose.mongo;
let gridfs = null;

mongoose.connection.on('connected', () => {
    gridfs = Grid(mongoose.connection.db);
});

exports.create = (req, res, next) => {
    let form = new formidable.IncomingForm();
    form.keepExtensions = true;
    form.parse(req, (err, fields, files) => {
        if (err) {
            return res.status(400).json({
                error: 'Video could not be uploaded'
            });
        }
        let media = new Media(fields);
        media.postedBy = req.user._id;
        if (files.video) {
            let writestream = gridfs.createWriteStream({ _id: media._id });
            fs.createReadStream(files.video.path).pipe(writestream);
        }
        media.save((err, result) => {
            if (err) {
                return res.status(400).json({
                    error: errorHandler.getErrorMessage(err)
                });
            }
            res.json(result);
        });
    });
};

Hi !
could you please provide me the video tutorial for mern media stream project..

thanks in advance... :-)

First of all, Thanks a lot for absolutely amazing book. I tried running the mern-marketplace app locally but could not get the strip part working.
When a user click on Connect with stripe button, That takes user to a new page with the following error:

// https://connect.stripe.com/oauth/authorize?response_type=code&client_id=pk_test_f0VKnGPSYYry3RGnE6YZvWB000TOyRsViJ&scope=read_write

{
  "error": {
    "message": "No application matches the supplied client identifier"
  }
}

What am I missing here?
I would appreciate any help, Thanks!

Is it possible to provide data for mern-marketplace project?

I'm reading Full Stack React Projects alongside working through the sample code, which I'm trying to edint and add to in order to get an understanding of it.

One thing I've done is to take this code:
https://github.com/PacktPublishing/Full-Stack-React-Projects/tree/master/Chapter05/mern-social

and in file client/post/Post.js I've tried to add paragraphs to the comments. I did this by changing:

<Typography component="p" className={classes.text}>
        {this.props.post.text}
</Typography>

to:

<Typography component="p" className={classes.text} paragraph="true">
        {this.props.post.text}
</Typography>

that didn't work so I tried:

<Typography component="p" className={classes.text} paragraph={true}>
        {this.props.post.text}
</Typography>

which also didn't work.

I'v since spent some time looking at this and think one of the above should work. Is it possible that this is getting overridden by something else in the code? I've checked through it and can't see anything but am not familiar enough with the code to be sure.

Cheers
Paul

0 info it worked if it ends with ok
1 verbose cli [ 'C:\Program Files\nodejs\node.exe',
1 verbose cli 'C:\Users\########\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'development' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'predevelopment', 'development', 'postdevelopment' ]
5 info lifecycle [email protected]predevelopment: [email protected]
6 info lifecycle [email protected]development: [email protected]
7 verbose lifecycle [email protected]development: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]development: PATH: #####
9 verbose lifecycle [email protected]development: CWD: C:\Users################\full-stack-react\ex\ch1\mern-simplesetup
10 silly lifecycle [email protected]development: Args: [ '/d /s /c', 'nodemon' ]
11 silly lifecycle [email protected]development: Returned: code: 1 signal: null
12 info lifecycle [email protected]development: Failed to exec development script
13 verbose stack Error: [email protected] development: nodemon
13 verbose stack Exit status 1
13 verbose stack at EventEmitter. (C:\Users########\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\index.js:304:16)
13 verbose stack at emitTwo (events.js:126:13)
13 verbose stack at EventEmitter.emit (events.js:214:7)
13 verbose stack at ChildProcess. (C:\Users########\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack at emitTwo (events.js:126:13)
13 verbose stack at ChildProcess.emit (events.js:214:7)
13 verbose stack at maybeClose (internal/child_process.js:925:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)
14 verbose pkgid [email protected]
15 verbose cwd C:\Users################\full-stack-react\ex\ch1\mern-simplesetup
16 verbose Windows_NT 10.0.17134
17 verbose argv "C:\Program Files\nodejs\node.exe" "C:\Users\########\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js" "run" "development"
18 verbose node v8.10.0
19 verbose npm v6.1.0
20 error code ELIFECYCLE
21 error errno 1
22 error [email protected] development: nodemon
22 error Exit status 1
23 error Failed at the [email protected] development script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

I keep getting this error when I try to run command: npm run development. I am running this on Windows 10.

Thanks & Regards
Gokul.

Posted this same issue in shamahoque/mern-simplesetup.

I ran into an issue with the webpack build failing. It can be fixed by setting the "presets" option for babel-loader to react in the webpack.config.js file.

The issue is probably a nuance to my environment, although there is some background here and here. The preferred solution is to probably use a .babelrc config file as described here.

Original webpack.config.js file,

const path = require('path')
const webpack = require('webpack')
const CURRENT_WORKING_DIR = process.cwd()

const config = {
    name: "browser",
    mode: "development",
    devtool: 'eval-source-map',
    entry: [
        'react-hot-loader/patch',
        'webpack-hot-middleware/client?reload=true',
        path.join(CURRENT_WORKING_DIR, 'client/main.js')
    ],
    output: {
        path: path.join(CURRENT_WORKING_DIR , '/dist'),
        filename: 'bundle.js',
        publicPath: '/dist/'
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: [
                    'babel-loader'
                ]
            }
        ]
    },  plugins: [
          new webpack.HotModuleReplacementPlugin(),
          new webpack.NoEmitOnErrorsPlugin()
      ]
}

module.exports = config

Adding a "preset" option for babel-loader in the module.rules array solves the issue (although see the link above regarding the .babelrc config file solution),

const path = require('path')
const webpack = require('webpack')
const CURRENT_WORKING_DIR = process.cwd()

const config = {
    name: "browser",
    mode: "development",
    devtool: 'eval-source-map',
    entry: [
        'react-hot-loader/patch',
        'webpack-hot-middleware/client?reload=true',
        path.join(CURRENT_WORKING_DIR, 'client/main.js')
    ],
    output: {
        path: path.join(CURRENT_WORKING_DIR , '/dist'),
        filename: 'bundle.js',
        publicPath: '/dist/'
    },
    module: {
        rules: [
          {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            use: [
              {
                loader: 'babel-loader',
                options: {
                  presets: ['react']
                }
              }
            ],
          }
        ]
    },  plugins: [
          new webpack.HotModuleReplacementPlugin(),
          new webpack.NoEmitOnErrorsPlugin()
      ]
}

module.exports = config

In the book page no 30 it says create nodemon.js file