Skip to content

Getting Started

Jump to bottom Edit New page
Sergey Bogdanov edited this page Apr 17, 2016 · 33 revisions

For the time being, there is no plugin, installer, project template, etc. So to create a new WootzJs project, you have to perform a few manual steps. Automation of this is planned for the future. Before opening the WootzJs.sln solution for the first time, please run the build.bat folder located in the repo root. (It expects an msbuild.exe to exist in the Framework64 folder of c:\Windows\Microsoft.Net) This will ensure that the key projects build in the correct order. This is necessary because we provide a custom implementation of mscorlib, which the other projects depend on. Thus it's important that first the compiler itself, then WootzJs.Runtime, and finally the rest of the solution be built in that order. Once you've done this the first time, you shouldn't have to worry about it again.

NOTE With the latest Roslyn bits, you must obtain the Microsoft Build Tools 2015. The latest version of roslyn has dependencies on assemblies from this download and are absolutely required.

Let's start with a simple "Hello World" app, where the message is printed out to your browser's developer console.

  1. First things first, you must checkout this repo somewhere. For the sake of this document, we will assume that you are checking out to C:\dev\WootzJs.

  2. Now let's open Visual Studio and create a new ordinary Console application. We will assume you name it "HelloWorld", Make sure to create it in a folder that does not contain spaces, as Roslyn seems to have some difficulty in that regard. (WootzJs implements console applications as you'd expect - you supply an entry point and that method will be invoked upon load.) Remove the extraneous usings at the top, particularly the reference to System.Threading.Tasks, since that is not implemented.

  3. Now we need to edit the project file. Either close the project and edit it in VS, or modify it in a separate text editor. Add the following lines under the root node, above the other Import nodes near the bottom.

    a. First:

     <Import Project="c:\dev\WootzJs\build\WootzJs.targets" />

    This imports the WootzJs targets file, which overrides mscorlib and prevents System.Core from being imported. This allows you to know while writing your code whether a particular BCL features is available or not.

    b. And then:

     <PropertyGroup>
     <PostBuildEvent>c:\dev\WootzJs\WootzJs.Compiler\bin\debug\WootzJs.Compiler.exe $(MSBuildProjectFullPath) $(OutputPath)
         if errorlevel 1 goto BuildEventFailed
         copy c:\dev\WootzJs\build\mscorlib.js $(TargetDir)
         if errorlevel 1 goto BuildEventFailed
         goto BuildEventOK
         :BuildEventFailed
         echo POSTBUILDSTEP for $(ProjectName) FAILED
         exit 1
         :BuildEventOK
         echo POSTBUILDSTEP for $(ProjectName) COMPLETED OK</PostBuildEvent>
 </PropertyGroup>

    This executes the compiler and copies the output to your output folder. Now reload the project if VS doesn't prompt you to.

  4. Remove the default project references that Visual Studio adds. These are usually: "Microsoft.CSharp", "System", "System.Core", "System.Data", "System.Data.DataSetExtensions", "System.Xml", "System.Xml.Linq".

  5. The Console project template creates a Program class with a Main method. Thus, to implement the core logic (such as it is), add the following line to the method:

     Console.WriteLine("Hello World");

    The complete compilation unit should look like:

     using System;
 
 namespace HelloWorld
 {
     class Program
     {
         static void Main()
         {
             Console.WriteLine("Hello World");
         }
     }
 }

  6. Finally, create an html page to test the results. You can use the following template. Name it helloworld.html and save it in the output folder of your project (which contains your .js files):

     <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
         <title>HelloWorld</title>
     </head>
     <body>
     </body>

     <script src="mscorlib.js"></script>
     <script src="HelloWorld.js"></script>
 </html>

That's it. Open helloworld.html in a browser, and open up your developer tools and you should see "Hello World" in the console.

Add a custom footer
Add a custom sidebar
Clone this wiki locally