Thursday, June 15, 2017

MERN Series Step 7 - Job models and components

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 => {
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);

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.