Wednesday, December 12, 2018

Client / Server Modification

Now that we have our Aurelia skeleton project all set up and working it is time to start making our modifications to satisfy the project goals.

Almost every application I have worked on in the last 10 years has used a basic Client / Server pattern. I want to modify the skeleton project to include the server portion. This is not necessary for the success of this project, it is more of a personal choice. I like to keep all my bits and pieces together when developing a project so I don't have to go chasing after them when I am trying to fix a bug a year or two down the road. I can simply git the project from my repository and fire it up in my development environment ... everything is there and ready to go.

Client Server

First, I want to rename the "src" folder in the skeleton project. This is the folder where you will add all the code that gets included in the client portion of the app. I like to call it "client" to make it perfectly clear that this folder is the Client portion of the application. Again, this is a personal choice and it is not necessary for a successful project.

NOTE: I will be modifying some files based on my decisions to make the changes outlined here. If you do not want to make these changes you may have to modify other files to support your preferences. I suggest you make these changes to ensure a successful project. 

  1. Rename the src folder to client
  2. Open aurelia.json file located in the aurelia_project folder in your code editor
  3. Locate all the "src" instances and change them to "client". There should be 5 in total at the following locations:
    1. transpiler.source
    2. markupProcessor.source
    3. cssProcessor.source
    4. jsonProcessor.source
    5. paths.root
The changes should look like this


Save your changes and make sure the project still runs.
  1. Open a command prompt in the project folder.
  2. Run command 'nvm use 10.14.0'
  3. Run command 'au run --watch'
The CLI should build the project and then launch a server hosting the project.


Open a chrome browser and browse to http://localhost:9000 and you should see the Hello World message.


Right click inside the browser window and chose [Inspect] to open the Chrome Dev Tools window. If you have never used Dev Tools before this will quickly become your new best friend. Check the console to make sure we don't have any reported errors.



Your window should look like the above image. Good news, everything is still working.

NOTE: By adding the '--watch' flag to the 'au run' command we are instructing the CLI to watch for file changes that we make in our editor and then reload the application in the chrome browser using a module called BrowserSync. A little more about this later.

We need to make one more change to the .gitignore file. This file instructs GIT, our source control, to not include certain files or directories in our project source history and data store.

  1. Open .gitignore in your code editor.
  2. Find the "/src/" occurrences and change them to "/client/"
  3. Save your changes.


Server


Next we want to add a new directory called 'server' to the project directory. This folder will hold all of our server code. The server I will be using is a simple Web API that hosts a Restful Data Service for our application. We will explore that a little later.




You can develop your own server code in the server folder or you can copy the server code from The Smoke House Project / Applewood / Server to your new server folder. My server code has a file called app.js. This is the main file that contains the code to start the web server. You can launch the server in a command prompt by running the command 'node app.js'

It is important to understand that the server folder is really a stand alone node project that has it's own package.json file and requires it's own runtime environment which is controlled by the nvm. It also requires us to run 'npm install' to download the node packages into a node_modules folder inside the server folder (that is not saved in the repository) ... just like our main client project.

Lets install the node modules and test the server code to ensure it runs.
  1. Open a command prompt in the server folder.
  2. Run command 'nvm use 10.14.0'
  3. Run command 'npm install'


NOTE: You can usually safely ignore the npm warnings. The reported vulnerability above does not have a fix at this point in time, however it can also be safely ignored. It is for a package we use called njwt. See the report below. Read this if you want to learn more about npm audit fix. 



NOTE: My project code requires a MongoDb server to be running and available to your project. If you don't have one available, take a moment now to install one locally. Consult the README file in the server folder to configure the server to use your DB.

Now we need to configure the server connections before we can start it up.
  1. Open server/config/config.dev in your editor
  2. Change config.host = 'your_ip'
  3. Change config.mongo.connectionstring = 'mongodb://your_mongo_server/Applewood'


Now start up the server
  1. Open a command prompt in the server directory
  2. Run command 'nvm use 10.14.0'
  3. Run command 'node app.js'
We should now see our web api server running


Auto Start Server

The Aurelia CLI uses gulp to automate runtime tasks. It can launch the client development server, watch files for changes, copy files to folders, refresh the browser and lots of other tasks.

Have a look in the aurelia_project folder. There is a folder called tasks. This folder contains all the gulp tasks that are controlled by the CLI.

I have a file in the server directory called launch.js This file contains a gulp task to start the web api server and watch it's files for changes. When it sees a change it will re-start the web server. This is an awesome feature to have when developing your code.

So now I want to add a flag to the 'au run' command so that we can auto start our server when we start the client. Kinda makes sense. The client needs the server so it has data to use. As we make changes to the client code, the aurelia tasks take care of refreshing the browser (client) and if we jump over to the server code our new task will take care of refreshing the server when we make changes.

  1. Open aurelia_project/tasks/run.js in the editor.
  2. Add a reference to our launch file

  3. Add the following code
Now we can launch our server when we run our client with a CLI parameter '--server'.

  1. Open a command prompt in the root of ur project.
  2. Run command 'nvm use 10.14.0'
  3. Run command 'au run --watch --server'


You can see that the web server has started.




1 comment: