EuDs

Cause#

When I was a freshman, I did a certain course assignment, and my topic was the life of the game. Since then, I have wanted to implement one myself. But I have always put it aside and haven't started yet. Recently, I have been learning Rust and happened to come across a very good tutorial. This is the cause of this project.

Process#

Preparations#

I use the vscode+wsl2 environment. Overall, except for the high memory usage due to machine performance limitations, the experience is still good.

But I encountered three problems when setting up the project environment.

1. npm install failed

• Solution: Install npm in Ubuntu
• Reference: Unable to use npm in WSL

2. wasm-build failed

• Solution:
  Copy

  [package.metadata.wasm-pack.profile.release]
  wasm-opt = false
  

• Reference: failed to download binaryen-version_90-x86-windows.tar.gz

3. wasm-pack test --chrome --headless failed

• Solution: Use wasm-pack test --chrome instead
• Reference: Headless Chrome test fails

Coding#

During the coding phase, I followed the tutorial and it went smoothly. However, the code in the tutorial was all put together. This doesn't look very comfortable and doesn't suit my subsequent iterations. I spent some time modularizing it. But the tutorial also explains the reason for not modularizing: Shrinking .wasm Size. This made me realize that I still need to optimize and modify according to the characteristics of the project.

Deployment#

During development, I found that shalzz/wasm-game-of-life provided a live demo. It was deployed using Vercel. I have used Vercel before, but only for one-click deployment by others. I found it quite interesting, so I decided to give it a try. It took some time and encountered some difficulties. Let me explain the process here.

1. At first, I referred to Deploying a WASM-Powered React App on Vercel. Later, I found that it was not necessary to be so complicated because I had already wasm-pack publish, so I could directly import wasm-game-of-life-euds63 - npm as a dependency. This way, I only need to deploy webpack without installing Rust-related content again.
2. After making the corresponding modifications to the code, I started to try to deploy. First, I encountered a path problem, so I changed the Root Directory to "www".
3. At this point, Vercel showed that the deployment was successful, but it couldn't actually run. Based on my previous experience, I instinctively thought it was also a path problem. I started to modify the paths in other places. But it turned out not to be. After several modifications, I found that incorrect paths would lead to successful deployment, while the correct paths would cause npm install to fail. And what I initially thought was an incorrect path was actually correct. I think this step was caused by me not looking at the logs carefully.
4. According to the corresponding error, I found that it was a node version issue. The node version that ran successfully on my local machine was 12, while Vercel only supported 18 and 16. My initial idea was to install another version of 12, but it didn't work. Later, with the idea of giving it a try, I changed it to 16, and surprisingly, npm install succeeded.
5. After npm run build, an error occurred: Missing Public Directory. According to Error List | Vercel Docs, I tried setting Output Directory to "dist" and solved the problem.

Configuring Domain Name#

I used subdomain configuration. I used to think that configuring subdomains was quite magical. After trying it myself, I found that it seems to be equivalent to a redirect?

First, I added a CNAME record in my DNS service provider.

Then, in the corresponding project in Vercel, I added the domain name lifegame.ds63.eu.org.

At first, there was no SSL certificate set up. I looked up some information online and found that Vercel would automatically provide an SSL certificate. I thought there was something wrong with my settings. It turned out that I just needed to wait for a while.

Gains#

1. Rust custom macros
   • Steps
     1. Define and export custom macros in a module
        Copy

        // utils.rs
        #[macro_export]
        macro_rules! log {
           ( $( $t:tt )* ) => {
              web_sys::console::log_1(&format!( $( $t )* ).into());
           }
        }
        

     2. Use it in other modules
        Copy

        // lib.rs
        #[macro_use]
        mod utils;
        
        mod universe;
        
        // universe.rs
        use crate::utils;
        // Use directly
        log!("This is a log message: {}", some_variable);
        

2. Always let profiling guide your focus
   • Some performance profiling tools
     1. Edge Developer Tools -> Performance
     2. cargo benchcmp
     3. perf
   • Time Profiling - Rust and WebAssembly is worth reading again a few times
3. Vercel deployment

References#

• Rust and WebAssembly
• Play John Conway’s Game of Life The best implementation of Game of Life I have found so far
• shalzz/wasm-game-of-life: Game of Life implementation using Rust, Javascript and WebAssembly!
• Projects Overview | Vercel Docs