'MEAN Stack, Heroku, and TailwindCSS | Website is showing a blank screen
I'm building a website using the MEAN stack (TailwindCSS for the CSS styling) and deploying it on Heroku. The website is blank: https://bitesizedtreasures.herokuapp.com/
Could someone assist? Link to Github code: https://github.com/BiteSizedtreasures/website/tree/heroku-deploy
tailwind.config.js
module.exports = {
content: ['./src/**/*.{html,js}',
'./node_modules/tw-elements/dist/js/**/*.js'
],
theme: {
colors: {
'blue': '#1fb6ff',
'purple': '#7e5bef',
'lite-pink': '#F7DAD9',
'orange': '#ff7849',
'green': '#13ce66',
'yellow': '#ffc82c',
'gray-dark': '#273444',
'gray': '#8492a6',
'gray-light': '#d3dce6',
'bluesign': '#007AFF',
blue: colors.blue,
yellow: colors.amber,
gray: colors.slate,
white: colors.white,
},
fontFamily: {
sans: ['Graphik', 'sans-serif'],
serif: ['Salsa', 'serif'],
},
fontSize: {
'xs': '.75rem',
'sm': '.875rem',
'tiny': '.875rem',
'base': '1rem',
'lg': '1.125rem',
'xl': '1.25rem',
'2xl': '1.5rem',
'3xl': '1.875rem',
'4xl': '2.25rem',
'5xl': '3rem',
'6xl': '4rem',
'7xl': '5rem',
},
},
plugins: [
require('tw-elements/dist/plugin')
]
};
angular.json
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"angular-src": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
},
"@schematics/angular:application": {
"strict": true
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"outputPath": "dist/angular-src",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"customWebpackConfig": {
"path": "webpack.config.js"
},
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "3mb",
"maximumError": "6mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "3mb",
"maximumError": "6kb"
}
],
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"outputHashing": "all"
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-builders/custom-webpack:dev-server",
"configurations": {
"production": {
"browserTarget": "angular-src:build:production"
},
"development": {
"browserTarget": "angular-src:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "ngx-build-plus:extract-i18n",
"options": {
"browserTarget": "angular-src:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
}
}
}
}
},
"defaultProject": "angular-src"
}
server.js
if(server_port == 8080) {
app.use(express.static(path.join(__dirname + "/public/")));
app.get("/*", (req, res) => {
const fullPath = path.join(__dirname, "/public/index.html");
console.log(" Fetching from.. " + fullPath);
res.sendFile(fullPath);
});
} else {
app.use(express.static(path.join(__dirname + "/angular-src/dist/angular-src"))); // Used for deployment
app.get("/*", (req, res) => {
const fullPath = path.join(__dirname,"/angular-src/dist/angular-src/index.html");
console.log(" Fetching from.. " + fullPath);
res.sendFile(fullPath);
});
}
// Start Server
app.listen(server_port, () => {
if(server_port == 8080) { // development status
console.log(`Listening at http://${process.env.HOST_NAME}:${server_port}`);
} else { // deployment status
console.log("Server listening on port " + server_port);
}
});
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
