Note: in these series I’m using some UNIX commands like touch and mkdir. If you’re using Windows, those commands can be ran if you’re using cmder, the appropriate related command for Windows or creating files and folders using the GUI.
This tutorial is focused on MacOS but can be extrapolated to Linux and Windows. If you use Windows be sure to download cmder if you don’t already have it.
- Homebrew (for MacOS)
- NodeJS (MacOS:
brew install node| Linux | Windows)
- Text editor (I’ll be using Visual Studio Code)
- cmder (only if you use Windows)
Part 1 – Setting up the project
The first thing we need to do is create a folder for our project, in my case I named it redbeard. Now, inside that folder, we run the command
npm install jspm@beta.
We’re currently using the version 0.17 which is in beta. You can check your version by running
SteinMac:redbeard eestein$ jspm --version 0.17.0-beta.11 Running against local jspm install.
After JSPM has been installed we will initialize it by running the command
From this moment on, everything is almost automatic.
“Package.json file does not exist, create it? [Yes]:” – Press enter
“Init Mode (Quick, Standard, Custom) [Quick]:” – Press enter
“Local package name (recommended, optional): app” – Press enter
“package.json directories.lib [src]:” – Press enter
“System.config browser baseURL (optional): /” – Press enter
“System.config local package main [app.js]:” – Press enter
“System.config transpiler (Babel, Traceur, TypeScript, None) [babel]:” – TypeScript (and press enter)
After JSPM has finished downloading everything, run
jspm install npm:angular.
This will install AngularJS (currently v1.5.3). After that, run
This will create an
index.html file that we’ll edit to look like this:
After that, run
This will create an
app.js file that we’ll edit to look like this:
let container = document.getElementById(‘container’);
container.innerHTML = ‘Ahoy, matey!’;
This is our current structure on Visual Studio Code (VSC from now on):
Now, let’s install Node’s http-server library by running the command
npm install http-server.
Once it’s done we can run the command (on the app’s root folder):
And then access the url on our browser: http://localhost:8080
If you did everything correctly you should see this page:
That’s it for our very first app! In the next articles we’ll make some changes to start using TypeScript as our main codebase and integrate our frontend with a backend built on ASP.NET Core:
- Part 1 – Setting up the project (you are here!)
- Part 2 – Use TypeScript as our main codebase
- Part 3 – Create a backend project using ASP.NET Core
- Part 4 – Integrate everything
- Part 5 – Database integration
See you there!