My TypeScript SPA Framework is a modern front-end framework for building scalable and maintainable single-page applications (SPA). The framework is capable of creating class components, performing routing, and rendering lists and variables with minimal setup.
- TypeScript based
- Class Component Architecture
- Easy-to-Use Routing
- Custom CLI for scaffolding
- Built-in Webpack configuration
You can use our custom CLI to install and create a new application.
npm install -g ts-spa-cli
ts new -n project_name
You can easily generate new components using the CLI.
ts component --name component_name
ts c --name component_name
This will generate a new component named about
under src/components
, and also place its HTML output inside the /public
directory.
After creation, your project should look like this:
my-app/
├── src/
│ └── components/
├── public/
├── package.json
├── tsconfig.json
└── webpack.config.js
To start the application, run the following command:
ts start
To navigate between different components, you can simply add a route
attribute to any HTML element. For example:
<button route="app">App Component</button>
In the src
directory, you'll have a function staticRoute
to map the route to the corresponding component:
import { AppComponent } from "./components/app.component";
export function staticRoute(path: string){
if(path === "app"){
return AppComponent;
}
return AppComponent;
}
This function takes the path (e.g., "app") as an argument and returns the corresponding component (AppComponent
in this case).
This will start the dev server and open your app at http://localhost:8080
.
To build the application for production, run:
ts build
This will generate production-ready files inside the /dist
directory.
You can simply copy and paste the files from the /dist
directory to your IIS server for deployment.
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.