|
| 1 | +Hello World |
| 2 | +=========== |
| 3 | + |
| 4 | +Empirical allows you to compile your C++ to target |
| 5 | + |
| 6 | +- running at the command line (e.g., native machine code) and |
| 7 | +- running in the web browser (e.g., javascript assembly code). |
| 8 | + |
| 9 | +This how-to aims to walk you through all the nitty gritty required to successfully compile a simple "Hello World" for both targets. |
| 10 | + |
| 11 | +Install: Native C++ Compiler |
| 12 | +---------------------------- |
| 13 | + |
| 14 | +In the Unix-verse (e.g., Linux / MacOS) commonly used compilers include :code:`gcc` and :code:`clang`. |
| 15 | +From this point onwards, we assume that you're working with :code:`gcc`. |
| 16 | +Unless you really know what you're doing, you'll want to have :code:`gcc` installed. |
| 17 | +The good news is: you might already! |
| 18 | + |
| 19 | +Bring up a terminal and try entering: |
| 20 | + |
| 21 | +.. code-block:: bash |
| 22 | +
|
| 23 | + which gcc |
| 24 | +
|
| 25 | +If :code:`which` spits out a path, then you have :code:`gcc` installed! |
| 26 | +If :code:`which` says "not found," you'll need to go ahead and install :code:`gcc`. |
| 27 | +For Linux users, your package manager (e.g., :code:`yum`, :code:`apt`, etc.) is probably the way to go about this. |
| 28 | +For MacOS users, you'll need to get Apple's "Command Line Tools for Xcode." |
| 29 | +Either way, give it a quick web search (e.g., "install gcc on [my operating system]") and there should be plenty of how-to guides that walk you through step-by-step. |
| 30 | + |
| 31 | +TODO |
| 32 | +Windows... |
| 33 | +Maybe you should try git for Windows (e.g., "GitBash")? |
| 34 | + |
| 35 | +Compile & Run: Command Line |
| 36 | +--------------------------- |
| 37 | + |
| 38 | +Assuming you haven't already pulled down a clone of Empirical, let's get your working environment all set. |
| 39 | + |
| 40 | +.. code-block:: bash |
| 41 | +
|
| 42 | + git clone https://github.com/devosoft/Empirical |
| 43 | + cd Empirical/examples/ProjectTemplate |
| 44 | +
|
| 45 | +Let's take a look at what we want to compile. |
| 46 | + |
| 47 | +:code:`source/native/project_name.cc`: |
| 48 | + |
| 49 | +.. code-block:: c++ |
| 50 | + |
| 51 | + // This is the main function for the NATIVE version of this project. |
| 52 | + |
| 53 | + #include <iostream> |
| 54 | + |
| 55 | + #include "base/vector.h" |
| 56 | + #include "config/command_line.h" |
| 57 | + |
| 58 | + int main(int argc, char* argv[]) |
| 59 | + { |
| 60 | + emp::vector<std::string> args = emp::cl::args_to_strings(argc, argv); |
| 61 | + |
| 62 | + std::cout << "Hello World!" << std::endl; |
| 63 | + } |
| 64 | + |
| 65 | +This part is where Empirical source is brought in. |
| 66 | + |
| 67 | +.. code-block:: c++ |
| 68 | + |
| 69 | + #include "base/vector.h" |
| 70 | + #include "config/command_line.h" |
| 71 | + |
| 72 | +The main function uses Empirical's vector and argument parsing tools to process command line options, but doesn't do anything with them. |
| 73 | +Then, we print "Hello World!". |
| 74 | + |
| 75 | +Let's compile! |
| 76 | + |
| 77 | +.. code-block:: bash |
| 78 | +
|
| 79 | + make |
| 80 | +
|
| 81 | +If you :code:`ls`, you should now see the executable :code:`project_name` has been created. |
| 82 | +Let's run! |
| 83 | + |
| 84 | +.. code-block:: bash |
| 85 | +
|
| 86 | + ./project_name |
| 87 | +
|
| 88 | +Install: Web C++ Compiler |
| 89 | +------------------------- |
| 90 | + |
| 91 | +In order to compile for web, you'll need the `emscripten LLVM-to-Web Compiler`_. |
| 92 | +If you're a new user, you (probably) don't have this set up so we'll walk you through step-by-step. |
| 93 | + |
| 94 | +.. _emscripten LLVM-to-Web Compiler: https://emscripten.org |
| 95 | + |
| 96 | +We aim for Empirical to track the current release of emscripten. |
| 97 | +However, as of February 2019, we've fallen a bit behind due to some breaking changes in recent emscripten releases. |
| 98 | +(See, e.g., `Empirical Issue #197`_). |
| 99 | +While we're working on bringing Empirical up-to-date with the latest emscripten, you'll need to work with emscripten version :code:`v1.37.1` in order to compile Empirical's web tools. |
| 100 | + |
| 101 | +.. _Empirical Issue #197: https://github.com/devosoft/Empirical/issues/197 |
| 102 | + |
| 103 | +Here's how to get that taken care of. |
| 104 | + |
| 105 | +.. code-block:: bash |
| 106 | +
|
| 107 | + git clone https://github.com/emscripten-core/emsdk.git |
| 108 | + cd emsdk |
| 109 | + ./emsdk install emscpripten v1.37.1 |
| 110 | + ./emsdk activate emscpripten v1.37.1 |
| 111 | + ./emsdk install clang-e1.37.1-64bit |
| 112 | + ./emsdk activate clang-e1.37.1-64bit |
| 113 | +
|
| 114 | +When you want to use the emscripten compiler, you'll want to hop over to the :code:`emsdk` directory and run |
| 115 | + |
| 116 | +.. code-block:: bash |
| 117 | +
|
| 118 | + source ./emsdk_env.sh |
| 119 | +
|
| 120 | +in order to load emscripten's odds and ends into your :code:`PATH`. |
| 121 | +You only need to do this once per terminal session (e.g., the first time you want to use emscripten in a terminal session). |
| 122 | + |
| 123 | +Compile & Run: Web Browser |
| 124 | +-------------------------- |
| 125 | + |
| 126 | +Assuming your working directory is still :code:`Empirical/examples/ProjectTemplate` and you have loaded up emscripten (e.g., :code:`source source ./emsdk_env.sh`), compiling for web is a snap! |
| 127 | + |
| 128 | +Let's take a look at what we want to compile first, though. |
| 129 | + |
| 130 | +:code:`source/web/project_name-web.cc`: |
| 131 | + |
| 132 | +.. code-block:: c++ |
| 133 | + |
| 134 | + // This file is part of Project Name |
| 135 | + // Copyright (C) Michigan State University, 2017. |
| 136 | + // Released under the MIT Software license; see doc/LICENSE |
| 137 | + |
| 138 | + #include "web/web.h" |
| 139 | + |
| 140 | + namespace UI = emp::web; |
| 141 | + |
| 142 | + UI::Document doc("emp_base"); |
| 143 | + |
| 144 | + int main() |
| 145 | + { |
| 146 | + doc << "<h1>Hello, world!</h1>"; |
| 147 | + } |
| 148 | + |
| 149 | +The line |
| 150 | + |
| 151 | +.. code-block:: c++ |
| 152 | + |
| 153 | + #include "web/web.h" |
| 154 | + |
| 155 | +brings in Empirical's web tools, which provide a convenient interface for C++ code to interact with browser-y bits like html and Javascript. |
| 156 | + |
| 157 | +The line |
| 158 | + |
| 159 | +.. code-block:: c++ |
| 160 | + |
| 161 | + UI::Document doc("emp_base"); |
| 162 | + |
| 163 | +creates a persistent :code:`UI::Document` object (e.g., outside the scope of the :code:`main` function) that hooks into the :code:`"emp_base"` div in :code:`web/project_name.html`. |
| 164 | + |
| 165 | +Then, in :code:`main`, we write our message to the :code:`"emp_base"` div (wrapped in some html markup formatting... e.g., :code:`<h1>` and :code:`</h1>`). |
| 166 | + |
| 167 | +You can find a more comprehensive explanation of the contents of this `.cpp` file in our `Quick Start Guide for Web Tools`_. |
| 168 | + |
| 169 | +.. _`Quick Start Guide for Web Tools`: 3-WebTools.html |
| 170 | + |
| 171 | +Let's compile |
| 172 | + |
| 173 | +.. code-block:: bash |
| 174 | +
|
| 175 | + make web |
| 176 | +
|
| 177 | +We should now have :code:`web/project_name.js` and :code:`web/project_name.js.mem` ready to go. |
| 178 | +You can verify this by entering :code:`ls web` at your command line. |
| 179 | + |
| 180 | +We'll need to locally serve our working directory in order to view our compiled product in a web browser. |
| 181 | +Python provides a handy, no-hassle tool for this. |
| 182 | + |
| 183 | +Try running |
| 184 | + |
| 185 | +.. code-block:: bash |
| 186 | +
|
| 187 | + python3 -m http.server |
| 188 | +
|
| 189 | +at your command line. |
| 190 | +If it starts up, then great! |
| 191 | +Just leave it running for now. |
| 192 | + |
| 193 | +If you don't have :code:`python3` installed, a step-by-step guide for your operating system is probably only a quick web search away. |
| 194 | +Alternatively, go ahead and use your web serving tool of choice. |
| 195 | + |
| 196 | +Pop open your favorite browser and point the address bar to `http://localhost:8000/web/project_name.html`_. |
| 197 | + |
| 198 | +.. _`http://localhost:8000/web/project_name.html`: http://localhost:8000/web/project_name.html |
| 199 | + |
| 200 | +Voila! |
| 201 | + |
| 202 | +You can end your web serving process by closing the terminal window you're working in or entering :code:`<ctrl>-c` a the command line. |
| 203 | + |
| 204 | +Extending the Project Template |
| 205 | +------------------------------ |
| 206 | + |
| 207 | +We've used the project template to run some simple "hello world" code natively and in the browser. |
| 208 | + |
| 209 | +If you're wondering how to extend the project template, we have a quick start guide on exactly that here_). |
| 210 | + |
| 211 | +.. _here: 4-UsingProjectTemplate.html |
0 commit comments