|
| 1 | +# Nano React App Default Typescript Template |
| 2 | + |
| 3 | +The default template project for [nano-react-app](https://github.com/nano-react-app/nano-react-app). |
| 4 | + |
| 5 | +- `npm start` — This will spawn a development server with a default port of `3000`. |
| 6 | +- `npm run build` — This will output a production build in the `dist` directory. |
| 7 | +- `npm run preview` — This will run the production build locally with a default port of `5173` (this will not work if you haven't generated the production build yet). |
| 8 | +- `npm run typecheck` — This will run `tsc --noEmit` which basically just typechecks your project. |
| 9 | +- `npm run typewatch` — This will run `tsc --noEmit --watch` which will typecheck your project as you make changes. |
| 10 | + |
| 11 | +## Typechecking |
| 12 | + |
| 13 | +Unfortunately, ViteJS does not perform typechecking. So you will need to make use of the `typecheck` and `typewatch` scripts above. |
| 14 | + |
| 15 | +## Custom port |
| 16 | + |
| 17 | +You can use the `-p` flag to specify a port for development. To do this, you can either run `npm start` with an additional flag: |
| 18 | + |
| 19 | +``` |
| 20 | +npm start -- --port 1234 |
| 21 | +``` |
| 22 | + |
| 23 | +Or edit the `start` script directly: |
| 24 | + |
| 25 | +``` |
| 26 | +vite --port 1234 |
| 27 | +``` |
| 28 | + |
| 29 | +## Adding styles |
| 30 | + |
| 31 | +You can use CSS files with simple ES2015 `import` statements anywhere in your Javascript: |
| 32 | + |
| 33 | +```js |
| 34 | +import "./index.css"; |
| 35 | +``` |
| 36 | + |
| 37 | +## Babel transforms |
| 38 | + |
| 39 | +The Babel preset [babel-preset-nano-react-app](https://github.com/nano-react-app/babel-preset-nano-react-app) is used to support the same transforms that Create React App supports. |
| 40 | + |
| 41 | +The Babel configuration lives inside `package.json` and will override an external `.babelrc` file, so if you want to use `.babelrc` remember to delete the `babel` property inside `package.json`. |
| 42 | + |
| 43 | + |
| 44 | +## Deploy to GitHub Pages |
| 45 | + |
| 46 | +You can also deploy your project using GitHub pages. |
| 47 | +First install the `gh-pages` [package](https://github.com/tschaub/gh-pages): |
| 48 | + |
| 49 | +`npm i -D gh-pages` |
| 50 | + |
| 51 | +With Parcel's `--public-url` flag, use the following scripts for deployment: |
| 52 | + |
| 53 | +``` |
| 54 | +"scripts": { |
| 55 | + "start": "vite", |
| 56 | + "build": "vite build", |
| 57 | + "predeploy": "rm -rf dist && vite build", |
| 58 | + "deploy": "gh-pages -d dist" |
| 59 | +}, |
| 60 | +``` |
| 61 | + |
| 62 | +Then follow the normal procedure in GitHub Pages and select the `gh-pages` branch. |
0 commit comments