|
1 | 1 | # Creating a Browser App |
2 | 2 |
|
3 | | -Currently, [the Tokamak UI framework](https://tokamak.dev) is one of the easiest ways to build a |
4 | | -browser app with SwiftWasm. It tries to be compatible with [the SwiftUI |
5 | | -API](https://developer.apple.com/xcode/swiftui/) as much as possible, which potentially allows |
6 | | -you to share most if not all code between SwiftWasm and other platforms. |
7 | | - |
8 | | -## Requirements |
9 | | - |
10 | | -Tokamak relies on [the `carton` development tool](https://carton.dev) for development and testing. |
11 | | -While you can build Tokamak apps without `carton`, that would require a lot of manual steps that are |
12 | | -already automated with `carton`. |
13 | | - |
14 | | -### System Requirements |
15 | | - |
16 | | -- [Swift 5.9.2](https://swift.org/download/) |
17 | | - |
18 | | ->Important: |
19 | | ->Tokamak UI currently is not compatible with swift 6.0+. |
20 | | -
|
21 | | -### Installation |
22 | | - |
23 | | -1. Create a directory for your project and make it current: |
24 | | - |
25 | | -``` |
26 | | -mkdir MyApp && cd MyApp |
27 | | -``` |
28 | | - |
29 | | -2. Initialize the project: |
30 | | - |
31 | | -``` |
32 | | -swift package init --type executable |
33 | | -``` |
34 | | - |
35 | | -3. Add Tokamak and carton as dependencies to your `Package.swift`: |
36 | | - |
37 | | -```swift |
38 | | -// swift-tools-version:5.8 |
39 | | -import PackageDescription |
40 | | -let package = Package( |
41 | | - name: "MyApp", |
42 | | - platforms: [.macOS(.v11), .iOS(.v13)], |
43 | | - dependencies: [ |
44 | | - .package(url: "https://github.com/TokamakUI/Tokamak", from: "0.11.0"), |
45 | | - .package(url: "https://github.com/swiftwasm/carton", from: "1.0.0"), |
46 | | - ], |
47 | | - targets: [ |
48 | | - .executableTarget( |
49 | | - name: "MyApp", |
50 | | - dependencies: [ |
51 | | - .product(name: "TokamakShim", package: "Tokamak") |
52 | | - ]), |
53 | | - ] |
54 | | -) |
55 | | -``` |
56 | | - |
57 | | -4. Add your first view to `Sources/MyApp/main.swift`: |
58 | | - |
59 | | -```swift |
60 | | -import TokamakDOM |
61 | | - |
62 | | -@main |
63 | | -struct TokamakApp: App { |
64 | | - var body: some Scene { |
65 | | - WindowGroup("Tokamak App") { |
66 | | - ContentView() |
67 | | - } |
68 | | - } |
69 | | -} |
70 | | - |
71 | | -struct ContentView: View { |
72 | | - var body: some View { |
73 | | - Text("Hello, world!") |
74 | | - } |
75 | | -} |
76 | | -``` |
77 | | - |
78 | | -5. Build the project and start the development server, `swift run carton dev` can be kept running |
79 | | - during development: |
80 | | - |
81 | | -``` |
82 | | -swift run carton dev |
83 | | -``` |
84 | | - |
85 | | -6. Open [http://127.0.0.1:8080/](http://127.0.0.1:8080/) in your browser to see the app |
86 | | - running. You can edit the app source code in your favorite editor and save it, `carton` |
87 | | - will immediately rebuild the app and reload all browser tabs that have the app open. |
88 | | - |
89 | | -You can also clone [the Tokamak repository](https://github.com/TokamakUI/Tokamak) and run `carton |
90 | | -dev --product TokamakDemo` in its root directory. This will build the demo app that shows almost all of the currently |
91 | | -implemented APIs. |
| 3 | +> This page has now been replaced by the [JavaScriptKit's tutorial](https://swiftpackageindex.com/swiftwasm/javascriptkit/tutorials/javascriptkit/hello-world). |
0 commit comments