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' }));
});
Related
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?
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 currently am working on a project that involves appending a react app to a static website. I can't just convert the html to jsx because the website uses custom css that can't be easily rendered by React without a ton of refactoring.
I've been using react-app-rewired-multiple-entry to add the html files to the project, which worked in development, but didn't work in the build. Another approach I have considered is putting the html files into the public folder and defining the route to the public folder to not require .html extensions to access html files. I can't use React-Router-DOM or anything because these files are outside of the scope of the react-app.
The HTML files will render properly when placed in the public folder, but they have that pesky .html extension in the URL, and I was wondering if there's a way to rewire the create-react-app configuration, or even next.js configurations, to tell it's internal router to serve .html files when the extensions aren't put into the URL.
SOLVED:
So my mistake was assuming that the dev server was the same server that the build bundle was served on. Huge mistake. To elaborate, what this means is that when I would I would do serve -s build, the server set up by serve didn't have the routes set up to display the static files, even though I did properly by modifying the dev server.
What I wound up doing was creating a custom (but simple) server.js file that served the unique build bundle, serving each static file separately. It wound up looking something like this (code provided in case anyone else encounters this problem):
const path = require("path");
const express = require("express");
const app = express(); // create express app
// serve the react-app by serving index.html
app.get("/react-app", (req, res) => {
res.sendFile(path.resolve("./build/index.html"));
});
// serving the static files at different routes
const routes = ['home', 'about', 'help', 'etc'];
routes.forEach(route => {
app.get(`/${route}`, (req, res) => {
res.sendFile(path.resolve(`./build/${route}.html`));
});
});
// start express server on port 5000
app.listen(5000, () => {
console.log("server started on port 5000");
});
I've been passed down a project built through Visual Studio and it contains an index.html.bundle file. In Visual Studio these files are usually built by running the build tool and this automatically creates the index.html page by combining all the template files inside the .bundle file.
However I am running this project on a Mac and can not get access to this tool.
I want to combine all the html templates into a singular index.html template, and was wondering if there is there a tool that can automate this (i.e. gulp, etc.)?
I found a gulp tool called gulp-concat that lets me automate this process as well. After installing, I put this into my gulpfile.js as a new task.
gulp.task('html', function() {
return gulp.src([
'index1.html',
'index2.html',
'index3.html'
])
.pipe(concat('index.html'))
.pipe(gulp.dest('./'));
});
I'm sure Gulp has a tool that will do this, but if you're just trying to combine files then cat will work fine:
cat index1.html index2.html index3.html > index.html
I want to have a src folder that contains all my client side code e.g. css, scripts, fonts, images etc. I want to use gulp to minify / combine some of these files and then copy the files into a dist folder. A folder structure typically looks something like this (outside of the .net world).
I am now wondering how I can structure something like this in asp.net 5. Is wwwroot folder the same as the dist folder? or should I have both "src" and "dist" folders under the wwwroot folder?
I like to keep client source file as a separate project. You can invoke glup build task to compile and copy compiled code into MVC project.
I asked this question before, take a look.
The name of the folder where the web server serve public files from (web server root or public folder) is optional in asp.net 5.
With the project templates that comes with visual studio this folder name is by default named to "wwwroot".
You change the name by modifying the property "webroot" in project.json.
Its therefore possible to serve your public files from a folder named "dist". If you are using a project template in visual studio you can rename the "wwwroot" folder to "dist", just change the "webroot" property in project.json to "dist".
If you put your "dist" and "src" folders in a folder called "wwwroot" and this folder is specified as the "webroot" directory in project.json then both of these folders will be
accessible via web requests. If you put the "src" folder outside the "wwwroot" folder then it will not be available.
src folder should be outside wwwroot. wwwroot will replace the dist folder ( so replace it in gulp script). If you run the application from visual studio it will look for it there. You do not lose any gulp functionality even serve works from there. So using VS debug vs serve and browserlink/livereload etc is a matter of preference.
The below is just a sample of separate gulp tasks that work in Visual Studio. For demo purposes. Should help you get the idea and get started
/*
This file in the main entry point for defining Gulp tasks and using Gulp plugins.
Click here to learn more. http://go.microsoft.com/fwlink/?LinkId=518007
*/
var styleType = "SCSS"; // CSS/LESS
var wwwroot = 'wwwroot';
var gulp = require('gulp');
var del = require('del');
var debug = require('gulp-debug');
gulp.task('Clean:Delete', function () {
del(wwwroot+"/*", '!web.config').then(paths => {
console.log('Deleted files and folders:\n', paths.join('\n'));
});
});
gulp.task('Copy:Fonts', function () {
gulp.src(['src/fonts/**/*'], {
base: 'src'
})
.pipe(debug())
.pipe(gulp.dest( wwwroot ));
});
gulp.task('Copy:Images', function () {
gulp.src(['src/images/**/*'], {
base: 'src'
})
.pipe(debug())
.pipe(gulp.dest(wwwroot));
});
gulp.task('Copy:HTML', function () {
gulp.src(['src/html/**/*'], {
base: 'src/html'
})
.pipe(debug())
.pipe(gulp.dest(wwwroot+'/views'));
});
Tasks are listed in Task Runner Explorer and can be controlled from IDE again a matter of preference IDE vs CMD
For completion sake. Lately ther eis an emerging number of devs using Visual Studio Code for FrontEnd https://code.visualstudio.com/b?utm_expid=101350005-28.R1T8FshdTBWEfZjY0s7XKQ.1&utm_referrer=https%3A%2F%2Fwww.google.com%2F