12

Faced with problem - setup some prototype of project based on TypeScript. It contains client scripts and server part (NodeJs with ExpressJs).

I would like to have webpack as a bundler and use hot reloading feature to see changes on fly. Initially, i used react-transform-boilerplate-ts, but the problem there - entry point of development server is js file. I suppose it should be ts, because there i would like to include my configuration of express, etc.

So, Does anyone has good boilerplate (followed best practices in project structure) to create project that contains:

  • client (React) and server (typescript)
  • Back-end uses NodeJs and ExpressJs (typescript)
  • client and server support hot reload (as i understand best choice - is webpack option for reloading, not gulp tasks that run watching).

Or maybe you could me good advices, how to configure that kind of stuff in proper way.

Thanks a lot

Improve this question

2 Answers 2

Reset to default
6

Does anyone has good boilerplate (followed best practices in project structure) to create project

Here is a project I've opensourced : https://github.com/alm-tools/alm

  • client (React) and server (typescript)

Check!

  • Back-end uses NodeJs and ExpressJs (typescript)

Check!

  • client and server support hot reload

Check! : Here are the contributing docs https://github.com/alm-tools/alm/blob/master/docs/contributing/README.md#webpack 🌹

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

While your project certainly meets the composition criteria, I don't see how you can consider it "boilerplate." It's a full-fledged app that uses the tech stack OP is looking for. I'm looking for a similar thing to OP, but it'd be a hell of a task to extract the boilerplate from your project.
1

I recently released code for my project management application (nodejs / reactjs + redux / server rendering etc.) - https://github.com/Brainfock/Brainfock Give it a look (online demo available), hopefully you'll find something useful:

Namely, see webpack config to get a good example for your question: https://github.com/Brainfock/Brainfock/tree/master/webpack (i don't think copy-pasting code form Github is necessary)

Improve this answer

1 Comment

Thanks for your concern, however, I believe Github page won't go anywhere, and copy-pasting whole source files in here might have been even worse idea. I left a link specifically for author to see exactly what he's asking for

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.