Adding external CSS libraries
If you want to use external CSS libraries you can install them using NPM and include the necessary files.
Bootstrap
- Install the dependency:
npm install bootstrap
- Use the distributable, either:
- Include it in the stylus entry file
patterns/index.styl
(preferred):
@import 'node_modules/bootstrap/dist/css/bootstrap.css'
- Import directly in the application entry file
pages/_app.js
:
import 'bootstrap/dist/css/bootstrap.css'
- Include it in the stylus entry file
IE11 Compatability
By default, this application is not supporting IE11. Therefore, we have a middleware in server/index.js
that detects if a user is coming with IE and if so, we render a page which suggests downloading a modern browser.
If you need to support IE11, you have to remove this middleware. In addition, there are a couple of APIs and features that you will need to polyfill or refactor:
CSS Custom Properties
The application makes heavy use of CSS Custom Properties. In order to add a fallback for IE11, you will need to perform the following steps:
npm install postcss-css-variables
- Create a
postcss.config.js
and add:
module.exports = {
plugins: {
'postcss-css-variables': {
preserve: true, // set this to false if you don't need custom properties at runtime
},
},
}
Error: listen EADDRINUSE: address already in use :::5000
Sometimes it might happen that you get this error in your console while trying to start the Storefront. This can have multiple reasons. The most common is that you already have a Storefront running on that port and forgot to
stop the process properly. In that case: Just stop the Storefront that already runs on that port. If the terminal of that process isn't open anymore or stopping the process doesn't work you can try this:
lsof -i tcp:5000
kill -9 PID
netstat -ano | findstr :5000
tskill typeyourPIDhere
macOS Monterey
If, after updating to macOS Monterey, you're facing this error message while trying to start the Storefront Error: listen EADDRINUSE: address already in use :::5000
check out this thread.
Updated about 1 year ago