TypeScript Support 🔵

The Shopify App Vue Template now offers robust TypeScript support, enhancing your development workflow with type safety and modern JavaScript features.

   npx degit Mini-Sylar/shopify-app-vue-template#typescript your-app-name

Development Mode

In development mode, your TypeScript files are bundled on the fly with SWC. You can write your code using TypeScript syntax, and it will be transformed and served by the development server as expected. It's Fast.

Production Builds with SWC

For production builds, the template utilizes SWC to compile your TypeScript code. SWC is a super-fast JavaScript/TypeScript compiler written in Rust, which significantly speeds up the build process.

Source Maps

Source maps are generated during the production build. This means that even though your code is compiled and optimized for production, you can still debug effectively. If an error occurs in your live application, the source maps will allow you to trace it back to the original TypeScript code, making it easier to identify and fix issues.

Docker

The Dockerfile included in the template is configured to build and run your TypeScript Shopify app. Here's a breakdown of how it works:

1. Multi-Stage Build: The Dockerfile utilizes a multi-stage build approach to keep the final image size small and efficient.
2. Server Build: It first installs server dependencies, then copies the server code and builds it using npm run build (which leverages SWC).
3. Client Build: Next, it sets up the client directory, installs client dependencies (including devDependencies needed for the build), copies the client code, and then runs the client's build script (npm run build).
4. Pruning Dev Dependencies: After the builds are complete, it prunes the server's devDependencies to reduce the image size.
5. Production Environment: NODE_ENV is set to production for the runtime environment.
6. Exposing Port: The Dockerfile exposes port 8081, which is the default port the application runs on.
7. Running the App: Finally, it starts the server using the SWC-compiled output (node dist/src/index.js).

This setup ensures that your Docker image is optimized for production, containing only the necessary files and dependencies to run your application.

Codebase is yours

Finally the codebase is yours, make changes however you want to suite your project needs 😃