I have a Vue.js app that I want to host using Netlify for example. Besides content from different headless content management systems, I have HTML pages (documentation) from other sources, which I also want to display in the Vue.js app as documentation.
Do you know best practices on how I can include static HTML pages in a Vue.js and build a navigation for the documentation?
Should I place the HTML pages in the project and load them via HTML Loader? Is this possible in a dynamic way?
npm install html-loader --save-dev
module.exports = {
chainWebpack: config => {
config.module
.rule('html')
.test(/\.html$/)
.use('html-loader')
.loader('html-loader')
}
};
import html from '#/documentation/app/content.html' // how to load dynamic?
export default {
data() {
return {
html...
}
}
}
I have packed the HTML files of a documentation into a folder. Since there are several documentations, I have several folders.
Then I created a Vue.js app and imported the HTML loader. I can load single HTML files. But I don't know how to dynamically load HTML files by parameter. And how I can best build and store the hierarchy (navigation). Per .json file?
Related
Writing my first Feathersjs app. Using handlebars for templating. HTML Templates in Express seem to default to a view folder. It seems Feathersjs defaults to a CLI generated public folder. How can i tell Feathersjs to use my view folder for HTML? That will allow me to put all my HTML templates in that folder.
I have a laravel application that is working, but I need to display HTML files and assets (css and images), the web files were exported from another application built with python, so the HTML pages are very much (in hundreds), so I cannot be able to route each and every one of the pages.
I used the code below to route to the index page, but when I click on the link to another page, it returns 404
// Route::get('/index', function () {
// return file_get_contents(public_path() . '/pages/index.html');
// });
Please, how can I serve the pages, the folder is in the public folder of my laravel app.
I solved this by embedding it in an iframe tag in the blade file
What I did was, I hosted the web files generated from the python application on AWS S3 bucket, then I hosted the Laravel application on AWS Beanstalk, then I copy the S3 endpoint and embed it in the Laravel blade file using iframe, with this the web files are hidden under the authentication of the laravel app.
I am currently using next.js framework. Is it possible to route components out of /pages directory?
Would not like to use 'react-router' (because it'll be complicated to edit server.js). If it is inevitable I will but is there any other way?
im afraid this is not possible in nextjs. nextjs builds its route view pages folder. what you can do that wont ruin your project structure or URLs is to
add your components to the new repo.
create your pages folder based on your routes in pervious project.
add index.js in each pages folder.
and import the main component instead of actually moving it to pages folder, for example:
export { default } from './components/users';
this way you can drag and drop your existing structure and only add your route as pages folders.
notes to consider:
next default routing is case sensitive so be careful about your folder names if you want a work around for that you should use nextjs v12 create all pages to lower case and config your project to translate all routes to lower case.
you can have nested routes by adding nested folder:
pages
userslist
userdetail
index.js
this structure will create this route:
/userlist/userdetail
if you have components you dont want for user to be accessible do not put them in pages
if you have dynamic routes such as id in your route you can specify it by adding a folder in pages like [id] and redirect to it following this syntax
Router.push(`/sth/sth/${sth.id}`);
this configuration of redirects in nextjs might come in handy when you need to custom your links
i should also warn you migrating an existing project to nextjs requires a lot of work and a lot of changes to the project.
Suppose I have assets/data/geo/regions.json file in my NUXT.js project folders structure. How can I read data from this file into my project?
I have tried axios but I don't know what URL will have this file, I have tried all possible URLs. What is the better solution to do that? Maybe better to hold JSON files in static folder?
Thanks!
If the regions.json file won't change, you can easily put it in the static folder.
Then the url will be /data/geo/regions.json
See this question on the nuxt issues page
You can import JSON files with import data from 'data.json' and use the data property straight in your component.
You may want to use "require" instead of "import" if you planning to load data within the loop.
jsons = ["json_one","json_two"]
jsons_readed = []
// In the loop
file = require(`./assets/data/geo/${jsons[i]}`)
jsons_readed.push(file)
Then I think you can use jsons_readed to access objects.
You can use Nuxt Content for that:
Empower your NuxtJS application with #nuxt/content module: write in a content/ directory and fetch your Markdown, JSON, YAML, XML and CSV files through a MongoDB like API, acting as a Git-based Headless CMS.
The basics are as easy as the following line. That will load the regions.json file, parse it, and store its content in the content variable. See Nuxt Content's documentation for more information about it.
const content = await this.$content('regions').fetch()
Alternatively you can read our blog post about
Using Nuxt Content with a JSON File. It describes how to extend existing pages with JSON content but also how to dynamically generate pages based on it.
Disclaimer: I work at FrontAid CMS.
RequireJS text plugin (https://github.com/requirejs/text) needs files with .html extension. It seems that the .html requirement cannot be changed.
My html files are located in the web folder of my Symfony project.
With the default configuration it is impossible to serve any static html files with Symfony.
RequireJS is making GET request for the templates but the html content isn't returned.
Is there any known workaround for this ?
In the end I completely separated my backend (Symfony) from my frontend.
Now, I am only rendering the symfony base.html.twig (my main twig template used on all pages) to import my requirejs file which contains all the templates of the website.
Templates are developped in pure html and then transformed into .txt through the use of Gulp. They are all bundled within the .js file of requirejs.
gulp.task('devTemplates', ['cleanDevTemplates'], function () {
gulp.src(srcPaths.devTemplates) // The folder which contains the templates
.pipe(minifyHtml())
.pipe(rename({suffix: '', extname: '.txt'}))
.pipe(gulp.dest(destPaths.devTemplates))
.pipe(notify({ message: 'devTemplates task complete' }));
});