In all the examples I've seen, the entrypoint html file (e.g. index.html) lives alongside all the built assets emitted by webpack.
build/
index.html
bundle.js
1.bundle.js
2.bundle.js
etc
I'd like to have my entrypoint html separate from the built assets:
index.html
build/
bundle.js
1.bundle.js
2.bundle.js
etc
Is this possible with webpack?
Aha, figured it out. In the webpack.config, you have to set output.publicPath. That path is used to prefix all relative URLs in CSS.
In my case, I used:
output: {
path: path.resolve('./build'),
publicPath: './build/',
filename: '[name].bundle.js'
},
http://webpack.github.io/docs/configuration.html#output-publicpath
Related
I have a simple javascript projet created using npm. The source code is in a public github repository.
Here is the content of the repository
my-project
src
index.html
app.js
package.json
README.md
In my local environment I run it using lite-server by executing npm run dev.
I create gh-pages branch from my main branch, my code was automatically deployed after but when I visit the page it show the content of the README.md file.
How can I point to my index.html page instead so that my simple website is rendered ?
Do I have to absolutely move my index.html to the root directory ? Or is there other way without changing my project folder structre ?
=============== MY SOLUTION ===============
I just had to copy index.html and app.js at the root of the branch gh-pages.
You can only choose the root folder or /docs from repo settings.
https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site
I am serving my vuejs SPA in django at /app/
Serving static files at /static/
My app is working fine served in django development, but, collectstatic fails.
My vue.config.js has:
module.exports = {
assetsDir: 'static',
}
Compiled CSS files have font urls like this:
url(../../static/fonts/materialdesignicons-webfont.ee2bb9f3.eot
This works in the browser because it can't go up 2 dirs but in the filesystem goes up 2 dirs instead of one.
Works fine in the browser, but can't be deployed. It throws SuspiciousFileOperation exceptions:
django.core.exceptions.SuspiciousFileOperation: The joined path (/mnt/c/Users/static/fonts/materialdesignicons-webfont.ee2bb9f3.eot) is located outside of the base path component (/mnt/c/Users/fede_/braced/staticfiles)
I am really stuck with this.
I am authoring a Vue.js lib on NPM and one of my users is asking me to add my scss file into the build so they can modify it.
How can users modify that scss file and compile it back to my lib?
Would that be a hack like modifying a lib's source code or is that common practice?
If I externalize that scss into a static file (I suspect in public/ folder), how do I include it from my component?
Is there a documentation about it, I looked into Vue-cli, Webpack, and Google and didn't find a guide.
Currently I only export a minified css file into the build and my scss resides in my index.vue of my component.
My project architecture is:
| public/
| src/
| assets/
| components/
|- my-lib/ // Only this folder gets bundled into dist/
|- index.vue
|- app.vue // My app documentation.
In the dist/ folder I get:
mylib.css
mylib.umd.js
mylib.umd.min.js
mylib.common.js
mylib.umd.min.js
demo.html
I bundle my lib (with vue-cli 3) with:
vue-cli-service build --target lib --name mylib ./src/components/mylib/index.vue --dest ./dist
I have created a working React + Django REST project and it works fine on my development machine. I have used the following method to make it work on my CentOS 7 server.
I created the build directory using npm run build and copied that to the Django project root folder.
I added the build directory on TEMPLATES list in Django settings to identify the index.html file.
I added build/static folder in STATICFILES_DIRS.
I added url(r'^.*', TemplateView.as_view(template_name='index.html')), line to the root URLS file to capture all url patterns and load the index file in build folder that contains the React app.
I run manage.py collectstatic to create a staticfiles folder with all static files.
I added the staticfiles folder to the Nginx conf file like following:
location /static/ {
root /home/michel/project/staticfiles;
}
I have restarted the nginx server.
I am using the Django server to load the index.html file and I expect that the staticfiles folder will contain necessary static files to load my React app.
However, when I visit www.mydomain.com it loads the index.html file, but does NOT load the React app on <div id='root'></div>. I know this because the footer of the index is shown, but the css for styling that footer is also not working.
I am guessing that I have a problem of making the static files being detected. Any solution?
EDIT
Here is the code that links my React app to the index.html file.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
P.S. It is automatically generated by the create-react-app command.
Its probably because you don't understand the Nginx root directive.
This:
location /static/ {
root /home/michel/project/staticfiles;
}
Means if I request www.yourwebsite.com/static/style.css then Nginx is going to expect that file location to be
/home/michel/project/staticfiles/static/style.css
not
/home/michel/project/staticfiles/style.css
I'm trying to use the Django nonrel project for google app engine. I setup the test project as described here. I added a new folder to the project named "static" for my static files. And for the app.yaml file i added the lines;
- url: /static
static_dir: static
I can't reach my static files. Do i have to do additional configuration?
Thx in advance.
As people already pointed out, you should put your static_dir directive before /.* pattern
However, that is not the only thing you should know about.
By putting this directive into app.yaml, you make AppEngine webserver (whether it's development or production server) handle the path /static, and you need all the static files to be inside static directory. This means you will have to run python manage.py collectstatic every time you change anything in your static files (especially if you have/use apps with static files -- like, say, admin or django-tinymce) just to test these changes on local server
So how to avoid that? By default staticfiles provides helpers to serve these files on development server without running collectstatic every time, the problem is the direcotry name conflict described in the previous paragraph: Django can't catch requests to your static files path, as they are handled by appserver. You can resolve it by using different paths on development and production server:
# in settings.py
if DEBUG:
STATIC_URL = '/devstatic/'
else:
STATIC_URL = '/static/'
(djangoappengine sets DEBUG to True on development server). You can leave ADMIN_MEDIA_PREFIX = '/static/admin/', but remember to run collectstatic at least once before using admin
Of course remember to use {{ STATIC_URL }}path/to.css in templates instead of /static/path/to.css
Oh, and I assume that you distinguish the directory for original static files you work on and the directory where static files should be collected. I use this in my settings.py:
STATIC_ROOT = os.path.join(os.path.dirname(__file__), 'sitestatic')
STATICFILES_DIRS = (
os.path.join(os.path.dirname(__file__), 'static'),
)
This means: you put your static fiels into static dir (and into your apps' static dirs), collectstatic collects them into sitestatic dir. Appropriate app.yaml directive is
- url: /static
static_dir: sitestatic
Finally, you can configure app.yaml to ignore static and media directories when uploading your app, since all the static files will be collected into and served from sitestatic. However, you should set this only while uploading (otherwise these files will not be available in debug server)
app.yaml have nothing to do with Django, but it does configures App Engine front-end. The answer depends on whether you want to serve static files with Django or the front-end (which is, well, cheaper and faster).
If you just "added" your - url: /static mapping to the end, move it before the /.* wildcard. As all mappings processed from top to bottom — first matching mapping wins.
Well i just figured it out. Just use static_dir line before the main.py. So the app.yaml should look like this;
application: test
version: 1
runtime: python
api_version: 1
builtins:
- remote_api: on
inbound_services:
- warmup
handlers:
- url: /_ah/queue/deferred
script: djangoappengine/deferred/handler.py
login: admin
- url: /_ah/stats/.*
script: djangoappengine/appstats/ui.py
- url: /media/admin
static_dir: django/contrib/admin/media
expiration: '0'
- url: /static
static_dir: static
- url: /.*
script: djangoappengine/main/main.py