Skip to content

Instantly share code, notes, and snippets.

@ianjennings
Created June 27, 2020 19:23
Show Gist options
  • Select an option

  • Save ianjennings/7253b9d3512e9407653bd393c99ddda5 to your computer and use it in GitHub Desktop.

Select an option

Save ianjennings/7253b9d3512e9407653bd393c99ddda5 to your computer and use it in GitHub Desktop.

Start.

00:02

Now as I open and change files in this folder.

00:06

That's a and make a new file.

00:09

explorer.exe > C:\Users\Jennings\Desktop\paircast-demo

00:09

Don't test DOT t x t notice up aircraft has started tracking those changes detected that new file And if you open up a file, and I just say hello.

00:19

notepad.exe > test.txt - Notepad

00:19

Commit a9b5a9c275f38c51ec1e32cedc9b1060b06b8716
--- test.txt
+++ test.txt
@@ -0,0 +1 @@
+hello!+
\ No newline at end of file

00:20

You'll see impair cast again. It's detected two new lines, one for the helo and one for the new line.

00:28

All right, so let's dive into it.

00:29

Paircast.exe > Paircast

00:32

If I were to start this tutorial on, we're going to talk about

00:36

Sales Js today, So let's take a look at that.

00:39

chrome.exe > Sails.js | Realtime MVC Framework for Node.js - Google Chrome

00:39

Is the package I used that actually powers the back end of pear cast and there's a global NPM module. So what we'll do is we'll start with the command prompt.

00:49

ConEmu64.exe > Cmder

00:50

And I will navigate to the desktop and appear cast Didem a folder.

00:57

And I'll start by doing NPM install.

01:01

Sales dash cheap.

01:08

You'll notice that here's this is my get branch.

01:12

This is actually a link to the future video. Although this work is being done in a get branch that we can access later.

01:21

When sales has done installing in this tutorial. What we would do is we do sales knew.

01:27

Napped.

01:28

And we'll put it as a sub directory.

01:31

Call it sales demo.

01:37

And for this

01:39

Example. We're going to go with a full fledged demon here.

01:42

One.

01:47

Now again, if we look at the

01:50

Or cast tracking here. We concede at all of these assets and directories that sales is automatically generating are being tracked.

01:59

You'll also notice node modules. It's not tracked their caste is recursive Lee using

02:01

Paircast.exe > Paircast

02:05

Did ignores, so we're not going to commit anything that's into getting nor it means things like your environment files are safe.

02:12

Modules will be tracked on ly changes are tracked.

02:15

And on that note. It's a little we don't upload any any existing files.

02:20

The only files that are uploaded our file changes and new files This way you can keep your code private.

02:26

All right. So here we are.

02:28

The dam has been created and will be for example, sails lift

02:33

ConEmu64.exe > Cmder

02:34

We're in the wrong directory. So let's go into that app folder Sails lift.

02:43

explorer.exe >

02:45

Paircast.exe > Paircast

Out of the sails out is running.

02:48

Refresh it. There we go.

02:49

Commit b07f7f55edae1427b1982ea3e5a8619014c362df
--- app/views/layouts/layout.ejs
+++ app/views/layouts/layout.ejs
@@ -38,6 +38,9 @@
 
     <% /* Auto-injected «link» tags: */ %>
     <!--STYLES-->
+    <link rel="stylesheet" href="/dependencies/bootstrap-4/bootstrap-4.css">
+    <link rel="stylesheet" href="/dependencies/fontawesome.css">
+    <link rel="stylesheet" href="/styles/importer.css">
     <!--STYLES END-->
   </head>
   <body>

02:53

chrome.exe > NEW_APP_NAME - Google Chrome

02:54

Okay, so

02:56

Now, let's stay in and make an example of how to add a new route to sales so sales as a handy utility will do. Sales generate new page still generate paged.

03:03

ConEmu64.exe > Cmder

03:07

It's called a hell of a world.

03:11

Here we go. So this is generated New? Hello, world again. We're seeing those generations in fast tracking.

03:13

Paircast.exe > Paircast

03:20

And we'll just open this up in V s code.

03:23

Code.exe > Welcome - Visual Studio Code

03:26

Her cast works with any idea any environment. It's not just JavaScript. It's not just GS code. This works with our do we know it works with a text file. As I showed you Where could see IOS X code? Anything you're going to use?

03:33

Code.exe > Open Folder

03:39

It is based off git and that allows us to track any generic file changes not using V s co so going into that factory, we will

03:50

We need to find it. It's in users. Jennings

