Deployment

If you're doing a simple deployment, you just need to copy the entire dist folder to your CDN or static server. index.html should be your server entry point.

Frontend Routing and Server Integration

If you encounter 404 issues when refreshing https://cdn.com/users/123, you need to handle this according to this section.

WinJS provides two routing methods you can use: browserHistory and hashHistory.

You can configure which method to use in config/config.ts:

export default {
  history: { type: 'hash' }, // default is browser
};

hashHistory uses URLs like https://cdn.com/#/users/123, taking the characters after the hash symbol as the path. browserHistory directly uses URLs like https://cdn.com/users/123. When using hashHistory, the browser always accesses index.html in the root directory. When using browserHistory, the server needs to be prepared to handle URLs. Handling initial requests like / when the application starts should be fine, but when users navigate back and forth and refresh on /users/123, the server will receive a request from /users/123. At this point, you need to configure the server to handle this URL and return the correct index.html, otherwise you'll get a 404 page not found error. If you don't have control over the server side, it's recommended to enable exportStatic in the configuration, so that the compiled dist directory will generate an index.html for each route, allowing each route to support direct deeplink access. We strongly recommend using the default browserHistory.

Deploying to Non-Root Directory

Deploying to a non-root directory is a common requirement, such as deploying to GitHub pages. Let's assume we want to deploy our project to ${host}/admin. First, we need to configure base in config/config.ts. base is the prefix for vue-router. We need to set base to admin. If we also need to deploy it to the /admin directory, we also need to set publicPath. After configuration, it looks like this:

export default {
  // ... some config
  base: '/admin/',
  publicPath: '/admin/',
};

Next, we can access our static files at ${host}/admin. It's worth noting that the URL path will also be modified in dev mode.

Deploying to Different Platforms

Using nginx

As one of the most popular web containers, nginx is quite simple to configure and use. With simple configuration, you can have high performance and high availability. Using nginx for hosting is recommended. Example configuration is as follows:

server {
    listen 80;
    # gzip config
    gzip on;
    gzip_min_length 1k;
    gzip_comp_level 9;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";

    root /usr/share/nginx/html;

    location / {
        # Used with browserHistory
        try_files $uri $uri/index.html /index.html;

        # If you have resources, recommend using https + http2, combined with on-demand loading for better experience
        # rewrite ^/(.*)$ https://preview.example.com/$1 permanent;

    }
    location /api {
        proxy_pass https://ant-design-pro.netlify.com;
        proxy_set_header   X-Forwarded-Proto $scheme;
        proxy_set_header   X-Real-IP         $remote_addr;
    }
}

server {
  # If you have resources, recommend using https + http2, combined with on-demand loading for better experience
  listen 443 ssl http2 default_server;

  # Certificate public and private keys
  ssl_certificate /path/to/public.crt;
  ssl_certificate_key /path/to/private.key;

  location / {
    # Used with browserHistory
    try_files $uri $uri/index.html /index.html;
  }
  location /api {
      proxy_pass https://ant-design-pro.netlify.com;
      proxy_set_header   X-Forwarded-Proto $scheme;
      proxy_set_header   Host              $http_host;
      proxy_set_header   X-Real-IP         $remote_addr;
  }
}

Using Spring Boot

Spring Boot is the most widely used Java framework, and it only takes a few simple steps to integrate with WinJS.

First run build:

$ npm run build

Then copy the compiled files to the /src/main/resources/static directory of the Spring Boot project.

Restart the project and visit http://localhost:8080/ to see the results.

For convenient integration, it's best to use hash routing. If you want to use browserHistory, you can create a controller and add the following code:

@RequestMapping("/api/**")
public ApiResult api(HttpServletRequest request, HttpServletResponse response){
    return apiProxy.proxy(request, response);
}

@RequestMapping(value="/**", method=HTTPMethod.GET)
public String index(){
    return "index"
}

Using Express

Example with express:

app.use(express.static(path.join(__dirname, 'build')));

app.get('/*', function (req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

Using Egg

Example with egg:

// controller
exports.index = function* () {
  yield this.render('App.jsx', {
    context: {
      user: this.session.user,
    },
  });
};

// router
app.get('home', '/*', 'home.index');

For more about routing, see WinJS Routing Documentation.