What did you do through this starter boilerplate?
wellyshen opened this issue · 77 comments
Let's make some sharing between us 👻
I've just started as well, but this is by far the best boilerplate project I've ever used. I'm learning Redux through playing with this boilerplate. I have a question: What does it use that makes those full page white on black debug messages instead of printing them just in the console? That's awesome and I really want to know what's doing it.
Hi @dianafaye17 Some error message will be printed on the screen through my boilerplate however some of them are printed by 3rd party libraries, can you attachment the screenshot to me? Thanks
I'm referring to these ones:
Hi @dianafaye17 I think the screen error message is provided through webpack-2, I just guess not do deep survey :)
Just wanted to say thank you.
We are choosing this boilerplate because;
- Simple maintainable stack.
- Proper Hot Reloading without hacks.
- Up to date and none static package versions.
- Easy to modify.
- Un-opiniated stack
- Standard react-reduct implementation.
We are not choosing one of the popular ones due to its large list of fragile dependencies and opiniated complex stack.
This is the best isomorphic starterkit I've found on the web so far. Thanks for it. We're currently using it in a WIP project.
I concur with NiluK! I think it's really good! Any criticisms I make are only because I want it to get better. I am grateful to you @wellyshen for all your efforts and you'll be pleased to know that I'm taking it into production as we speak! :)
I'm looking at using this starter for developing a PWA (Progressive Web App), however I need to investigate the difficulty of integrating async routes (route component and reducer chunking) as that seems to be a critical part in reducing initial request size.
I am also concerned about how often I am running into checksum errors when fiddling around with this starter kit. I have not quite figured out how to consistently reproduce them, but they're usually solved by killing the app the restarting it.
I'm learning to program in react and this project has all the latest "key" terms I'm looking for. Is there any opensource project I can checkout that current uses it? Hopefully its complex enough to be useful (ie. logins, db calls, etc).
@wellyshen - www.sliips.com / https://github.com/iamacup/sliips-ui
Thanks for your hard work on this template :)
Ported my Ham Radio Callsign Lookup app with Ract/Redux. But I am not sure how to deploy the production code into a Linux system daemon (in CentOS) so that systemd can start/stop it. Any advice? Can this starter kit be integrated with pm2?
@danjonesdev yes and I recommend anyone else does the same unless they are building something that is going to be paid for off the bat and / or needs to be super robust from day 1.
The thing about making something that is fully testable with strong typing is that - while it sounds nice - it has two major drawbacks:
-
Unless you know what you are building is going to be paid for / consumed - why bother? Sliips is a startup and we either fail (and thus who cared about strong typing) or we will succeed (in which case we get a bunch of cash and can pay someone to sort out test coverage later)
-
It takes a while and makes the syntax really hard to read at a glance.
This is not true of our backend which needs to be rock solid, the frontend however... ;-)
@iamacup that's actually really insightful, I may actually do the same (I'm building an article site with this boilerplate) and I've always found using Types on the front-end to be a bit excessive!
It maybe a little bit annoying, but the type checking help me avoid many bug troubles ;)
@wellyshen
You wrap action, reducer and containers together, it's cool and I like it.
But if one day you have two containers, both of them want to use same action & reducer,
cuz they might have same task to do.
So how would you deal with this problem, sharing the action or reducer.
I checked this Ducks File Structure for Redux and I tried to compare the props and cons between you and Ducks.
Also one more question, why use redux-thunk instead of redux-saga ?
Thanks.
@DumDumGeniuss
Thank you for give this starter a try. If you have action / reducer shared by multiple containers you can create a common folder for them. The project structure can be adjusted for your need.
I use redux-thunk. Because it's created by the author of redux so I think it could works well with redux.
@wellyshen
It makes sense, thanks.
I think I'm still gonna change it to "Ducks" structure.
Just be curious that why not moving '/src/types/index.js' into '/src/redux' or create a new one in '/src/redux', since 99% types of it are for redux.
Thanks
FYI, I really really like this project, it's the most clear and readable starter-kit for react-redux-universal by far, hope you can keep maintaining this.
@DumDumGeniuss
I put type out of ./src/redux, because I think it more obvious. But your suggestion make sense. Just do it. Thanks man I will keep maintain it.
@DumDumGeniuss we are using this boilerplate too with exactly the same issue that you are talking about. We have an adaptive design so we have separate components for mobile and desktop but the same reducers. So we divided the src into three folders - mobile, desktop and common. The mobile and desktop folder contains the components while the common folder contains the reducers and the actions along with any other logic common to both web and mobile. It seems to be handling pretty well right now. Do let me know if you need to know anything more. Would love to be of help. :)
@deepank411 Thank you for sharing your developing experience.
@wellyshen Hello, in our team we plan to make a big update, the software we are building is not answering the needs of our clients anymore and we have problem with scalability. I am looking for a starter kit, the create-react-app is very great but doesn't support SSR so I am looking for alternative.
Why your starter kit?
- Support everything we want out of the box: Redux, SSR, Flow, etc...
- Small number of files: This is the most important point for me... I cannot believe the amount of file needed to configure React, Webpack, Babel etc... CLI solve this issues but doesn't support SSR (if we have 8 clients we have 8 times the amount of files required to configure React :()
The question I have for you @wellyshen is about the update, are actively working on this boilerplate? When there are major update like Babel 7 very soon are you planning to upgrade your boilerplate and give us clear steps to update the boilerplate files in our app?
@iamacup Hey man, just got a quick question, What service do you use to host sliips? I'm going to be wanting to push my new project live in the next few months (using this boilerplate) - and not sure what to use (eg. godaddy? etc)
Congrats @danjonesdev, what kind of product did you make?
@wellyshen thank you, It's an article based magazine for the genre of music I'm currently producing (halftime drum & bass) - the app isn't quite ready yet but it's coming along nicely thanks to this boilerplate, this will be the first react app that I deploy and backwards engineering with this boilerplate has really helped me understand the more complex side of react.
@danjonesdev Sounds cool, waiting for your product. BTW, I'm going to release my iOS app which made by React-Native. I'll share it as soon as it has been deployed to App Store ;)
That's cool man! Does this mean you will be doing a react-native-cool-starter? 😄 @wellyshen
A react & react-native branch that share redux, server etc but use different view components for mobile and web would be so sweet :) just a thought!
@danjonesdev Haha, sounds great. But I don't have time to maintain two starters :(
@wellyshen very nice starter. Helped me a lot for just upgrading my own project. Will definitely use it for the next one. kudos
Nice starter.. Thanks.
Just Curious why you removed the DISABLE_SSR flag.
Found it useful to debug app in Browser dev tools rather than throw an error on the server.
@LeeFrancis Thank you for give it a try. Recently I'm developing code-splitting for this starter and I found if I wanna keep __DISABLE_SSR__ mode that I need to add more logics and configurations. Therefore I remove the flag trying to keep this starter simple and clear.
Has anyone successfully deployed using Heroku? I am currently experiencing problems doing so and would love to know what other people have tried. @iamacup did you use Heroku for sliips?
Thank you in advance!
Sorry @danjonesdev were using a docker/kubenetes combo.
hey just a suggestion, it will be good if you be possible to place a sample code for nested routing with sub-components, a very good piece of work by the way, im using this boilerplate for my cms project soon. 👍
So yesterday I launched Rendah Mag, an article based magazine focusing on the latest news and releases within the 'halftime drum & bass' community (which is the genre I produce in my spare time)
The magazine is built on top of this starter and I would like to thank @wellyshen for the great work and also for helping me with a few issues along the way!
Here's the site live: https://www.rendahmag.com/
@danjonesdev
Amazing website bro 👍. Is this your working or personal product? Where did you get the content?
BTW, would you like let it be a part of Real Case Study of this starter kit?
@wellyshen Thank you man!
This is a personal project I have been planning for a long time. The content is written by both myself & some authors who have agree'd to create content for the magazine!
Of course, feel free to add it to Real Case Study!
I am trying to use this for a project that includes websockets. Is it possible to set it up some components that are excluded in the server rendering pipeline? How do I do that? Great boilerplate, btw!
@destinatis Did you mean lazy loading components?
@wellyshen Umm... Ideally, ws integration into express for the backend, html5-websocket client and react+redux setup for onmessage callbacks for the frontend.
I'll use this for a new project from my job, I really enjoy your boilerplate.
We'll have a big product, a lot of containers and components, and I liked your folder structure too :D
@wellyshen I would like your thoughts... if you can :D
I liked your folder structure, but I was looking other patterns, and I found this read here and it's similar to your, but have some differences... whats your thoughts?
@maiconcarraro Thank you for your feedback. I'll spend time to read the article that you shared to me 👍
@wellyshen there is a way to support you? like Buy me a coffee
@maiconcarraro Haha, dude you are very welcome. Maybe one day I visit your country then you can buy me a real coffee lol.
@wellyshen absolutely! If you visit let me know 👍
Another feedback, yarn build has the command rm -rf that doesn't work on windows (at least on cmd, and powershell is a different parameter). I have cmder, so it's work great... but someone else can have this problem if try to build on default cmd (or visual code default terminal too)
I can help you if you need
Cool man. I used rimraf in the past. Can you help me check if it works on windows? Thanks.
@wellyshen Sure, I can check if it works
@maiconcarraro Thank you a lot 👍
@wellyshen Thanks for this awesome starter kit! Will need to buy you a beer 🍺 if you ever come to Melbourne! We've used it to create DealDrop.com. Do you mind if I put a PR up to update your Real Case Study section?
(DealDrop.com is the best place to find verified coupon codes, deals, promos and offers for thousands of stores & brands you love. Never pay full price again 🤑)
@denny64 Wow, your product looks dope bro. Plz send me a PR. I'm glad to have it as my case study 💯 BTW, you owe me a beer 🍺lol.
Could anyone please share Docker files for deploy?
Why there is no Dockerfile and docker-compose.yml in repo? We have ssr here... so it would be nice to have docker here...
@wellyshen yeah sure,
I’m pretty good at docker, but I don’t know the NodeJs at all... (actually I’m the python developer)
Do somebody have any files I could start from trying to make it ?
@taime I think I can create a docker branch for you guys. Give me time to study it ;)
@wellyshen thanks, I will try to make it work & share the results
I tried a lot of universal starter kits, but I love this starter kit, looks clean & simple.
I'm getting window is not defined error while executing the project even after the extension on my chorme. what might be the issue?
@rambudha window object and it's related APIs only can be accessed in client-side, plz make sure you didn't use it directly in server-side like below:
if (typeof window !== 'undefined') {
// Use window related APIs
}@wellyshen Thank you for simple and best boilerplate I have ever seen. Going to use it in to production.
@sunildandwate Nice! Keep going bro.
HI @wellykkstream I have tarted using it going good but I wants to add child routes and render then in admin page.
I have write trial code but it's not working could you please help in that.
Below code I have written.
import React, { memo } from "react";
import { Helmet } from "react-helmet";
import { Link } from "react-router-dom";
import { renderRoutes } from "react-router-config";
import styles from "./styles.module.scss";
type Props = {
history: Record<string, any>;
location: Record<string, any>;
match: Record<string, any>;
route: Record<string, any>;
staticContext: Record<string, any>;
};
const Admin = ({
history,
location,
match,
route,
staticContext,
}: Props): JSX.Element => {
console.log(route.routes);
return (
Admin
Child route link
{renderRoutes(route.routes)}
);
};
export default memo(Admin);
@sunildandwate How about the setup of your route config (related docs)? Maybe you can give me a minimal reproduced repo, I need more context for debugging...
@wellyshen we used the boiler plate to make the production music site https://www.bammusic.com :) thank you
@mikejdegroot Wow! I love the music website, super cool, well done bro! Could you mind to list the website on the real case study section?
@mikejdegroot Wow! I love the music website, super cool, well done bro! Could you mind to list the website on the real case study section?
Thanks very much! it's been a long road, I used your boilerplate to learn react from the ground up whilst developing this. Really appreciate all your hard work on it! I'd be honoured to put it on the case study section
@mikejdegroot
I have added the BAM Music to the real case study section. It's great to help you via this starter kit. Your learning story is the biggest reward for me to contribute OSS. Great work again! 💯
Used this boilerplate modified it using Redux observable and created spinny . Thank you for such an amazing isomorphic boilerplate! Kudos!!
@ashivliving Awesome man, the website so professional. May I add it to the Real Case Study section?
@wellyshen yeah sure! :)