Ok, finally got past the stupid webpack issue that was causing a complete gulp fail. You need to add one more require at the top, and modify the webpack task:
const path = require('path');
gulp.task('webpack', cb => {
webpack({
entry: './app/scripts/webpack.js',
output: {
path: path.resolve(__dirname, '.tmp/scripts/'),
filename: 'bundle.js',
},
}, (err, stats) => {
if (err) {
throw new gutil.PluginError('webpack', err);
}
cb();
});
});
However,
there would need to be lots of modifications to my gulpfile.js, so I'm just
going to go with the one from the mern framework from techdojo, start up your
server using gulp serve and you're off and running with a lovely MERN page
Configure your
eslint to work with react:
Something I'm not
fond of with this framework at the moment, but this may be in place for server
side rendering for search engines or something, but you have to have routes
defined on both the server and the client in order to enable both navigation by
clicking, or by entering the URL into the browser. I stumbled on this after creating a new route
in /app for my jobs list, but not putting the route in the server, I could get
to the page by clicking the link/button, but not entering the URL.
I'm moving on to
create back end models in the server code and front end components to display
and edit Jobs since what I really want to do with this is learn React and I've
not been doing much of that so far, just mucking with Auth0. I'll finish up the setup for Auth0 once I've
got some basic React components and server models set up before doing searching
or any more complicated stuff with React.
The yomern yo
generator looks like it does a nice job setting up a basic CRUD module both
server and app, so I'll be going with
that to create my Jobs module.
C:\Repos\mern
[master ≡ +0 ~10 -0 !]> yo yomern
Hello There Fellow
MERN User
? What is your
module name? Job
? Would you like to
generate a new CRUD component ? Yes
Add the front-end
routes for the module in app.jsx, add the backend-routes in routeHelper.js,
require the backend-route file in the express.js file and require the model in
server.js file
? Add a field name
to the model Id
? Would you like to
add another field name to the model? Yes
? What is your other
field name? Description
create app\components\jobs\CreateJob.jsx
create app\components\jobs\EditJob.jsx
create app\components\jobs\ViewJob.jsx
create app\components\jobs\ViewJobChild.jsx
create app\components\jobs\ListJobs.jsx
create app\components\jobs\ListJobsChild.jsx
create app\components\jobs\Form.jsx
create app\stores\JobStore.jsx
create server\models\Job.js
create
server\controllers\jobs.server.controller.js
create server\routes\job.server.routes.js
C:\Repos\mern
[master ≡ +5 ~10 -0 !]>
So, this was very
convenient, it generated classes for both the client side app and the server
side app, creating basic crud templates, routes, and models with the properties
I entered. I would recommend not calling one of the fields Id, it generates
an _id field for you, so I went through and renamed my Id field to Title, I had
to touch the jsx files for Create, Form, ListJobsChild, and ViewJobsChild, and
server side it was just the Jobs.js in the models. These are also the files you would have to
modify in order to add additional properties.
While the generator does create the server side routes file for you, it
does not add it to your routerHelper.js, this should be as easy as
copy/paste/rename from one of the sets of routes already in there. You will also need to set up your routes on
the client side in App.jsx, again, copy/paste/rename, really easy.