03:53

Um

03:55

Desktop paradise demo app. Okay, let's open that up.

04:03

Code.exe > Welcome - app - Visual Studio Code

04:04

So here we are.

04:05

We're in our sales up and imagine we want to follow the directions that sales told us of sales estimates of modifications here. We want to add something to our route.

04:13

ConEmu64.exe > Cmder

04:14

Copy that.

04:18

So let's go into our controllers and our I don't know where the routes file this. I'll just use the routes.

04:23

Code.exe > Welcome - app - Visual Studio Code

04:26

And we're going to add that route. I also no need to go into policies.

04:30

Commit 3a7721ade7d7afcf687fcd54e442c0361457e29a
--- app/config/routes.js
+++ app/config/routes.js
@@ -13,32 +13,34 @@ module.exports.routes = {
 
   //  ╔╦╗╦╔═╗╔═╗  ╦═╗╔═╗╔╦╗╦╦═╗╔═╗╔═╗╔╦╗╔═╗   ┬   ╔╦╗╔═╗╦ ╦╔╗╔╦  ╔═╗╔═╗╔╦╗╔═╗
   //  ║║║║╚═╗║    ╠╦╝║╣  ║║║╠╦╝║╣ ║   ║ ╚═╗  ┌┼─   ║║║ ║║║║║║║║  ║ ║╠═╣ ║║╚═╗
   //  ╩ ╩╩╚═╝╚═╝  ╩╚═╚═╝═╩╝╩╩╚═╚═╝╚═╝ ╩ ╚═╝  └┘   ═╩╝╚═╝╚╩╝╝╚╝╩═╝╚═╝╩ ╩═╩╝╚═╝
+  'GET /hello-world': { action: 'view-hello-world' },
 
 
   //  ╦ ╦╔═╗╔╗ ╦ ╦╔═╗╔═╗╦╔═╔═╗

04:31

And we need to make the view. Hello?

04:33

Code.exe > policies.js - app - Visual Studio Code

04:35

World policy public.

04:39

Okay?

04:41

Commit 86895dc280a6fad751fc0e29ddd2f699a6750f13
--- app/config/policies.js
+++ app/config/policies.js
@@ -21,5 +21,6 @@ module.exports.policies = {
   'legal/view-terms': true,
   'legal/view-privacy': true,
   'deliver-contact-form-message': true,
+  'view-hello-world': true
 
 };

04:42

So we created that route. Now we need to restart sales. So let's do that.

04:52

We've re started sales that we go and we should have a Hello, world around. So there we go. The hell world has been implemented and we can go into that view. Hello, World file starts Js

04:53

Commit a9e3e980b87654ed54c97814d69e2aaa14bb886b
--- app/views/layouts/layout.ejs
+++ app/views/layouts/layout.ejs
@@ -155,6 +155,7 @@
     <script src="/js/pages/entrance/new-password.page.js"></script>
     <script src="/js/pages/entrance/signup.page.js"></script>
     <script src="/js/pages/faq.page.js"></script>
+    <script src="/js/pages/hello-world.page.js"></script>
     <script src="/js/pages/homepage.page.js"></script>
     <script src="/js/pages/legal/privacy.page.js"></script>
     <script src="/js/pages/legal/terms.page.js"></script>

04:53

chrome.exe > NEW_APP_NAME - Google Chrome

05:03

There it is.

05:03

Code.exe > view-hello-world.js - app - Visual Studio Code

05:04

And we can change this title to Hello, world.

05:09

Okay, so this is a really simple tutorial. You can imagine how this keeps going, but it's in a cast. For now. I'll show you how you can put this together.

05:12

Commit e9343218b283e933952b63927938badd66a7971d
--- app/views/pages/hello-world.ejs
+++ app/views/pages/hello-world.ejs
@@ -1,7 +1,8 @@
 <div id="hello-world" v-cloak>
 
-  <h1>TODO: Implement this page.</h1>
-  <p>(See also <em>assets/styles/pages/hello-world.less</em>, <em>assets/js/pages/hello-world.page.js</em>, and <em>api/controllers/view-hello-world.js</em>.)</p>
+  <h1>Hello World</h1>
+  <p>(See also <em>assets/styles/pages/hello-world.less</em>, <em>assets/js/pages/hello-world.page.js</em>, and
+    <em>api/controllers/view-hello-world.js</em>.)</p>
 
 </div>
 <%- /* Expose server-rendered data as window.SAILS_LOCALS :: */ exposeLocalsToBrowser() %>

05:13

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment