Development Tooling Setup
A comprehensive guide to configuring your development environment with essential tools, SDKs, and configuration files for optimal productivity.
1. Prerequisites
Development Tools
- Node.js 18.0 or higher
- npm 9.0+ or yarn 1.22+
- Code Editor (VS Code/VS 2022+)
2. Install Development Tools
# Install platform CLI globally
npm install -g platform-cli
# Create new project with TypeScript template
platform new my-app --type=ts
# Navigate to project directory
cd my-app
# Install dependencies
npm install
Project Setup
The CLI will scaffold a new project with preconfigured TypeScript, ESLint, and Webpack. You can choose between different template types and add features during setup.
Build Configuration
Webpack will be configured with hot module replacement enabled. TypeScript is configured with module resolution and strict type checking enabled by default. Add Babel for JS/JSX support if needed.
Next Steps
Configure environment variables in .env files. Modify tsconfig.json for custom TypeScript settings. Add linting rules in .eslintrc.json if needed.
3. Environment Configuration
Environment Variables
API_KEY=your_api_key_here
API_URL=https://api.example.com
NODE_ENV=development
Configuration Files
-
tsconfig.json- TypeScript compiler options -
webpack.config.js- Module bundling rules -
.env- Environment configuration
4. Verify Installation
Run Development Server
npm start
This will start a development server with hot reload enabled. Open http://localhost:3000 to view your app.
Test Configuration
Create a test file src/tests/tooling-check.ts with the following code:
// Test that project is properly configured
const apiKey = import.meta.env.VITE_API_KEY;
if (!apiKey) {
throw new Error('API_KEY not set in environment');
}
console.log('Tooling setup verified!');
Success!
When you run the test file, you should see "Tooling setup verified!" in the terminal output.
If you see an error about missing environment variables, double check your .env file setup.
Common Issues and Solutions
1. Missing Environment Variables
Ensure you have a .env file in the root directory of your project. All custom environment variables must start with VITE_ for them to be exposed to the frontend during build.
2. TypeScript Errors
Make sure to add type declarations for any external packages. Run npm install @types/some-library or create a types.d.ts file in your project with custom type declarations.
3. Webpack Build Failing
Try removing node_modules and package-lock.json, then run npm install again. Make sure there are no conflicting versions in your dependencies.
4. CLI Not Found
If the platform command is not available, make sure it's installed globally. Run npm install -g platform-cli and check your PATH environment variable for node_modules/.bin.
Ready for More?
Now that your development environment is configured, explore more advanced tutorials or dive into the API reference to extend your application's capabilities.