Boilerplate For React Applications Using Semantic-UI Components And Parcel
SUI-Parcel is a new project which empowers developers to start their single page application in minutes.
About The Project
Setting up a new single page application with React can be a pain. SUI-Parcel is the pain killer in this regard. You can set up and deploy a new project in minutes thanks to Parcel and Semantic-UI for React.
This boilerplate should make it quite easy to build something based on top of it. It has a great developer experience with zero configuration needed. Thank you, Parcel.
A developer can see changes instantaneously in the browser. After you have started your project with yarn start, a development server will be started which picks up any saved changes and displays the updated application in your browser; without the need to reload. Hot-reloading is a huge time saver.
It is also easy to build the project with just one command: yarn build. If you have Netlify installed you can even deploy it with one command: netlify deploy
Technology Stack
- Babel—Next generation JavaScript
- React—A JavaScript library for building user interfaces
- Semantic-UI React—The official Semantic-UI-React integration
- Parcel—Blazing fast, zero configuration web application bundler
- Semantic-UI-Forest—Collection of design, themes and templates for Semantic-UI
Roadmap
- Add Redux for state management
Getting Started
Building your project on top of this starter is straightforward. Just clone the starter in a folder with your project's name. Then remove the Git history to be able to initialize your own Git repository. Then install the dependencies with yarn. When the installation has finished, you can run the new app with yarn start. These are the steps in more detail:
git clone https://github.com/cutemachine/sui-parcel.git YOUR_PROJECT
cd YOUR_PROJECT
rm -rf .git
git init
git add .
git commit -m 'Initial version of YOUR_PROJECT'
yarn
yarn start
Code
The code is free to use and is hosted on GitHub.
Demo
Check out the live demo of SUI-Parcel.
How To Contribute
Do you want to contribute to this project? Great. You can contact me through my Github profile page or just send a pull request.
Posted on Utopian.io - Rewarding Open Source Contributors
Thank you for the contribution. It has been approved.
You can contact us on Discord.
[utopian-moderator]
Hey @codingdefined, I just gave you a tip for your hard work on moderation. Upvote this comment to support the utopian moderators and increase your future rewards!
Thank you codingdefined for the review.
I was also playing around with parcel and was building a react setup that is also using redux and semantic ui. It took like 3 hours to setup everything and looks pretty amazing! :)
Yes, it is a good setup. Do you share your code on GitHub or Bitbucket?
Hey, I think it's not in the state yet to share it, was just a try & play. But if you are interested in I can think about make a small repo with the basics. :)
The more code I can read the better :)
Is there anything you did better than I did in the starter I shared on GitHub?
I really like the way you were setting up the repository. I have used
semantic-ui-reactalmost a year in production and I enjoyed to see someone using it properly. I just had includedredux, but this will introduce additional complexity to a starter project.Thanks for the kind words.
I will add Redux at some point in the future. It will be easier to remove it than to add it, hehe.
Between the lines, I read that you stopped using
semantic-ui-react. What are you using these days?You're right with this! I'd like to continue working with semantic ui, but I switched my workplace and know doing client work, so I currently need to built my own component libraries based on their corporate designs. And I can't say it often enough, the team behind react semantic ui did an awesome job in terms of usability of the components. :)
Maybe convert to SAO template https://github.com/saojs/sao
I saw you using SAO for one of your tools. I have never used SAO before but will check it out. Thanks for the suggestion.
Hey @cutemachine I am @utopian-io. I have just upvoted you!
Achievements
Community-Driven Witness!
I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!
Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x