based on https://github.com/Fabianopb/create-mern-ts-app/tree/master/template
Typescript MERN stack Features:
- frontend and backend in the same project
- authentication/login with JWT
- mongoose
- CI with Travis
- .env config
- seed data
- prettier
- tslint
- server tests
- client tests
- Shared Types
- Public API
- Material-UI
- React Router Dom
intro video https://youtu.be/3-V5hREoe04
adding a property https://youtu.be/Z_tmYFlrPnI
cd stack
cp .env.example .env # just copy the example you can configure below
cd stack
yarn install
yarn start
Frontend: http://localhost:5555/ Backend: http://localhost:5555/60005
This will start client with webpack proxy, and server apps using concurrently
ctrl-C to stop
OR you can start client and server separately, using two separate console windows.
cd frontend; yarn start
cd backend; yarn start
Add a .env file in your backend/.env with app configuration and environment variables
there's an example stack/backend/.env.example
so
cd stack
cp .env.example .env
This will be .gitignore'd so you can put passwords, dbname etc in here Change the variables for security before deploying to production
AUTH_SHARED_SECRET=auth-shared-secret
MONGODB_URI=mongodb://127.0.0.1:27017/tsmerndemo
PORT=60010
SUPERUSER=test
SUPERPASS=test
notes:
- mongoDB database name is last part of the URI, eg
tsmerndemo - SUPERUSER/SUPERPASS is the login for the first user
- PORT is where the server /api runs see ports
The client web proxy needs to match the port set in the backend .env file you can change the proxy target port in frontend/package.json
"proxy": "http://localhost:60005"
and the port the webpack runner is accessible from for development:
"start": "PORT=5555 react-scripts start"
and the server port in backend/.env
A typescript file contains some seed data in backend/data/testData.ts This will get reloaded at startup, and there's a button in the UI to force reload too
Using Mongoose as the manager for MongoDB. You need to create schemas for each model eg like backend/server/items/item.model.ts And also an interface to address that model in types/index.d.ts
A video of me like an idiot adding a property to one of the models and also checking the travis CI
<iframe width="560" height="315" src="https://www.youtube.com/embed/Z_tmYFlrPnI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>I made some tslint changes to my style
"semicolon": [true, "never"],
"quotemark": [false, "double"]
if you want to change them back you can do this throughout the app:
npx tslint -p tsconfig.json --fix
quotes are a pain, there's much example code out there using single-quotes, so I made it not to be an error, but prettier will change to double quotes before a commit.
prettier is also in the app, as a pre-commit hook. you can run this manually from toplevel. this will fix quotes, tabs, newlines etc.
yarn pretty
be careful to change both tslint.json and .pretterrc to be use the same or the commit hook will change back all your single quotes :D. In fact maybe we don't need both but prettier is a bit better at handling some types of reformatting.
I recommend turning on 'format on save' in your editor too which I have in vscode/settings
https://github.com/prettier/prettier-vscode#format-on-save
Is setup. If you move this repo, you'll have to change the settings and the URL in the below:
https://travis-ci.com/dcsan/ts-mern/builds
Look at frontend/src/App.test.tsx
Tests are using enzyme selectors, eg to fake clicking a button with id #fetchDataButton
wrapper.find("#fetchDataButton").simulate("click")
cd backend
yarn test:watch
also yarn coverage to see your test coverage
If you want to expose a public API without autho or login, or working on some other client without web login like a mini-program, you can use a plain endpoint without auth. there's an example here http://localhost:60010/api/meals/ext
There are types in the top level of the app in types/index.ts This means they can be shared between client and server.
This is actually a package and there are links in the client and server to use it so there is no need to import into any files. Neat!
"@types/app-shared-types": "link:../types",
Thanks to @Fabianopb for most of the hard work here!
This is a starter kit for a fullstack application configured to use Express and MongoDB in the backend, and React in the frontend, all written in TypeScript. The backend is built with webpack (configuration inspired from here), and the frontend was bootstraped with create-react-app-typescript.
This starter kit includes test configuration and a couple test examples using Jest, as well as minimum set up to run your tests in Travis CI and to deploy to Heroku.
Run your mongo instance locally, as for example:
$ sudo mongod --dbpath /data/test/ --port 27017
Notes: this is important to be done before installing the dependencies so the script to populate the database with sample data can connect to mongo.
Create a .env file with the authentication secret in the root of the backend folder (check backend/.env.example).
AUTH_SHARED_SECRET=my-auth-shared-secret-hash-here
Install dependencies:
$ yarn install
Launch the application:
$ yarn start
The backend is structured by routes. Initially we have items and users, and inside of each we have the respective model, controller, and tests.
Say you want to create an endpoint to manage your favorite restaurants. you can then create the following structure under the backend/server/restaurants folder:
backend/server/restaurants/
│── restaurant.model.ts
│── restaurants.controller.ts
└── restaurants.test.ts
The model is a Mongoose model, and it contains the schema for your object and its methods if necessary.
The controller consists of your endpoints, where you define what actions your user will be able to perform, like creating, reading, updating, and deleting entries. Notice that if you use the authorize middleware preceding your endpoint's callback it will be a private route. In other words, the user will only be able to interact with that endpoint if he has a valid token (if he is authenticated).
Example of a private endpoint. If you remove authorize this will be a public endpoint.
router.route("/").get(authorize, async (request, response) => {
const items = await Item.find();
return response.status(200).json(items);
});For testing the backend we use a combination of jest, supertest, and mongodb-memory-server.
It's important to start an instance of MongodbMemoryServer (an in-memory version of Mongo run only during tests so you don't interact with your real database when testing) before the tests start. Also don't forget to clean up the in-memory database, disconnect, and close your mocked connections.
If you test for authenticated routes you need a valid token, which can be aquired for example in the beforeAll method.
You can see examples for all of that in items.test.ts and users.test.ts.
Say goodbye to PropTypes, and welcome TypeScript!
A class component receiving props and containing local state can be written like this:
type MyComponentState = {
isOpen: boolean;
value: number;
};
type MyComponentProps = {
name: string;
callback: () => void;
};
class MyClassComponent extends React.Component<MyComponentProps, MyComponentState> {
state = {
isOpen: true,
value: 0
};
public render() {
return (
// your JSX here...
);
}
private myPrivateMethod = (data: string): void => {
// do something in your private method...
};
}In the other hand, a functional (presentational) component can be written like this:
type MyComponentProps = {
name: string;
callback: () => void;
};
const MyFuncComponent: React.SFC<MyComponentProps> = ({ name, callback }) => (
// your JSX here...
);Just as a footnote it's very desirable to share types between your API and your frontend so both can talk in the same language. This could be achieved, for example, by creating a local @type module in the root that could be directly linked to each project via yarn's link.
MIT