Hi! I just deployed my first into Netlify and the setup and deploy has been super easy. But I’m writing because it doesn’t work I believe to due the headers set in response for my static assets.
My App is a Vue.j SPA page. https://dimrill.netlify.app/
This is the Deploy log:
5:05:27 PM: Build ready to start
5:05:29 PM: build-image version: 09c2cdcdf242cf2f57c9ee0fcad9d298fad9ad41
5:05:29 PM: build-image tag: v3.5.0
5:05:29 PM: buildbot version: 8df8a50b1177b0b57364d20e0ea150448924cebf
5:05:29 PM: Fetching cached dependencies
5:05:29 PM: Starting to download cache of 109.5MB
5:05:30 PM: Finished downloading cache in 1.333724087s
5:05:30 PM: Starting to extract cache
5:05:35 PM: Finished extracting cache in 4.644871954s
5:05:35 PM: Finished fetching cache in 6.011702638s
5:05:35 PM: Starting to prepare the repo for build
5:05:35 PM: Preparing Git Reference refs/heads/master
5:05:37 PM: Starting build script
5:05:37 PM: Installing dependencies
5:05:37 PM: Python version set to 2.7
5:05:38 PM: Started restoring cached node version
5:05:40 PM: Finished restoring cached node version
5:05:41 PM: v12.18.0 is already installed.
5:05:41 PM: Now using node v12.18.0 (npm v6.14.4)
5:05:41 PM: Started restoring cached build plugins
5:05:41 PM: Finished restoring cached build plugins
5:05:42 PM: Attempting ruby version 2.7.1, read from environment
5:05:43 PM: Using ruby version 2.7.1
5:05:43 PM: Using PHP version 5.6
5:05:43 PM: Started restoring cached node modules
5:05:43 PM: Finished restoring cached node modules
5:05:44 PM: Started restoring cached go cache
5:05:44 PM: Finished restoring cached go cache
5:05:44 PM: go version go1.14.4 linux/amd64
5:05:44 PM: go version go1.14.4 linux/amd64
5:05:44 PM: Installing missing commands
5:05:44 PM: Verify run directory
5:05:45 PM:
5:05:45 PM: ────────────────────────────────────────────────────────────────
5:05:45 PM: Netlify Build
5:05:45 PM: ────────────────────────────────────────────────────────────────
5:05:45 PM:
5:05:45 PM: ❯ Version
5:05:45 PM: @netlify/build 5.3.3
5:05:45 PM:
5:05:45 PM: ❯ Flags
5:05:45 PM: deployId: 5fc3c6c7b2cc8c00086724e5
5:05:45 PM: mode: buildbot
5:05:45 PM:
5:05:45 PM: ❯ Current directory
5:05:45 PM: /opt/build/repo
5:05:45 PM:
5:05:45 PM: ❯ Config file
5:05:45 PM: /opt/build/repo/netlify.toml
5:05:45 PM:
5:05:45 PM: ❯ Context
5:05:45 PM: production
5:05:45 PM:
5:05:45 PM: ────────────────────────────────────────────────────────────────
5:05:45 PM: 1. build.command from netlify.toml
5:05:45 PM: ────────────────────────────────────────────────────────────────
5:05:45 PM:
5:05:45 PM: $ npm run build
5:05:45 PM: > dimrill@0.1.0 build /opt/build/repo
5:05:45 PM: > vue-cli-service build
5:05:46 PM: - Building for production...
5:06:08 PM: WARNING Compiled with 6 warnings4:06:08 PM
5:06:08 PM: Module Warning (from ./node_modules/eslint-loader/index.js):
5:06:08 PM: /opt/build/repo/src/components/SourceTracker.vue
5:06:08 PM: 107:11 warning Unexpected console statement no-console
5:06:08 PM: 123:7 warning Unexpected console statement no-console
5:06:08 PM: ✖ 2 problems (0 errors, 2 warnings)
5:06:08 PM:
5:06:08 PM: Module Warning (from ./node_modules/eslint-loader/index.js):
5:06:08 PM: /opt/build/repo/src/components/SourcesTracker.vue
5:06:08 PM: 134:5 warning Unexpected console statement no-console
5:06:08 PM: ✖ 1 problem (0 errors, 1 warning)
5:06:08 PM:
5:06:08 PM: Module Warning (from ./node_modules/eslint-loader/index.js):
5:06:08 PM: /opt/build/repo/src/views/BigMLIOAuth.vue
5:06:08 PM: 93:7 warning Unexpected console statement no-console
5:06:08 PM: ✖ 1 problem (0 errors, 1 warning)
5:06:08 PM:
5:06:08 PM: You may use special comments to disable some warnings.
5:06:08 PM: Use // eslint-disable-next-line to ignore the next line.
5:06:08 PM: Use /* eslint-disable */ to ignore all warnings in a file.
5:06:08 PM: warning in ./src/store/store.js
5:06:08 PM: Module Warning (from ./node_modules/thread-loader/dist/cjs.js):
5:06:08 PM: /opt/build/repo/src/store/store.js
5:06:08 PM: 57:9 warning Unexpected console statement no-console
5:06:08 PM: ✖ 1 problem (0 errors, 1 warning)
5:06:08 PM:
5:06:08 PM: @ ./src/main.js 12:0-34 24:9-14
5:06:08 PM: @ multi ./src/main.js
5:06:08 PM: warning
5:06:08 PM: asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
5:06:08 PM: This can impact web performance.
5:06:08 PM: Assets:
5:06:08 PM: js/chunk-vendors.ca09f884.js (1.09 MiB)
5:06:08 PM: warning
5:06:08 PM: entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
5:06:08 PM: Entrypoints:
5:06:08 PM: app (1.33 MiB)
5:06:08 PM: css/chunk-vendors.1aae1624.css
5:06:08 PM: js/chunk-vendors.ca09f884.js
5:06:08 PM: css/app.9ac38b00.css
5:06:08 PM: js/app.2e2286d5.js
5:06:08 PM: File Size Gzipped
5:06:08 PM: dist/js/chunk-vendors.ca09f884.js 1112.79 KiB 313.37 KiB
5:06:08 PM: dist/js/views-dashboard-private.0abef0 17.91 KiB 6.50 KiB
5:06:08 PM: 5e.js
5:06:08 PM: dist/js/app.2e2286d5.js 17.32 KiB 6.36 KiB
5:06:08 PM: dist/js/dashboard-layout.6d3ff96c.js 6.26 KiB 2.43 KiB
5:06:08 PM: dist/js/views-auth-iocredentials.408ab 3.54 KiB 1.50 KiB
5:06:08 PM: fbc.js
5:06:08 PM: dist/js/auth-layout.f83b352e.js 0.97 KiB 0.53 KiB
5:06:08 PM: dist/css/chunk-vendors.1aae1624.css 219.18 KiB 35.14 KiB
5:06:08 PM: dist/css/app.9ac38b00.css 10.15 KiB 2.98 KiB
5:06:08 PM: dist/css/views-dashboard-private.6c1e4 0.28 KiB 0.12 KiB
5:06:08 PM: 66d.css
5:06:08 PM: dist/css/dashboard-layout.96fa2f8d.css 0.12 KiB 0.12 KiB
5:06:08 PM: Images and other types of assets omitted.
5:06:08 PM: DONE Build complete. The dist directory is ready to be deployed.
5:06:08 PM: INFO Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
5:06:09 PM:
5:06:09 PM: (build.command completed in 23.9s)
5:06:09 PM:
5:06:09 PM: ────────────────────────────────────────────────────────────────
5:06:09 PM: Netlify Build Complete
5:06:09 PM: ────────────────────────────────────────────────────────────────
5:06:09 PM:
5:06:09 PM: (Netlify Build completed in 23.9s)
5:06:09 PM: Caching artifacts
5:06:09 PM: Started saving node modules
5:06:09 PM: Finished saving node modules
5:06:09 PM: Started saving build plugins
5:06:09 PM: Finished saving build plugins
5:06:09 PM: Started saving pip cache
5:06:09 PM: Finished saving pip cache
5:06:09 PM: Started saving emacs cask dependencies
5:06:09 PM: Finished saving emacs cask dependencies
5:06:09 PM: Started saving maven dependencies
5:06:09 PM: Finished saving maven dependencies
5:06:09 PM: Started saving boot dependencies
5:06:09 PM: Finished saving boot dependencies
5:06:09 PM: Started saving go dependencies
5:06:09 PM: Finished saving go dependencies
5:06:09 PM: Build script success
5:06:09 PM: Starting to deploy site from 'dist'
5:06:09 PM: Creating deploy tree
5:06:09 PM: Creating deploy upload records
5:06:10 PM: 1 new files to upload
5:06:10 PM: 0 new functions to upload
5:06:10 PM: Starting post processing
5:06:10 PM: Post processing - HTML
5:06:10 PM: Post processing - header rules
5:06:10 PM: Post processing - redirect rules
5:06:10 PM: Post processing done
5:06:10 PM: Site is live ✨
5:06:29 PM: Finished processing build request in 1m0.426574725s
This is my netlify.toml
[build]
command = "npm run build"
publish="dist"
[context.production.environment]
VUE_APP_BIGML_IO_BASE_URL="https://ozone.dev.bigml.io"
VUE_APP_BIGML_UI_BASE_URL="https://ozone.dev.bigml.com"
VUE_APP_VPC_API_NAME = "Ozone BigML"
And my _redirects file looks like
# Netlify settings for single-page application
/* /index.html 200
(Note: In my first attempt I had this as part of the netlify.toml file)
With this setup, my index.html page is working, but the statics assets are not served correctly, they are loaded, but blocked in the browser due to:
Resource interpreted as Stylesheet but transferred with MIME type text/html:
It looks like all my assets are actually served as my index.html page.
I also tried adding a _headers the Content-Type of my css and js files, but now I realice it has no sense, since the issue looks related to the redirects of my app.
I believe the deployment and build worked fine, I’ve downloaded the zip of the deployment and it looks good to me.
.
├── _headers
├── _redirects
├── apple-touch-icon.png
├── css
│ ├── app.9ac38b00.css
│ ├── chunk-vendors.1aae1624.css
│ ├── dashboard-layout.96fa2f8d.css
│ └── views-dashboard-private.6c1e466d.css
├── favicon.ico
├── fonts
│ ├── element-icons.535877f5.woff
│ └── element-icons.732389de.ttf
├── images
│ └── default-avatar-300x300.png
├── index.html
├── js
│ ├── app.2e2286d5.js
│ ├── app.2e2286d5.js.map
│ ├── auth-layout.f83b352e.js
│ ├── auth-layout.f83b352e.js.map
│ ├── chunk-vendors.ca09f884.js
│ ├── chunk-vendors.ca09f884.js.map
│ ├── dashboard-layout.6d3ff96c.js
│ ├── dashboard-layout.6d3ff96c.js.map
│ ├── views-auth-iocredentials.408abfbc.js
│ ├── views-auth-iocredentials.408abfbc.js.map
│ ├── views-dashboard-private.0abef05e.js
│ └── views-dashboard-private.0abef05e.js.map
└── netlify.toml
What am I missing?
I appreciate any help. Thx!
