Giter Club home page Giter Club logo

starbase's Introduction

Starbase v4

Starbase is a production-ready static website boilerplate featuring Webpack 5, TypeScript, PostCSS & Tailwind CSS that was designed to integrate with modern Jamstack hosting providers such as Vercel, Netlify and AWS Amplify. Start building in minutes with some of the most powerful front-end technologies available in 2024, powered by a delightfully simple and fully featured developer experience.

History & Use Case

Starbase was created by Brian Staruk as a personal code styleguide and flexible project boilerplate. It is a perpetual work in progress that has been consistently maintained since early 2017 with a focus on implementing the latest industry standards and keeping all dependencies up to date.

"Simplicity is the ultimate sophistication."
- Leonardo da Vinci

The primary mission of Starbase is to be sophisticatedly simple; easy to configure, extend and integrate. This also happens to make it a great platform for web developers to enhance their knowledge of bare-metal Webpack configs, TypeScript and/or Tailwind CSS.


Installation

To get started, run the command below, which will guide you through the installation process:

npx starbase@latest

Usage

It is recommended to use nvm (or nvm-windows) to manage your Node version installations. If you won't use nvm, you'll need to refer to the /.nvmrc file to verify your version of Node is compatible with the recommended version.

Getting Started

Start by ensuring you are running the recommended version of Node, and installing the project dependencies:

nvm use
npm install

Developing Locally

The dev command will serve the project source at http://localhost:3000. Any changes made within /src will recompile the source and refresh your web browser.

npm run dev

Building for Production

The build command will compile and minify the project source into /dist for integration or deployment.

npm run build

Notes & Considerations

Deploying to Hosting Environment

Starbase is setup to be deployed to the root of a web server on a hosting environment like Vercel, Netlify, etc. As such, all assets (js, css, fonts, images, etc) are referenced with absolute paths.

If you would like to instead reference assets via relative paths, so compiled .html files can be distributed and opened in a web browser without requiring a deployment to a hosting environment, you will need to remove (or comment-out) the publicPath in /webpack/webpack.config.base.ts.

If you would like to keep the absolute paths, but set it to a subdirectory instead of the root, you can change the value instead of removing it.


License

Starbase is free, open source software. Please build awesome things with it. You can buy me a beer next time you're in Boston, star the project and tell a friend, or you can erase all signs of origin and tell your coworkers that you made it yourself. It's all good!

starbase's People

Contributors

bstaruk avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

starbase's Issues

CSS watch doesn't watch

Whenever I change something in any .css file, dev server doesn't respond to this and says that [WDS] Nothing changed. - but in fact I've changed few things across at least 2 files.

Stylelint warnings from vendor files

When running the development server I'd like to exclude the warnings from a vendor file (i.e. purecss).
I tried using .stylelintignore or using /* stylelint-disable */ before the @import but without success.
What do you suggest?
Thanks!

Images srcset not working

It doesn't load srcset images. For eg. I have this in my template:

<img src="images/logo.png" srcset="images/logo.png 1x, images/logo_2x.png 2x" alt="" />

But it won't load the images.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.